How to set active class on clicked button only using Angular6?

Question

I have 3 buttons in a row. I want to set active class on clicked button only but problem is when i clicked another button after one button so it is setting active class on all buttons.

Set active class is not working correctly. All buttons get active class when clicked. If i will click on 2 buttons it will set active class on both button when clicked.

Here is my code at stackblitz

StackBlitz Code

i want to set active class only on clicked button at a time not on all the buttons.

Answer 1

I think that you can do this more easy, with angular dom features.

You can show here:

https://stackblitz.com/edit/angular-s8suc8?file=src/app/app.component.ts

it is a sample that I think that you want, but I think that you can do it better:

https://stackblitz.com/edit/angular-vmzijo?file=src/app/app.module.ts

Answer 2

as far as i can understand you need to toggle on active and inactive status:

This is the new plunker , have a look if it solves the issue:

https://stackblitz.com/edit/angular-fzxhkv?file=src/app/app.component.ts

I have removed event.srcElement.classList.add('phase-active') which was responsible for applying phase-active on every button