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 {
}
source to share
Please have a look at this plunker: https://plnkr.co/edit/vsONc35ucEr8e7M4WysH?p=preview
Adding to what Pradeep said, you might run into some error BrowserAnimationsModule
when you click on the addnew button. Please refer to Navigation error in angular2 to resolve this issue. I would show it, but ran into some kind of problem in the plunker.
source to share