samura bhati samura bhati - 11 months ago 85
TypeScript Question

How to hide navigation tab using angular4 in typescript

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 Source

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">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download