Tengo un componente.html con este trozo de código:
<li class="nav-item" (click)="changeCollapsed()" aria-controls="collapseUsuarios">
<a href="#" class="nav-link">
<span class="w-20px text-center mr-2">
<i class="fad fa-analytics"></i>
</span>
Conectividad
<span class="w-100">
<i [ngClass]="{'fad': true, 'float-right': true, 'fa-chevron-down': (isExpandedConectividad === false), 'fa-chevron-right' : (isExpandedConectividad === true)}"></i>
</span>
</a>
<ul id="collapseConectividad" [collapse]="!isCollapsedConectividad" [isAnimated]="true" class="nav flex-column ml-5">
<li class="nav-item">Tareas</li>
<li class="nav-item">Diario</li>
</ul>
</li>
Y este el código en el componente.ts:
export class SidebarComponent {
isCollapsedTrabajo = false;
isCollapsedUsuarios = false;
isCollapsedConectividad = false;
isExpandedConectividad = false;
changeCollapsed(): void{
this.isCollapsedConectividad = !this.isCollapsedConectividad;
this.isExpandedConectividad = !this.isExpandedConectividad;
console.log(this.isExpandedConectividad);
}
}
Lo que quiero conseguir es que cuando se haga clic en el li, uno de los elementos i cambie de clase, por defecto he puesto que tenga la clase fa-chevron-right y quiero que al hacer clic se le quite la anterior clase mencionada y se le ponga la clase fa-chevron-right.
<i [ngClass]="{'fad': true, 'float-right': true, 'fa-chevron-down': !isExpandedConectividad, 'fa-chevron-right' : isExpandedConectividad}"></i>