How to show focus icon on Active tab in Angular Material-CodePudding

I am using Angular material and dynamically generating the tabs in HTML. Now i wanted to show drop arrow icon on active or selected tabs.

I have created below code but every time it is returning false value.

Can anyone help me to do this.

import { SelectionModel } from '@angular/cdk/collections';
export class HeaderComponent implements OnInit {
 
  private selection = new SelectionModel();  

  select(tab) {
    if (!this.selection.isSelected(tab)) {
      this.selection.clear();
      this.selection.select(tab);
    }
  }

  isSelected(tab): boolean {    
    return this.selection.isSelected(tab);
  }
}

HTML

I am using *ngif="isSelected(tab)" and (click)="select(tab.makeLineName)" to call and check the values in HTML

<div >
    <div >
        <mat-tab-group  mat-align-tabs="left">
            <mat-tab *ngFor="let tab of masterData;let i=index">
                <ng-template mat-tab-label>
                    <div >
                        <div >
                            **<button **(click)="select(tab.makeLineName)"**>{{tab.makeLineName}}</button>**
                        </div>
                        <div>
                            <mat-icon *ngif="isSelected(tab)" >arrow_drop_down</mat-icon>
                        </div>
                    </div>
                </ng-template>
                <div [formGroup]="lineItem" *ngFor="let lineItem of getItems(tab.makeLineName); let j = index">
                    <div >
                        <div >
                            <h5 >Design Process Capacity (Tonnes Per Hour)</h5>
                            <mat-form-field appearance="outline">
                                <input matInput type="number" 
                                    placeholder="Design Process Capacity" formControlName="designProcessCapacity">
                            </mat-form-field>
                        </div>
                    </div>
                </div>
            </mat-tab>
        </mat-tab-group>
    </div>
</div>

CodePudding user response：

If I understand the question right, you want to display the arrow icon on the tab that is selected right? For starters, I see there is a typo here

<mat-icon *ngif="isSelected(tab)" >arrow_drop_down</mat-icon>

*ngif should be *ngIf

I think you can use the property isActive of the material tab group, to check whether your tab is activated/clicked/selected/ if it is then you can display the drop-arrow icon. I added the minimum code below which is required to display the icon when your tab is Active.

This way you won't need those checks in your typescript file.

<mat-tab-group  mat-align-tabs="left">
  <mat-tab *ngFor="let tab of masterData;let i=index" #matTabTest>
    <ng-template mat-tab-label>
      <div >
        <div >
            **<button **(click)="select(tab.makeLineName)"**>{{tab.makeLineName}}</button>**
        </div>
        <div>
          <mat-icon *ngIf="matTabTest.isActive" >arrow_drop_down</mat-icon>
        </div>
      </div>
    </ng-template>
  </mat-tab>
</mat-tab-group>

I added #matTabTest so that we can a reference for the mat-tab. Which I then used in *ngIf=matTabTest.isActive to check wether to display icon or not.