Search code examples
htmlsassionic3angular5ng-class

Add [ngClass] only on the element that is clicked on

I have several columns that I need to differentiate when one is clicked to only have the class activate on that one and if a different one is activated to de-activate the previous one and activate that one.

HTML

<ion-col (click)="clickEvent()"><img [ngClass]="{'ico_device_mobile' : status}" src="assets/icon/ico_device_mobile.svg" height="28"><span [ngClass]="{'colorSecondary' : status}">{{ liveboxDeviceEditCms.literalMobile }}</span></ion-col>
<ion-col (click)="clickEvent()"><img [ngClass]="{'ico_device_tablet' : status}" src="assets/icon/ico_device_tablet.svg" height="30"><span [ngClass]="{'colorSecondary' : status}">{{ liveboxDeviceEditCms.literalTablet }}</span></ion-col>
<ion-col (click)="clickEvent()"><img [ngClass]="{'ico_device_computer' : status}" src="assets/icon/ico_device_computer.svg" height="27"><span [ngClass]="{'colorSecondary' : status}">{{ liveboxDeviceEditCms.literalComputer }}</span></ion-col>
<ion-col (click)="clickEvent()"><img [ngClass]="{'ico_device_tv' : status}" src="assets/icon/ico_device_tv.svg" height="28"><span [ngClass]="{'colorSecondary' : status}">{{ liveboxDeviceEditCms.literalTv }}</span></ion-col>
<ion-col (click)="clickEvent()"><img [ngClass]="{'ico_device_game' : status}" src="assets/icon/ico_device_game.svg" height="20"><span [ngClass]="{'colorSecondary' : status}">{{ liveboxDeviceEditCms.literalGame }}</span></ion-col>
<ion-col (click)="clickEvent()"><img [ngClass]="{'ico_device_other' : status}" src="assets/icon/ico_device_other.svg" height="23"><span [ngClass]="{'colorSecondary' : status}">{{ liveboxDeviceEditCms.literalOther }}</span></ion-col>

SCSS This is an example of one class. Each class has the same thing just different class names.

.ico_device_mobile {
        mask: url(/assets/icon/ico_device_mobile.svg);
        mask-repeat: no-repeat;
        filter: invert(26%) sepia(46%) saturate(3365%) hue-rotate(303deg) brightness(90%) contrast(104%);
    }

TS

clickEvent(){

this.status = !this.status;

}

Before clicking this is how it looks:

enter image description here

After clicking this is how it looks:

enter image description here

So if I click only on one it should turn purple and not all of them and if one is purple but I click on another icon which isnt "active" it should turn purple and the previous active one back to black.

Solution

  • I finally achieved doing this by following the answer in Apply ng-class only on the element that was clicked on and adapting it to angular5.

    CONTROLLER

    isActive = [false, false, false, false, false, false];

clickEvent(index: number) {
  if (!this.isActive[index]) {
    this.isActive = new Array(false, false, false, false, false, false);
    this.isActive[index] = true;
  }
}

    HTML

    <ion-col (click)="clickEvent(0)"><img [ngClass]="{'test' : isActive[0]}" src="assets/icon/ico_device_mobile.svg" height="28"><span [ngClass]="{'colorSecondary' : isActive[0]}">{{ liveboxDeviceEditCms.literalMobile }}</span></ion-col>
<ion-col (click)="clickEvent(1)"><img [ngClass]="{'test' : isActive[1]}" src="assets/icon/ico_device_tablet.svg" height="30"><span [ngClass]="{'colorSecondary' : isActive[1]}">{{ liveboxDeviceEditCms.literalTablet }}</span></ion-col>