CODEWITHSUNDEEP
angularmaterial-designangular-material
Sorin Grecu
Sorin Grecu

Reputation: 1034

Angular2 material design dynamic tabs

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 {
}

Upvotes: 3

Views: 4779

Answers (2)

Aakash Thakur
Aakash Thakur

Reputation: 3895

Please have a look at this plunker:https://plnkr.co/edit/vsONc35ucEr8e7M4WysH?p=preview

Adding to what Pradeep said, you might encounter some BrowserAnimationsModule error when you click on the addnew button. Please refer to Navigation Error in angular2 to resolve that. I would have shown that but encountering some problem in plunker.

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86730

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.

Upvotes: 2

Related Questions