angular - How can I highlight an element when its clicked, but then also unhighlight other elements? -

i have component contains several children components. this:

<div class="maincomponent">     <child-component-1 *ngfor="let childa of childrena"></child-component-1>     <child-component-2 *ngfor="let childb of childrenb"> </child-component-2>     <child-component-3 *ngfor="let childc of childrenc"></child-component-3> </div> 

if user clicks child-component-1, want apply special styling it's highlighted. simple enough, add (mousedown)="foo()" (and check if user holding 'ctrl' can highlight multiple). i'm not sure how though unhighlight other child components highlighted.

the thing can think of have child-component-x's emit event when highlighted. in maincomponent can iterate through children components , set each unhighlight. involve iterating through components every time though, , there lot.

is there better way handle this, or idea correct way?

this should want:

<div class="maincomponent">   <child-component-1      *ngfor="let childa of childrena"     [class.highlight]="ishighlighted(childa)"     (click)="togglehighlight($event, childa)">   </child-component-1>   <child-component-2      *ngfor="let childb of childrenb"> </child-component-2     [class.highlight]="ishighlighted(childb)"     (click)="togglehighlight($event, childb)">   </child-component2>   <child-component-3      *ngfor="let childc of childrenc"     [class.highlight]="ishighlighted(childc)"     (click)="togglehighlight($event, childa)">   </child-component-3> </div> 

highlighteditems = [];  ishighlighted(item) {   return this.highlighteditems.indexof(item) >= 0; }  togglehighlight($event, item) {   let idx = this.highlighteditems.indexof(item);   let iscontrol = e.keycode != 17;   if(iscontrol) {     if(idx < 0) {       this.highlighteditems.push(item);       } else {       this.highlighteditems = this.highlighteditems.slice(idx, 1);     }   } else {     this.highlighteditems.length = 0;     if(idx < 0) {       this.highlighteditems.push(item);       }   }  }