Tengo una mat-select y me gustaría cambiar un ícono de bandera en un lapso en mat-label , según la opción seleccionada.
Se muestra la bandera inicial, después de un clic no se produce ningún cambio en el lapso.
Las banderas en la lista de opciones funcionan correctamente, por lo que la pregunta solo se refiere a la etiqueta .
Estoy intentando algo como:
HTML:
<mat-form-field> <mat-label> <span [class]="getLanguageFlag(selectedLanguage)"></span> {{ selectedLanguage }} </mat-label> <mat-select [(ngModel)]="selectedLanguage" name="selectedLanguage" id="selectedLanguage" > <mat-option *ngFor="let language of languages" [value]="language" (click)="changeLanguage(language)" > <span [class]="getLanguageFlag(language)"></span> {{ language }} </mat-option> </mat-select> </mat-form-field>TS:
selectedLanguage: string = environment.defaultLanguage; constructor( private store: Store<State>, private translateService: TranslateService) {} changeLanguage(language: string): void { this.selectedLanguage = language; } getLanguageFlag(language: string): string { let style = 'flag-icon flag-icon-'; return language === 'en' ? `${style}gb` : `${style}${language}`; }También probé un getter/setter, pero el setter no parecía funcionar cuando usaba mat-select.
¡Gracias de antemano por tu ayuda!
Lo probé y tu código funciona. Solo debe verificar si el código de país de 2 letras es correcto.
No sé si simplemente no lo copió correctamente, pero le falta cerrar la etiqueta <mat-form-field> en su HTML, así que verifique eso también.
La solución final, basada en la ayuda de Nenad: (la bandera antes de la opción, sin etiqueta sobre la entrada seleccionada)
<mat-form-field> <span [class]="getLanguageFlag(selectedLanguage)"></span> <mat-select [(ngModel)]="selectedLanguage" name="selectedLanguage" id="selectedLanguage" > <mat-option *ngFor="let language of languages" [value]="language" (click)="changeLanguage(language)" > <span [class]="getLanguageFlag(language)"></span> {{ language.toUpperCase() }} </mat-option> </mat-select> </mat-form-field>