0

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.

3
  • Por que no pruebas hacerlo con un ngclass? el 9 sep. 2019 a las 13:38
  • Ya lo tengo, y no me está funcionando, esta es la parte del ngClass: <i [ngClass]="{'fad': true, 'float-right': true, 'fa-chevron-down': (isExpandedConectividad === false), 'fa-chevron-right' : (isExpandedConectividad === true)}"></i>
    – auremanci
    el 9 sep. 2019 a las 13:42
  • Y si pruebas con <i [ngClass]="{'fad': true, 'float-right': true, 'fa-chevron-down': !isExpandedConectividad, 'fa-chevron-right' : isExpandedConectividad}"></i> el 9 sep. 2019 a las 14:55

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

Examina otras preguntas con la etiqueta o formula tu propia pregunta.