title: Add and remove classes with event click in angular
body: <p>I want to add one class or another with a click event, I'm using the angular ngClass, but it doesn't work for me.
  When you click on the "li" element, it calls a function that changes the value of the "isExpandedConectivity" variable, but does nothing.</p>
  
  <p>Component.html: </p>
  
  <pre><code> &lt;li class="nav-item" (click)="changeCollapsed()" aria-controls="collapseUsuarios"&gt;
              &lt;a href="#" class="nav-link"&gt;
                  &lt;span class="w-20px text-center mr-2"&gt;
                      &lt;i class="fad fa-analytics"&gt;&lt;/i&gt;
                  &lt;/span&gt;
                  Conectividad
                  &lt;span class="w-100"&gt;
                      &lt;i [ngClass]="'fad float-right isExpandedConectividad ? fa-chevron-down : fa-chevron-right"&gt;&lt;/i&gt;
                  &lt;/span&gt;
              &lt;/a&gt;
              &lt;ul id="collapseConectividad" [collapse]="!isCollapsedConectividad" [isAnimated]="true" class="nav flex-column ml-5"&gt;
                  &lt;li class="nav-item"&gt;Tareas&lt;/li&gt;
                  &lt;li class="nav-item"&gt;Diario&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>Component.ts:</p>
  
  <pre><code>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);
    }
  }
  </code></pre>