Quiero cambiar la clase activa en li click
<pre> <li class="en active" (click)="useLanguage('fr')"></li> <li class="sp" (click)="useLanguage('zh')"></li> <li class="po" (click)="useLanguage('en')"></li>En componente he escrito la función
useLanguage(language: string) { this.translate.use(language); }Quiero agregar la clase activa cuando hago clic en li y también tengo que eliminarla de otras li. ¿Cómo hacer?
Una clase se puede aplicar condicionalmente usando esta sintaxis:
<div [class.className]="someBoolean"><div>Entonces, si almacena el idioma seleccionado en una variable, puede hacer esto:
Modelo:
<li [class.active]="selectedLanguage==='fr'" (click)="useLanguage('fr')"></li> <li [class.active]="selectedLanguage==='zh'" (click)="useLanguage('zh')"></li> <li [class.active]="selectedLanguage==='en'" (click)="useLanguage('en')"></li>Componente:
selectedLanguage = 'fr'; useLanguage(language: string) { this.translate.use(language); this.selectedLanguage = language; }Aquí hay una demostración de StackBlitz en funcionamiento.
// idioma predeterminado
selectedLanguage = "fr";// html
<li [ngClass]="{'selected-value' : selectedLanguage==='fr'}"(click)="useLanguage('fr')"></li>// cambiar la función de idioma
useLanguage(language: string) { this.translate.use(language); this.selectedLanguage = language; }