Add active class to selected elements angular (possibly multiple elements active)

Question

I have group of buttons. When I click in one of this buttons, I want to have class active on this button. When I click next button, I also want to have class active on this button (and I dont't want to remove active class from previous button). So I want to have multiply active buttons (if selected), and when I click on selected button, I want to remove active class (toggle). How can I do this?

If I do something like below, I have only one button selected. How can I choose more than one button?

<div class="btn-group">
  <div class="btn btn-outline-secondary" *ngFor="let test of tests" (click)="select(test)" [ngClass]="{active: isActive(test)}"
  >
    <input type="radio" name="" autocomplete="off" value="">
     {{test}}
  </div>
</div>

ts. file

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

@Component({
  selector: 'test',
  templateUrl: './test.html',
  styleUrls: ['.test.scss'],
})

export class Test {

  tests: any[];


  constructor() {
    this.tests = ['test1', 'test2', 'test3']

  }

  ngOnInit() {

  }

  select(item) {
    this.selected = item;
  };
  isActive(item) {
      return this.selected === item;
  };
}

sridhar.. sridhar.. · Accepted Answer · 2018-08-28T16:27:12

Keep a property on each test object , indicating whether selected or not.

@Component({
  selector: 'test',
  templateUrl: './test.html',
  styleUrls: ['.test.scss'],
})

export class Test {

  tests: any[];


  constructor() {
    this.tests = ['test1', 'test2', 'test3']

  }

  ngOnInit() {

  }

  select(item) {
    item.selected = !item.selected;
  };
  isActive(item) {
      return item.selected;
  };
}

Add active class to selected elements angular (possibly multiple elements active)

1 Answers