CODEWITHSUNDEEP
javascriptangulartypescript
user759235
user759235

Reputation: 2207

Adding a custom class to the element on which is clicked

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

Upvotes: 1

Views: 83

Answers (2)

Danilo K&#246;rber
Danilo K&#246;rber

Reputation: 910

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:

Upvotes: 0

Quentin Grisel
Quentin Grisel

Reputation: 4987

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
}

Upvotes: 1

Related Questions