Estoy usando material angular y generando dinámicamente las pestañas en HTML. Ahora quería mostrar el ícono de la flecha desplegable en las pestañas activas o seleccionadas.
He creado el siguiente código, pero cada vez que devuelve un valor falso.
¿Alguien puede ayudarme a hacer esto?
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
Estoy usando *ngif="isSelected(tab)" y (click)="select(tab.makeLineName)" para llamar y verificar los valores en 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>Si entiendo bien la pregunta, ¿desea mostrar el ícono de flecha en la pestaña que está seleccionada, verdad? Para empezar, veo que hay un error tipográfico aquí
<mat-icon *ngif="isSelected(tab)" class="down-arrow-mat-icon">arrow_drop_down</mat-icon> *ngif debe ser *ngIf
Creo que puede usar la propiedad isActive del grupo de pestañas de material, para verificar si su pestaña está activada/hace clic/seleccionada/si es así, entonces puede mostrar el icono de flecha desplegable. Agregué el código mínimo a continuación que se requiere para mostrar el ícono cuando su pestaña está activa.
De esta manera, no necesitará esos controles en su 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> #matTabTest para que podamos tener una referencia para mat-tab . Que luego usé en *ngIf=matTabTest.isActive para verificar si mostrar el ícono o no.