How to hide navigation tab using angular4 in typescript

Question

I have created 3 tabs in angular 4. Currently I am working on 2 of the tabs and I want to work on the 3rd tab in the futur.

I want to hide the 3rd tab using javascript/typescript.

app.component.html

<div>
  <ul class="nav-tabs">
    <li class="tab" *ngFor="let tab of tabs" [class.tab--active]="tab.active">
      <label (click)="clickTab(tab)">{{ tab.name }}</label>
    </li>
  </ul>
  <div class="tab-content">
    <app-detail *ngIf="tabs[0].active" [app1]="app1"></app-detail>
    <app-detail1 *ngIf="tabs[1].active" [app1]="app1"></app-detail1>
    <app-detail2 *ngIf="tabs[2].active" [app1]="app1"></app-detail2>
  </div>
</div>

Answer 1

Why using Typescript? Use CSS.

ul.nav-tabs li:nth-child(3){
   display: none;
}

Answer 2

You can just set tabs[2].active = false in your AppComponent constructor, or ngOnInit

export class ActiveTabsPipe implements PipeTransform {
    public transform(values: any[]): any[] {
        return values.filter(val => val.active);
    }
}


<li class="tab" *ngFor="let tab of tabs | activeTabs" [class.tab--active]="tab.active">

Answer 3

Change your HTML to:

<div>
  <ul class="nav-tabs">
    <li class="tab" *ngFor="let tab of tabs" *ngIf="!tab.hidden" [class.tab--active]="tab.active">
      <label (click)="clickTab(tab)">{{ tab.name }}</label>
    </li>
  </ul>
  <div class="tab-content">
    <app-detail *ngIf="tabs[0].active" [app1]="app1"></app-detail>
    <app-detail1 *ngIf="tabs[1].active" [app1]="app1"></app-detail1>
    <app-detail2 *ngIf="tabs[2].active" [app1]="app1"></app-detail2>
  </div>
</div>

Add a hidden field to your tab object you want to hide and set it to true .