md-tab hide title if only one tab

Question

I am new to Angular, I am using md-tab-group and md-tab to show information, it basicly likes:

    <md-tab-group *ngIf="obj">
       <md-tab *ngIf="obj.info1">
           .....
       </md-tab>
      <md-tab *ngIf="obj.info2">
           .....
      </md-tab>
      <md-tab *ngIf="obj.info3">
           .....
      </md-tab>
    </md-tab-group>

now I was asked to hide the tab label if only one tab, but Im not sure how to do that. Thanks in advance for any help :)

Answer 1

You can simple a *ngIf statement to check the length of your array. If it's greater than 1, use md-tab, if it's == 1, then use any normal content area tag like <p></p>. I don't think it's possible to hide md-tab-label selector and only show the md-tab-content for an md-tab.

Here' the solution that I could think of:

<h1>Array Length > 1</h1>

<md-tab-group *ngIf="obj.length > 1">
  <md-tab *ngFor="let item of obj" [label]="item.title">{{ item.content }}</md-tab>
</md-tab-group>

<h1>Array Length 1</h1>

<p *ngIf="obj.length == 1">
 {{ obj[0].content }}
</p>

Plunker demo

Hope this helps!