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

Question

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:

After clicking this is how it looks:

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.

score 0 · Answer 1 · answered Jun 14 '21 at 13:09

What is this, Angular right?

So the issue here is that all these icons are checking if the variable "status" is true or false. So right now, as you explain, its either that all icons are black or pink.

You should create a component for the icons and then loop thru them instead. Something like this, im not used to angular but something like this:

<IconComponent ng-repeat="Icon in IconArray" ng-click="toggleActive(Icon)">
    {{Icon}}
</IconComponent>

You can read more here: https://angular.io/tutorial/toh-pt2

score 0 · Accepted Answer · answered Jun 15 '21 at 06:28

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>

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

2 Answers2