title: How to get the element html clicked in a ngFor to add a css class?
body: <p>I have this <em>ngFor</em>:</p>
  
  <pre><code>&lt;div *ngFor="let item of aCategory" (click)="fn_qualify($event)"&gt;
   {{item.name}} 
  &lt;/div&gt;
  </code></pre>
  
  <p>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 <em>document.querySelector</em>, but I want to be sure to do the best practice. How can I do it? Thank you.</p>
  
  <pre><code>fn_qualify(element){
   console.log(element.target);
   //console.log(document.querySelector(element.target)); //I am getting error
   //.addClass("categoria_seleccionada");
  }
  </code></pre>
  
  <p>I will explain my problem more thoroughly. I have an array called "aCategory".</p>
  
  <pre><code>this.aCategory=
  [
    {"name":"AUTORIZAR","class":"" },
    {"name":"CAMBIO","class":"" },
    {"name":"CAMBIO FACTURA","class":"" }
  .
  .
  .
  
  &lt;div *ngFor="let item of aCategory" (click)="fn_qualify(item)" [ngClass]="item.class"&gt;
  </code></pre>
  
  <p>has this structure, and may have "n" elements. If I click on an element of the ngFor, I could add it to this element:</p>
  
  <pre><code>fn_qualify(item){
    item.class="category_selected"
  }
  </code></pre>
  
  <p>and I could use <em>[ngClass]</em></p>
  
  <p>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 <em>for cycle</em> to set the "class" property of my array to "".</p>