ngClass active button function Angular

Question

How can I change the style of each button once I click on it?

I have several buttons and I need to achieve something similar to an active state, but in reality what you execute is a function.

I tried the following but I do not achieve an active state [ngClass]=" { 'btn-primary':categoria.nombre }

component.ts

ngOnInit() {
  this.eventos = this.fs.getEventosAll();
  this.categorias = this.fs.getCategorias();
}

filtrarEventos(categoria) {
 this.eventos = this.fs.filterEventos(categoria);
}

component.html

<button class="btn btn-sm" *ngFor="let categoria of categorias | async" (click)="filtrarEventos(categoria.nombre)" [ngClass]=" { 'btn-primary':categoria.nombre } ">
 {{ categoria.nombre }}
</button>

Make an array of object in which each object has a state, then use this state to trigger your UI interactions. Also, use English in your code (at least when sharing on SO) — Dimitrios Filippou
– Dimitrios Filippou, Commented Apr 6, 2019 at 16:53

mbojko · Accepted Answer · 2019-04-06 17:03:05Z

3

You can first, add a property, let's say, categoriaActiva to the component holding the buttons, add

this.categoriaActiva = categoria

to the filtrarEventos callback, and finally add

[class.btn-primary]="categoria.nombre === categoriaActiva"

to the button.

answered Apr 6, 2019 at 17:03

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

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

Comments

Rajat Badjatya · Accepted Answer · 2019-04-06 17:21:30Z

2

Here is the stackblitz of what you are trying to do

I called one method which sets the value of the clicked index

Template

   <div *ngFor="let categoria of categorias; let i = index" 
           (click)="changeState(i)" 
           [ngClass]="clickedIndex === i  ? 'primary' : 'secondary'">
       {{categoria.nombre}}
   </div>

Component

 changeState(index) {
    this.clickedIndex = index;
 }

edited Apr 6, 2019 at 17:21

answered Apr 6, 2019 at 16:56

Rajat Badjatya

8487 silver badges17 bronze badges

Collectives™ on Stack Overflow

ngClass active button function Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related