How to disable a tab element from array of tabs in Angular and Typescript

Question

Below is the 5 array of tabs that the user can click. I want to disable the tabs element 2 and 3. So that the tab name is visible but the user should not be able to click on those tab. I have tried setting the tabs to active: false in the typescript file but that didn't work. I'm not sure on how to go about it. Any help or suggestions would be greatly appreciated.

TypeScript

public static User_Tabs: any [
{ value: 'user_tab_one', viewValue: 'User 1'}, 
{ value: 'user_tab_two', viewValue: 'User 2'}, 
{ value: 'user_tab_three', viewValue: 'User 3'}, 
{ value: 'user_tab_four', viewValue: 'User 4'},
{ value: 'user_tab_five', viewValue: 'User 5'}];

HTML

<div class= "user-tabs">
<ng-container *ngFor = "let tab of userTabs">
<div class="filter" (click)="onTabSelect(tab.value)" 
[ng-class]="{'activeTab': tab.value === userTabType}">
{{tab.viewValue}}</div>
</ng-container>
</div>

Answer 1

You can add isActive flag in your User_Tabs array & for element 2 and 3 pass isActive Boolean value as false

public static User_Tabs: any [
  { value: 'user_tab_one', viewValue: 'User 1', isActive :true}, 
  { value: 'user_tab_two', viewValue: 'User 2', isActive :false}, 
  { value: 'user_tab_three', viewValue: 'User 3', isActive :false}, 
  { value: 'user_tab_four', viewValue: 'User 4', isActive :true},
  { value: 'user_tab_five', viewValue: 'User 5', isActive :true}
];

In Html, you can use [disabled] attribute.

<ng-container *ngFor = "let tab of userTabs">
  <div class="filter" (click)="onTabSelect(tab.value)" [disabled]='!tab.isActive'>
  {{tab.viewValue}}</div>
</ng-container>