CODEWITHSUNDEEP
angularangular-material
Claire
Claire

Reputation: 485

Angular 2/Material: How to dynamically specify the content of <md-tab>?

I wanted to make different tabs for different content. So far I'm able to create the labels of the tabs in a dynamic way using ngFor and a unique pipe.2, but not the content. Is there some way to do this? I want to use a different component depending on the label that I'm using. 

<md-tab-group >
  <md-tab *ngFor="let afd of afdeling | uniek" label={{afd.afdelingsNaam}}>

    Content
  </md-tab>

</md-tab-group>

Upvotes: 0

Views: 1063

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38767

You can achieve dynamic labels using one way binding [] as [target]="expression":

<md-tab-group>
  <md-tab *ngFor="let afd of afdeling | uniek" [label]="afd.afdelingsNaam">
    Content
  </md-tab>
</md-tab-group>

Here is a plunker demonstrating the functionality. The [label] will evaluate the value/expression passed in to dynamically populate the label text in this case.

Hopefully that helps!

Upvotes: 1

Related Questions