I have successfully implemented 3 tabs in my Angular 4 project. At the moment, I am focusing on working with the first two tabs and planning to tackle the third tab in the near future.
To keep things clean and organized, I am looking to use JavaScript/TypeScript to hide the third tab until I am ready to work on it.
In my app.component.html file, here is the code snippet:
<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>