Angular2 dynamic material tabs

Angular newbie here. So I have been trying for the last couple of hours to implement the ability to dynamically create tabs. I went for material design, but I still can't get it and can't figure out where I am making the mistake.

Nothing happens when you click the add button. Also, adding or removing adding tabs from ngOnInit does nothing. It is clear that I am missing something ... Any help please?

tabs.ts

import {Component, OnInit} from '@angular/core';
import {Tab} from "./tab";

@Component({
  selector: 'tabs',
  template: `<md-tab-group>  <md-tab ng-repeat="tab in tabs"
              label=TEST>
</md-tab>
</md-tab-group>
<button (click)="addTab()">Add new tab</button>`,
})
export class Tabs implements OnInit {

  tabs: Tab[] = [];

  ngOnInit(): void {

  }

  addTab() {
    var tab = new Tab();
    this.tabs.push(tab)
  }
}

      

        
        
        
      

    

tab.ts

import {Component} from '@angular/core';

@Component({
  selector: 'tab',
  template: `<products></products>`,
})
export class Tab {

}

      

        
        
        
      

    

app.ts

import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<tabs></tabs>`,
})
export class AppComponent {
}