Toggle class between 3 elements using Angular6

Question

I have three div's

<div class = "form">
 <div class = "group"></div>
 <div class = "group"></div>
 <div class = "group"></div>
</div>

Now, i want to add class 'active' with 'group' class on click. By default it should be present on the first 'group' class div. 'active' class can only be present at one div at a time

.ts file:

selectStatus: boolean = false;

selectGroup() {
  this.selectStatus = !this.selectStatus;
}

.html file:

<div class = "form">
  <div class = "group" (click) = "selectGroup()" [ngClass]="{selectStatus ? 'active' : 'not-active'}"></div>
  <div class = "group" (click) = "selectGroup()" [ngClass]="{selectStatus ? 'active' : 'not-active'}"></div>
  <div class = "group" (click) = "selectGroup()" [ngClass]="{selectStatus ? 'active' : 'not-active'}"></div>
</div>

But it's adding the active class on all the div s

<div class = "form">
  <div class = "group" (click) = "selectGroup()" [ngClass]="{selectStatus ? 'active' : 'not-active'}"></div>
  <div class = "group" (click) = "selectGroup()" [ngClass]="{selectStatus ? 'active' : 'not-active'}"></div>
  <div class = "group" (click) = "selectGroup()" [ngClass]="{selectStatus ? 'active' : 'not-active'}"></div>
</div>

selectStatus: boolean = false;

selectGroup() {
  this.selectStatus = !this.selectStatus;
}

It coming on all div's

Answer 1

.ts file:

activeDivIndex: number = 0;

selectGroup(activeDivIndex: number) {
  this.activeDivIndex= activeDivIndex;
}

View:

<div class = "form">
  <div class = "group" (click) = "selectGroup(0)" [ngClass]="activeDivIndex == 0? 'active' : 'not-active'"></div>
  <div class = "group" (click) = "selectGroup(1)" [ngClass]="activeDivIndex == 1? 'active' : 'not-active'"></div>
  <div class = "group" (click) = "selectGroup(2)" [ngClass]="activeDivIndex == 2? 'active' : 'not-active'"></div>
</div>

Better yet, you could use an ngFor and check if the current index is the same as activeDivIndex

.ts file:

groupList: Array<Object> = [{foo: "Foo 1", bar: "Bar 1"}, {foo: "Foo 2", bar: "Bar 2"}, {foo: "Foo 3", bar: "Bar 3"}];
activeDivIndex: number = 0;


selectGroup(activeDivIndex: number) {
  this.activeDivIndex= activeDivIndex;
}

View:

<div class = "form">
  <div *ngFor="let groupItem of groupList, let i = index" class="group" (click)="selectGroup(i)" [ngClass]="activeDivIndex === i ? 'active' : 'not-active'">Foo: {{groupItem.foo}}, Bar: {{groupItem.bar}}</div>
</div>

or if you don't need the not-active class:

<div class = "form">
  <div *ngFor="let groupItem of groupList, let i = index" class="group" (click)="selectGroup(i)" [ngClass]="{'active': activeDivIndex === i}">Foo: {{groupItem.foo}}, Bar: {{groupItem.bar}}</div>
</div>

Answer 2

You can update your code as follows:

.html

<div class = "form">
  <div class = "group" (click) = "selectGroup(0)" [ngClass]="{'active': selectStatus[0]}"></div>
  <div class = "group" (click) = "selectGroup(1)" [ngClass]="{'active': selectStatus[1]}"></div>
  <div class = "group" (click) = "selectGroup(2)" [ngClass]="{'active': selectStatus[2]}"></div>
</div>

.ts

selectStatus = [true, false, false];

selectGroup(id) {
    this.selectStatus = this.selectStatus.map((item, index) => {
        if (index === id) {
             return true;
        } 
        return false;            
    })
}

Working sample is given here: Stackblitz