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 class="tabGroupDiv row">
<div class="lossLinesDiv">
<mat-tab-group class="lossMatGrpCls" mat-align-tabs="left">
<mat-tab *ngFor="let tab of masterData;let i=index">
<ng-template mat-tab-label>
<div class="validatorTabClass">
<div class="row">
**<button **(click)="select(tab.makeLineName)"**>{{tab.makeLineName}}</button>**
</div>
<div>
<mat-icon *ngif="isSelected(tab)" class="down-arrow-mat-icon">arrow_drop_down</mat-icon>
</div>
</div>
</ng-template>
<div [formGroup]="lineItem" *ngFor="let lineItem of getItems(tab.makeLineName); let j = index">
<div class="admin-console-main-wrapper">
<div class="col-xs-3 col-md-3 deo-dv-list-wrapper">
<h5 class="topbar-items-text">Design Process Capacity (Tonnes Per Hour)</h5>
<mat-form-field appearance="outline">
<input matInput type="number" class="line-fte-input smed-input"
placeholder="Design Process Capacity" formControlName="designProcessCapacity">
</mat-form-field>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
</div>
</div>
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)" class="down-arrow-mat-icon">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 class="lossMatGrpCls" mat-align-tabs="left">
<mat-tab *ngFor="let tab of masterData;let i=index" #matTabTest>
<ng-template mat-tab-label>
<div class="validatorTabClass">
<div class="row">
**<button **(click)="select(tab.makeLineName)"**>{{tab.makeLineName}}</button>**
</div>
<div>
<mat-icon *ngIf="matTabTest.isActive" class="down-arrow-mat-icon">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.