Remove or Add Class in Angular

Add and remove classes with event click in angular

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 - ' '

I am trying to add/remove class using the $event in Angular on (click)

You're invoking two methods in your event. Unless you can include the logic inside updateTotal(), I can only guess it may be preventing togglePressed() to be invoked. Try switching the order to invoke togglePressed() first.

There is, however, a simpler way to do class toggling with ngClass provided by Angular. Add a new boolean property to your component's TS file.

public isPressed = false;

Then setup your DOM like so

<button 
  [ngClass]="{'service-button': true, 'pressed': isPressed}" 
  mat-raised-button 
  color="primary" 
  fxFlex 
  (click)="updateTotal(service.cost)"
>{{service.name}}: {{service.cost | currency}}</button>

[ngClass} will enable each class based on the boolean value assigned to it. Since we always want service-button to be present, we set it to true. But our pressed class will be set to our new boolean property.

Inside your updateTotal() method, you can add this single line at the beginning to trigger the state change.

public updateTotal(cost){
  this.isPressed = !this.isPressed;
  // Remaining updateTotal() logic.
}

Now each time the user clicks the button, the pressed class will toggle on and off.

How can I add or remove class name in Angular?

To dynamically attach/detach classes you can use ngClass (more here) or Class-Binding (more here).

ngClass

For both solution you need a variable to store information which button is currently selected.

comp.component.ts

// A helper variable to store the currently selected button
selected: number;

selectButton(selectNum: number){
  this.selected = selectNum;
}

comp.component.html

<div class="btn-group description" >
  <button 
    (click)="selectButton(2)" 
    [ngClass]="{ 'desActive': selected === 2}" 
    class="desc2"
  >
    Description
  </button>

  <button 
    (click)="selectButton(3)" 
    [ngClass]="{ 'desActive': selected === 3}" 
    class="desc3"
  >
    Reviews
  </button>

</div>

Class-Binding

The Typescript part here would be the same as in the example above, so I don't add it here again.

But the HTML looks a bit different

comp.component.html

<div class="btn-group description" >
  <button 
    (click)="selectButton(2)" 
    [class.desActive]="selected === 2" 
    class="desc2"
  >
    Description
  </button>

  <button 
    (click)="selectButton(3)" 
    [class.desActive]="selected === 3" 
    class="desc3"
  >
    Reviews
  </button>

</div>

NOTE: The Typescript part is just an example how you could store the selected button in a variable.

Update:

To solve the issue you mentioned in the comment you have two options.

Option 1:

Add a ? to the variable declaration

selected?: number;

The ? marks the variable as optional.

Option 2:

Initialize the variable in the constructor, e.g., with 2.

constructor(){
  this.selected = 2; 
}

I would recommend option 1 if you don't want to have a pre-selected button.

Angular 6 How to add and remove class using Angular Renderer2

what about [ngClass]="{'test': selectedTab== 1}"

I have created a ts variable calling selectedTab and declared as number

in HTML I've used [ngClass]="{'test': selectedTab== 1}" so when selectedTab = 1 test class will be added .

and on click method I have called selectTab(2) sending clicked tab parameter and handled this function in ts like

selectTab(selectedTab) {
if(selectedTab == 1){
  this.selectedTab = 1;
}else if(selectedTab == 2){
  this.selectedTab = 2;
}else{
  this.selectedTab = 3;
}  }
}

How to add remove (toggle) class in angular when clicked

You can use template reference variable to toggle classes in template:

<li #myLi class="treeview" (click)="myLi.classList.toggle('my-class')"><li>

---

Or if you want to do it in the component file (maybe if you want to add more logic):

component.ts

toggleClass = (event) => {
    event.target.classList.toggle('my-class');
}

template.html

<li class="treeview" (click)="toggleClass($event)"><li>

How to add and remove classes from dynamically created elements in Angular 2+ (no ngClass)?

I would recommend you to add the dropdownIsToggled to the itemmodel.

Like

interface Item {
   id: any,
   dropdownIsToggled: boolean,
   ... other props
}

In your html you do something like

<span class="item-dropdown">
<button class="item-dropdown-button" (click)="toggleDropdown(item)">
    <i class="bicon bicon-more-vertical bicon-md"></i>
</button>
<div *ngIf="item.dropdownIsToggled" class="item-dropdown-menu shadow-md">
    <ul>
        <li>
            <button class="list-item"
            (click)="deleteItem(item.id)">
                delete
            </button>
        </li>
        <li>
            <button class="list-item" (click)="markRead(item.id)">
                mark as read
            </button>
        </li>
    </ul>
</div>

TS:

toggleDropdown(item) {
   item.dropdownIsToggled = !item.dropdownIsToggled;
}

If you don't want to add UI specific properties to your model, you can do something like this:

interface Item {
   id: any,
   ... other props
}
interface ItemUI extends Item {
   dropdownIsToggled: boolean,
}

In this way you can provide a clean state for every item.

Angular add and remove classes triggered by method without jquery

For Angular instead of angularjs, try:

app.component.html

<button (click)="toggleMethod()">Toggle Classes</button>  
<div class="myDiv" [class]="{'animate__animated': toggle, 'animate__fadeInLeft': toggle}">
    // Stuff here
</div>

app.component.ts

toggle: boolean = false;

toggleMethod() {
    this.toggle = !this.toggle;      
}

---

Related Topics