Angular2 material design dynamic tabs

Question

Angular newbie here. So I've been trying for the past couple of hours to implement the ability to create tabs dynamically. I went to using material design but I still cannot achieve this and cannot figure where I'm making the mistake.

When pressing the add tab button nothing happens. Also, adding or removing the addition of tabs from ngOnInit does nothing. It is clear that I'm 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 {
}

Answer 1

You have to use *ngFor instead of ng-repeate

your template code should be like this

<md-tab-group>  <md-tab *ngFor="let tab of tabs" label=TEST> </md-tab>
</md-tab-group>
<button (click)="addTab()">Add new tab</button>

there in ngFor in angular2 instead of ng-repeat.