Angular: Toggle Active Class on Only Button the Current Clicked Button (Not Using *Ngfor)

Angular: Toggle active class on only button the current clicked button (not using *ngFor)

Simple, just use Event Delegation.

Component.html:

<div class="btn-group" (click)="onButtonGroupClick($event)">
  <button class="btn btn-secondary" type="button">Premier bouton</button>
  <button class="btn btn-secondary" type="button">Second bouton</button>
  <button class="btn btn-secondary" type="button">Troisième bouton</button>
  <button class="btn btn-secondary" type="button">Quatrième bouton</button>
</div>

Component.ts/.js:

  onButtonGroupClick($event){
    let clickedElement = $event.target || $event.srcElement;

    if( clickedElement.nodeName === "BUTTON" ) {

      let isCertainButtonAlreadyActive = clickedElement.parentElement.querySelector(".active");
      // if a Button already has Class: .active
      if( isCertainButtonAlreadyActive ) {
        isCertainButtonAlreadyActive.classList.remove("active");
      }

      clickedElement.className += " active";
    }

  }

Live example: https://plnkr.co/edit/EE4dOMgpY8QA2qZXjMiW?p=preview

How to set active class on list of buttons

The common pattern is to create a new variable to keep track of which button is clicked, to reassign that variable on a click event, and to bind the active class on whether or not the current button equals the selected button.

From the Angular 2 tutorial:

//...

<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

//...

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;
  onSelect(hero: Hero) { this.selectedHero = hero; }
}

Adding the active class to each clicked button, Angular 4

Just maintain a temporary array

<button *ngFor="let button of [1,2,3,4]; let i = index" [ngClass]="{'active':isClicked[i]}" (click)="isClicked[i] = (isClicked[i]? false :true )">button</button>

in component public isClicked = [];

working fiddler --> https://plnkr.co/edit/MwuWhtBPPQUQCG2Y9qmx?p=preview

Hope it helps!!

Angular - Make a button active when it is clicked and inactive when an other button in the group is clicked

The problem is that you are not resetting isClicked value when you click on other buttons.

The simplest solution is something like this.

app.component.html

<button mat-button *ngFor="let button of filterButtons" [ngClass]="{'active': button.isClicked}" (click)="setActive(button)">
    {{ button.text }}
</button>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    filterButtons = [
    { text: 'Posted', isClicked: false },
    { text: 'FFM', isClicked: false },
    { text: '9999', isClicked: false },
  ]


  setActive(button: any): void {
    for(let but of this.filterButtons) {
      but.isClicked = false;
    }

    button.isClicked = true;
  }
}

You can find other solutions, like explained in this post

Show More/Show Less ngFor data on button click

you want mannage a list of items, so you need an array -not a single variable-. So defined an array

more:boolean[]=[]

futhermore, to change the text in the html NOT use something so "bizarro" as event.currentTarget.parentElement.children[0].innerText = 'See More', better "angular way"

<p (click)="more[i]==!more[i]" class="seeMore">
    {{more[i]?'See Less':'See more'}}
</p>

And replace your

`selectedIndex === i` by `more[i]`

Add active class to element in nested ngFor Angular 6

You have 2 problems:

• Your radios do not have a common name for each test (so that can only select one in total)

• You only keep one selected item, so you can only ever apply the class to one item)

Modify component.ts to save selected itemS

selectedItems = {};
  selectItem(item, id) {
    this.selectedItems[id] = item;
      }

  isSelectedItem(item, id) {
    return this.selectedItems[id] && this.selectedItems[id] === item;
  };
}

Modify your template to add a common name to your radios and change the check for active class

  <label class="btn btn-outline-secondary"
          *ngFor="let item of test.items"
          (click)="selectItem(item,test.id)"
          [ngClass]="{active: isSelectedItem(item, test.id) }">
          <input
          type="radio"
          name="something_{{test.id}}"/>
          {{item}}
        </label>

Stackblitz demo

Apply toggle ngclass to multiple buttons

You can create just one variable and change the value every time you click on a button.

Your component.ts would be in that case:

test: string = 'test1';

Your html:

<button class="btn" (click)=" test='test1' " [ngClass]="test === 'test1' ? 'style':'styleChange'">btn1</button>
<button class="btn" (click)=" test='test2' " [ngClass]="test === 'test2' ? 'style':'styleChange'">btn2</button>
<button class="btn" (click)=" test='test3' " [ngClass]="test === 'test3' ? 'style':'styleChange'">btn3 </button>

You can create as many buttons as you need and change for every next button just a value.

Angular 6 add active class to ngFor element from another ngFor

<div *ngFor="let Category of model.categories">
<a data-toggle="collapse" href="#{{Category.name}}" (click)="Category.toggle = !Category.toggle;" [attr.id]="Category.name">{{Category.name}}</a>

<!-- Header Section-->
<div>
        <div>
                <a href="#subCategory.name" class="list-group-item" *ngFor="let subCategory of Category.subCategories; let index = index" 
        (click)="subCategory.subCategoryToggle = !subCategory.subCategoryToggle" data-toggle="collapse" aria-expanded="false" [attr.aria-controls]="subCategory.name">
                  {{subCategory.name}}
                </a>

        </div>
     </div>
<!-- Header Section-->

<!-- Body Section-->
<div  [attr.id]="subCategory.name" *ngFor="let subCategory of Category.subCategories; let index = index" 
    [ngClass]="subCategory.subCategoryToggle ? 'active' : ''" [attr.data-parent]="'#' + Category.name">
<div>
<!-- Body Section-->

MY Fix..

---

Related Topics