Angular dynamic variable for ngClass

Question

I'm a novice for angular! I try to change the color when the button clicked.

The loop binding works fine including dynamic variable displaying in an outer element such as {{'profile3.q2_' + (i+1) | translate}}, but when I try to [ngClass] variable binding doesn't work.

How should I apply on " [ngClass]="'q2_' + (i+1) =='1'? ~~~ " part?

Thank you.

*.html file

In case of NOT applying dynamic variable:

<ion-row class="ion-margin-top ion-margin-bottom">
   <ion-col size="4"> 
     <ion-button expand="block" fill="outline" 
       [ngClass]="q2_1 =='1'?'btn-background' : 'btn-default'" (click)="onClicked(1)">
          <span class="contentText">{{'profile3.q2_1' | translate}}</span> 
     </ion-button>  
   </ion-col> 
   <ion-col size="4"> 
     <ion-button expand="block" fill="outline" 
       [ngClass]="q2_2 =='1'?'btn-background' : 'btn-default'" (click)="onClicked(2)">
          <span class="contentText">{{'profile3.q2_2'| translate}}</span> 
     </ion-button>  
   </ion-col>
 </ion-row>
 
 ~~

Desired direction (applying dynamic variable and condition):

<ion-row class="ion-margin-top ion-margin-bottom">
   <ion-col size="4" *ngFor='let in of counter(7) ;let i = index'> 
     <ion-button expand="block" fill="outline" 
       [ngClass]="'q2_' + (i+1) =='1'?'btn-background' : 'btn-default'" (click)="onClicked(i+1)">
          <span class="contentText">{{'profile3.q2_' + (i+1) | translate}}</span> 
     </ion-button>  
   </ion-col> 
 </ion-row>

*.ts file :

public q2_1 : string = "0";  
public q2_2 : string = "0"; 
~~ 

counter(i: number) {
  return new Array(i);
} 

onClicked(opt){
  if (opt ==1) this.q2_1=this.q2_1=='0'? '1': "0";  
  if (opt ==2) this.q2_2=this.q2_2=='0'? '1': "0"; 
  ~~~~ 
} 
...  

------------------------

theKunz · Accepted Answer · 2021-06-28 01:10:13Z

So unfortunately you're out of luck here if you want to reference the variables dynamically directly like that. But there are easy workarounds. Assuming you want to maintain easily referenceable individual variables, you can make some small changes.

.html

<ion-row class="ion-margin-top ion-margin-bottom">
   <ion-col size="4" *ngFor='let in of counter(7) ;let i = index'> 
     <ion-button expand="block" fill="outline" 
       [ngClass]="q2[i].val === '1' ? 'btn-background' : 'btn-default'" (click)="onClicked(i+1)">
          <span class="contentText">{{'profile3.q2_' + (i+1) | translate}}</span> 
     </ion-button>  
   </ion-col> 
 </ion-row>

.ts

public q2_1 = { val: '0' };
public q2_2 = { val: '0' };

public q2 = [this.q2_1, this.q2_2];

counter(i: number) {
  return new Array(i);
}

onClicked(opt) {
  if (opt == 1) this.q2_1.val = this.q2_1.val == '0' ? '1' : '0';
  if (opt == 2) this.q2_2.val = this.q2_2.val == '0' ? '1' : '0';
}

The reason we're turning q2_1 and q2_2 into objects instead of plain strings is to turn them into object references. That way, if you choose to update the variable directly it'll be reflected in the reference in q2 array. If we were to copy the plain strings, new references would be made and updating the variable would not update the array.

If you're OK with dispensing with the individual variables, you can simplify the .ts file to

public q2 = ['0', '0'];

counter(i: number) {
  return new Array(i);
}

onClicked(opt) {
  this.q2[opt] = this.q2[opt] == '0' ? '1' : '0';
}

and change the click handler from onClicked(i+1) to onClicked(i)

Collectives™ on Stack Overflow

Angular dynamic variable for ngClass

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related