New to Angular so I cant seem to get it to work but I have a list of element which has the option that if somebody click on the element it show toggls between show/hide (toggle a class). My code works but it will toggle ALL elements at once instead of the one that has been clicked on. Looked for some examples online but found almost the same stuff.
// class
public toggleClass = false;
public onToggleDiv(): void {
this.toggleClass = !this.toggleClass;
}
// component
<div
class="group"
(click)="onToggleDiv()"
[ngClass]="{'active' : toggleClass}"
>
Some content
</div>
<div
class="group"
(click)="onToggleDiv()"
[ngClass]="{'active' : toggleClass}"
>
Some content
</div>
... and more divs
Solution for now (only 1 box can be open sadly)
// class
public toggleRow: boolean | number = false;
public onToggleDiv(): void {
this.toggleRow = this.toggleRow === id ? false : id;
}
// component
<div
class="group"
(click)="onToggleDiv(1)"
[class.active]="toggleClass === 1"
>
Some content
</div>
<div
class="group"
(click)="onToggleDiv(2)"
[class.active]="toggleClass === 2"
>
Some content
</div>
... and more divs
You should work with an array of numbers to define which item should have the class or not. I assumed you were in a loop or have any kind of identifier for your div. Here is a example on Stackblitz about how you can do something similar and here is the code:
ts:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular';
items = Array.from(Array(10).keys());
toggledItems: number[] = [];
toggleItem = (i: number) => {
if (this.toggledItems.includes(i)) {
this.toggledItems = this.toggledItems.filter((x) => x !== i);
} else {
this.toggledItems.push(i);
}
};
}
html:
<div *ngFor="let item of items; let i = index">
<div [ngClass]="{ hidden: toggledItems.includes(i) }">
Element <button type="button" (click)="toggleItem(i)">Hide me</button>
</div>
</div>>
</div>
css:
.hidden {
opacity: 0.3
}
In your component
// class
public toggleClass = false;
public currentActive = 0;
public onToggleDiv(id): void {
this.toggleClass = !this.toggleClass;
currentActive = this.toggleClass ? id : 0;
}
In your template:
// component
<div class="group"
(click)="onToggleDiv(1)"
[class.active]="currentActive == 1">
Some content
</div>
<div class="group"
(click)="onToggleDiv(2)"
[class.active]="currentActive == 2">
Some content
</div>
References: