add ngClass to all the divs clicked

Question

I'm trying to add 'active' class to all the divs (options in this case) that are clicked and remove the class on a second click.

The options count can vary as it's generated by ngFor.

HTML

<div [ngClass]="{'active': selectedOptions == i}" *ngFor="let opt of options; let i=index"
 (click)="answerSelectedMultiple(i)">

TS

answerSelectedMultiple(index){
    if(this.selectedOptions.indexOf(index) == -1){
        this.selectedOptions.push(index);
    }else{
        this.selectedOptions.splice(this.selectedOptions.indexOf(index), 1);
    }
}

Other than applying a class/styling, do you need the selecttedOptions array for any other purpose/logic? If not, this could be easily capsulated in a directive — Jota.Toledo, Jan 12 '18 at 16:57
Can only one div be active at a time, or can multiple divs be active? — Explosion Pills, Jan 12 '18 at 16:57

Jota.Toledo · Accepted Answer · 2018-01-12T17:42:19.987

You could capsulate this into a directive:

@Directive({
  selector: '[activeOnClick]',
  // Optionally replace this both with properties marked 
  // with @HostBinding and @HostListener decorators
  host: {
    '[class.active]': 'clicked',
    '(click)': '_toggle()'
  }
})
export class ActiveOnClickDirective {
   @Input('activeOnClick')
   clicked = false;

   _toggle(){
      this.clicked= !this.clicked;
   }
}

After declaring the directive in a module, it could be used as follows:

<div activeOnClick *ngFor="let opt of options; let i=index">

In the case that you want to bind the flag value of the directive in the template:

<div [activeOnClick]="true" *ngFor="let opt of options; let i=index">

You could even expand this to dynamically apply different classes on the host element:

@Directive({
  selector: '[classesOnClick]'
})
export class ClassesOnClickDirective { 
   @Input('classesOnClick')
   clicked = false;

   @Input()
   set class(value: string[]| string){
      let classes = Array.isArray(value) ? value : value.split(' ');
      classes = classes.filter(class => !!class);
      this._classes = classes;
   }
   private _classes: string [] = ['active'];

   constructor(private element: ElementRef, private renderer: Renderer2){}

   @HostListener('click')
   _toggle(){
      this.clicked = !this.clicked;
   }

   private _update(){
     this._classes.forEach(class => {
       if(this.clicked){
          this.renderer.addClass(this.element.nativeElement, class);
       }else{
          this.renderer.removeClass(this.element.nativeElement, class);
       } 
     });
   }
}

Then use as follows:

<div [classesOnClick]="true" [classesOnClickClass]="['c1','c2']" *ngFor="let opt of options; let i=index">

<div [classesOnClick]="true" classesOnClickClass="c1 c2" *ngFor="let opt of options; let i=index">

Can I use this to add the active class if a key in options gives me an array of already selected answers? — Akash Agrawal, Jan 12 '18 at 18:01
Sure, as already shown in one of the examples, you can bind the starting value of the `clicked` flag to a value in the template — Jota.Toledo, Jan 12 '18 at 18:04
if you provide me a small plnkr/stackblitz repo I can help you out — Jota.Toledo, Jan 13 '18 at 12:51

score 0 · Answer 2 · answered Jan 12 '18 at 17:03

0

You can record active status on opt:

<div *ngFor="let opt of options" [ngClass]="{active: opt.active}"
  (click)="opt.active = !opt.active">

answered Jan 12 '18 at 17:03

Explosion Pills

188,624
52
326
405

add ngClass to all the divs clicked

2 Answers2