CODEWITHSUNDEEP
angular
user5115790
user5115790

Reputation: 61

How to get the element html clicked in a ngFor to add a css class?

I have this ngFor:

<div *ngFor="let item of aCategory" (click)="fn_qualify($event)">
 {{item.name}} 
</div>

and I would like that when you click, get the current element, and once you have obtained it, you can add a class ("categoria_seleccionada"). I am very used to using document.querySelector, but I want to be sure to do the best practice. How can I do it? Thank you.

fn_qualify(element){
 console.log(element.target);
 //console.log(document.querySelector(element.target)); //I am getting error
 //.addClass("categoria_seleccionada");
}

I will explain my problem more thoroughly. I have an array called "aCategory".

this.aCategory=
[
  {"name":"AUTORIZAR","class":"" },
  {"name":"CAMBIO","class":"" },
  {"name":"CAMBIO FACTURA","class":"" }
.
.
.

<div *ngFor="let item of aCategory" (click)="fn_qualify(item)" [ngClass]="item.class">

has this structure, and may have "n" elements. If I click on an element of the ngFor, I could add it to this element:

fn_qualify(item){
  item.class="category_selected"
}

and I could use [ngClass]

but my goal is that when you click on an element, only this one has that class, and the rest does not. so I want to avoid doing a for cycle to set the "class" property of my array to "".

Upvotes: 1

Views: 3912

Answers (5)

Ivailo Dimitrov
Ivailo Dimitrov

Reputation: 81

<div *ngFor="let item of aCategory; let i = index" (click)="fn_qualify(i)" [ngClass]="{'selected': currentIndex === i}">
 {{item.name}} 
</div>

In your ts:

public currentIndex:number;

public fn_quality(index:number) {
this.currentIndex = index;
}

Upvotes: 0

Amit Chigadani
Amit Chigadani

Reputation: 29795

I guess you need something like this. Just pass an index parameter to the function. Add and remove class accordingly.

fn_qualify(index) {
    this.aCategory.forEach((item, i) => {
      if (i == index) {
        this.aCategory[i].class = 'categoria_seleccionada';
      }
      else {
         this.aCategory[i].class = '';
      }
    })
}

html

<div *ngFor="let item of aCategory; let i = index;" (click)="fn_qualify(i)" [ngClass]="item.class">
 {{item.name}} 
</div>

DEMO

Upvotes: 0

rhavelka
rhavelka

Reputation: 2396

Set this as your html

<div *ngFor="let item of aCategory; i = index" (click)="fn_qualify(i)" [ngClass]="item.class">
 {{item.name}} 
</div>

Set this as your typescript

previouslyActive = 0;
fn_qualify(index){
  this.aCategory[this.previouslyActive].class = '';
  this.aCategory[index].class = "categoria_seleccionada";
  this.previouslyActive = index;
}

now you have your class updating on the element, whatever was previously active is no longer active, and you don't have an expensive for loop

Upvotes: 0

Suparna Gharpure
Suparna Gharpure

Reputation: 409

// this will set the class categoria_seleccionada when this item's 'selected' attribute is set to true
<div *ngFor="let item of aCategory" (click)="fn_qualify(item)" [class.categoria_seleccionada]="item.selected">
 {{item.name}} 
</div>

In the component

fn_qualify(item: any) : void {
   // first deselect the currently selected item, if any
   for (let i = 0 ; i < this.aCategory.length; i++) {
      this.aCategory[i].selected = false;
   }

   // find the index of the current clicked item and set the selected value to true
   let item = this.aCategory.filter(i => i._id === item._id)[0];
   let index = this.aCategory.indexOf(item);
   this.aCategory[index].selected = true;
}

Upvotes: 0

NoHoney_k1ll
NoHoney_k1ll

Reputation: 251

Just like this. I'm passing the item and the index.

<div *ngFor="let item of aCategory; let i = index">
 <div (click)="fn_quality(item, i)">{{item.name}} 
</div>

Second option

Add a variable to your Ts file. Like active:any = '' And then just simply

<div *ngFor="let item of aCategory; let i = index">
     <div (click)="active = i" [ngClass]="active === i ? 'myCssClass' : '' " >{{item.name}} 
    </div>

Upvotes: 3

Related Questions