samura bhati samura bhati - 2 years ago 175
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.


<ul class="nav-tabs">
<li class="tab" *ngFor="let tab of tabs" []="">
<label (click)="clickTab(tab)">{{ }}</label>
<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>

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 =>;

<li class="tab" *ngFor="let tab of tabs | activeTabs" []="">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download