CODEWITHSUNDEEP
javascriptangular
Snorlax
Snorlax

Reputation: 4735

Angular2: How do I toggle classes on similar elements

I want to be able to toggle the color on the I click on. Right now, when I click on one , it toggles them all. I want to individually toggle each one.

HTML:

<div class="crit-desc crit-item-flags">
    <i class="fal fa-flag" (click)="flagActive()" [ngClass]="flagStatus ? 'flagActive' : 'flagNotActive'"></i>

    <i class="fal fa-bookmark" (click)="flagActive()" [ngClass]="flagStatus ? 'flagActive' : 'flagNotActive'"></i>

    <i class="fal fa-alarm-clock" (click)="flagActive()" [ngClass]="flagStatus ? 'flagActive' : 'flagNotActive'"></i>


</div>

Js:

import { Component } from '@angular/core';


@Component({
  selector: 'app-aside',
  templateUrl: './app-aside.component.html'
})
export class AppAsideComponent {
  closeResult: string;
  flagStatus: boolean;
  constructor(private modalService: NgbModal) { }



  flagActive(){
    this.flagStatus = !this.flagStatus;

    }



}

Upvotes: 1

Views: 86

Answers (3)

Chellappan வ
Chellappan வ

Reputation: 27293

Use template variable name different to all icon 

<div class="crit-desc crit-item-flags">
    <i class="fal fa-flag" appToggle #btnone="appToggle" [ngClass]="btnone.flagStatus ? 'flagActive' : 'flagNotActive'"></i>
    {{btnone.flagStatus}} 
    <i class="fal fa-bookmark" 
    appToggle #btntwo="appToggle" 
    [ngClass]="btntwo.flagStatus ? 'flagActive' : 'flagNotActive'"></i>
{{btntwo.flagStatus}}
    <i class="fal fa-alarm-clock" appToggle #btnthree="appToggle"  [ngClass]="btnthree.flagStatus ? 'flagActive' : 'flagNotActive'"></i>
{{btnthree.flagStatus}}

</div>

Create Directive and bind value 

import {Directive,HostListener} from '@angular/core';

@Directive({
  selector: '[appToggle]',
  exportAs:'my-directive'
})
export class MyDirective {
flagStatus;
@HostListener('click', ['event']) flagActive() {
this.flagStatus=!this.flagStatus;
}

Example Here:https://stackblitz.com/edit/angular-yp7eqc

Upvotes: 0

Ashish Ranjan
Ashish Ranjan

Reputation: 12950

The first thing I would like to say is, you are using a single variable to control class of all your elements and that variable will change on click of any of them so yeah.. that will not work, somehow they need a different scope of their own.

I won't be able to say what is the optimized solution for your question, but this is what has currently struck me.

I have created a directive and added in all of the elements and then controlling the class through the directive itself.

<!-- buttons for simplicity -->
<button appToggleColor class="yellow">Button3</button>
<button appToggleColor class="yellow">Button2</button>
<button appToggleColor class="yellow">Button1</button>

constructor(private renderer: Renderer2) { }
private flag = true

@HostListener('click', ['$event']) onClick($event: Event) {
    this.flag = !this.flag;
    if (this.flag) {
       this.renderer.removeClass($event.target, 'green');
       this.renderer.addClass($event.target, 'yellow')    
    }
    else {
      this.renderer.removeClass($event.target, 'yellow');
       this.renderer.addClass($event.target, 'green');
    }
  }

I am using Rendere2 to add/remove classes.. https://stackblitz.com/edit/angular-zdbsbp?file=src%2Fapp%2Ftoggle-color.directive.ts

Upvotes: 2

Lia
Lia

Reputation: 11982

a simple way is :

<div class="crit-desc crit-item-flags">
    <i class="fal fa-flag" (click)="flagActive('flag')" [ngClass]="items['flag'].flagStatus ? 'flagActive' : 'flagNotActive'">test1</i>

    <i class="fal fa-bookmark" (click)="flagActive('bookmark')" [ngClass]="items['bookmark'].flagStatus ? 'flagActive' : 'flagNotActive'">test2</i>

    <i class="fal fa-alarm-clock" (click)="flagActive('alarmClock')" [ngClass]="items['alarmClock'].flagStatus ? 'flagActive' : 'flagNotActive'">test3</i>

</div>

ts code:

items = {
            "flag" : {flagStatus:false}, 
            "bookmark" : {flagStatus:false},
            "alarmClock" : {flagStatus:false}
   } ;

  constructor() { }

  flagActive(item){
    console.log(this.items[item]) ;
    this.items[item].flagStatus = !this.items[item].flagStatus
  }

Demo

Upvotes: 1

Related Questions