angular - ngClass calls method Multiple times

Question

I have created a method and attached it to ngClass for adding two styles depending upon the condition.I am also passing the number as parameter to be used in the switch case.

component.html

<div class="circle" [ngClass]="setMyClassesCircle(1)">
<div class="circle" [ngClass]="setMyClassesCircle(2)">
<div class="circle" [ngClass]="setMyClassesCircle(3)">
<div class="circle" [ngClass]="setMyClassesCircle(4)">

component.ts

 setMyClassesCircle(val)
 {
   let circleClasses
   console.log('Inside method')

   switch(val)
   {

     case 1:
     {

    circleClasses = {
   'inprogress-circle': this.inProgress == val,
   'completed-circle': this.oneCompleted == true

   } 
     break;
   }
   case 2:
   {
    circleClasses = {
   'inprogress-circle': this.inProgress == val,
   'completed-circle': this.twoCompleted == true
   } 
     break;
   }
   case 3:
   {
    circleClasses = {
   'inprogress-circle': this.inProgress == val,
   'completed-circle': this.threeCompleted == true
   } 
     break;
   }
   case 4:
   {
    circleClasses = {
   'inprogress-circle': this.inProgress == val,
   'completed-circle': this.fourCompleted == true
   } 
     break;
   }

Through this way I am binding circleClasses to my template.

But the issue I am facing is setMyClassesCircle() method is called more than 10 times, while I am calling the method only four times.'Inside method' is printed more than 10 times in my console.

I could not figure out why the method is being called these many number of times.

标签： angulartypescript

Answer 1

I think it called many times because of angular change detection, the cleaner solution is to use ngclass in-line like this:

    <div class="circle" [ngClass]="{
        'inprogress-circle': inProgress == 1,
       'completed-circle': oneCompleted == true }" >

 <div class="circle" [ngClass]="{
        'inprogress-circle': inProgress == 2,
       'completed-circle': oneCompleted == true }" >

 <div class="circle" [ngClass]="{
        'inprogress-circle': inProgress == 3,
       'completed-circle': oneCompleted == true }" >

 <div class="circle" [ngClass]="{
        'inprogress-circle': inProgress == 4,
       'completed-circle': oneCompleted == true }" >