Using Angular ngClass dynamically not working

Question

I am trying to dynamically set the class of my image in my template depending on which image is clicked. I have used this precisely as shown in the past and it worked then but is not working in this case.

Template code to choose image:

<div class="row">
      <div class="col">
        <a (click)="setImageColor('Black')">
            <img class="img-fluid" [ngClass]="blackImgClass" src="assets/img/product black.jpg">
        </a>
        <a (click)="setImageColor('Stainless Steel')">
            <img class="img-fluid m-l-pt5" [ngClass]="stainlessImgClass" src="assets/img/product stainless steel.jpg">
        </a>
        <a (click)="setImageColor('White')">
            <img class="img-fluid m-l-pt5" [ngClass]="whiteImgClass" src="assets/img/product white.jpg">
        </a>
      </div>
    </div>

Component method to set class:

private setImageColor(color:string) {
switch(color) {
  case 'Black':
    this.currentProductImage = this.product.images.black;
    this.blackImgClass = 'border: 4px solid #f96302 !important'
    this.whiteImgClass = '';
    this.stainlessImgClass = '';
  break;
  case 'Stainless Steel':
    this.currentProductImage = this.product.images.stainless;
    this.blackImgClass = ''
    this.whiteImgClass = '';
    this.stainlessImgClass = 'border: 4px solid #f96302 !important';
  break;
  case 'White':
    this.currentProductImage = this.product.images.white;
    this.blackImgClass = ''
    this.whiteImgClass = 'border: 4px solid #f96302 !important';
    this.stainlessImgClass = '';
    break;
  }

  this.currentImage = this.currentProductImage[0];
  this.selectionColor = color;
  // this.setCSSClass(color);
}

You're using ngClass, but Your code is to use ngStyle. It is an old link but can be useful scotch.io/tutorials/angular-2-classes-with-ngclass-and-ngstyle — Eliseo
– Eliseo, Commented May 6, 2018 at 17:32

Fateh Mohamed · Accepted Answer · 2018-05-06 15:49:20Z

you can't use it that way instead put your css inside style.css and try this

 <div class="col">
    <a (click)="setImageColor('Black')">
        <img class="img-fluid" [ngClass]="{'blackImgClass' : isBlack}" src="assets/img/product black.jpg">
    </a>
    <a (click)="setImageColor('Stainless Steel')">
        <img class="img-fluid m-l-pt5" [ngClass]="{'stainlessImgClass' : isSteel}" src="assets/img/product stainless steel.jpg">
    </a>
    <a (click)="setImageColor('White')">
        <img class="img-fluid m-l-pt5" [ngClass]="{'whiteImgClass' : isWhite}" src="assets/img/product white.jpg">
    </a>
  </div>



  switch(color) {
  case 'Black':
   this.currentProductImage = this.product.images.black;
   this.isBlack= true
   this.isSteel= false;
   this.isWhite= false;
   break;
 case 'Stainless Steel':
   this.currentProductImage = this.product.images.stainless;
   this.isBlack= false
   this.isSteel= true;
   this.isWhite= false;
   break;
 case 'White':
   this.currentProductImage = this.product.images.white;
   this.isBlack= false
   this.isSteel= false;
   this.isWhite= true;
   break;
 }

and your style.css

.stainlessImgClass {
  border: 4px solid #f96302 !important;
}
.blackImgClass{
  border: 4px solid #f96302 !important;
}
.whiteImgClass{
  border: 4px solid #f96302 !important;
}

Collectives™ on Stack Overflow

Using Angular ngClass dynamically not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related