Add and remove classes with event click in angular

Question

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.

Component.html:

 <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 float-right isExpandedConectividad ? fa-chevron-down : fa-chevron-right"></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>

Component.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);
  }
}

I think it may be just [class], that works for me at least

John Kane
– John Kane

2019-09-09 14:53:36 +00:00
Commented Sep 9, 2019 at 14:53 — John Kane
– John Kane, Commented Sep 9, 2019 at 14:53
also you have an unmatched: ' it looks like

John Kane
– John Kane

2019-09-09 14:58:09 +00:00
Commented Sep 9, 2019 at 14:58 — John Kane
– John Kane, Commented Sep 9, 2019 at 14:58

Vandesh · Accepted Answer · 2019-09-09 15:06:40Z

4

You can separate out the statically applied classed and dynamically applied classes as such -

<i class="fad float-right" [ngClass]="isExpandedConectividad ? 'fa-chevron-down' : 'fa-chevron-right'"></i>

Check comparable StackBlitz here

You can check the usage of ngClass here. In your case, the boolean was being evaluated under single quotes - ' '

edited Sep 9, 2019 at 15:06

answered Sep 9, 2019 at 15:01

Vandesh

6,9642 gold badges31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nils · Accepted Answer · 2019-09-09 15:00:48Z

1

I always do the following:

Html:

 <button (click)="onClick()">

TS:

activeClass: boolean;    
onClick() {this.activeClass = !this.activeClass}

And again in Html:

<div [ngClass]="{cssClass1: activeClass, cssClass2: !activeClass}">

You can add as many classes as you wish allthough a boolean won't be enough then ^^

answered Sep 9, 2019 at 15:00

Nils

4798 silver badges22 bronze badges

Comments

Herbert Junior · Accepted Answer · 2019-09-09 15:21:54Z

0

[class.yourclassename]="isExpandedConectivity"

and if this condition is true, the class will be added

answered Sep 9, 2019 at 15:21

Herbert Junior

1016 bronze badges

Collectives™ on Stack Overflow

Add and remove classes with event click in angular

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related