Why ngClass is failing in a case where the evaluated property is repeated in the following case?

Issue

I made a reusable input in the form of a component, I used ngClass to set different backgrounds. and it works well in 4 out of 5 scenarios. There's a case where the evaluated variable named "estados" is equal to "pagado", but it won't apply its corresponding class. I can't figure out why.

HTML:

<ion-item  lines="none" class="chipEstados"
[ngClass]="{colorEvaluacion: estado === 'enEvaluacion', colorAprobado: estado === 'aprobado', colorPagado: estado === 'pagado', colorPagado: estado === 'aprobadoParcial', colorRechazado: estado === 'rechazado'}">
  <ion-icon name="time" class="iconEvaluacion"></ion-icon> //modificar el name tambien
  <ion-label class="chipTexto">{{texto}}</ion-label>
</ion-item>

SASS:

.iconEvaluacion {
    color: #F39837;
}

.colorEvaluacion {
    --background: #FDF6E9;
}

.iconAprobado {
    color: #329CDA;
}

.colorAprobado {
    --background: #ECF5FF;
}

.iconPagado {
    color: #78A856;
}

.colorPagado {
    --background: #E9F8E6;
}

.iconRechazado {
    color: #EC3F5A;
}

.colorRechazado {
    --background: #FFEDED;
}

TS:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-chip-estados',
  templateUrl: './chip-estados.component.html',
  styleUrls: ['./chip-estados.component.scss'],
})
export class ChipEstadosComponent implements OnInit {

  @Input() estado: string;
  @Input() texto: string;

  constructor() { }

  ngOnInit() {}

}

And this is the parent's HTML where I'm calling it and passing the via data-binding the different "estados" properties from parent to child.

  <app-chip-estados texto="En Evaluación" estado="enEvaluacion"></app-chip-estados>
  <app-chip-estados texto="Aprobado" estado="aprobado"></app-chip-estados>
  <app-chip-estados texto="Pagado" estado="pagado"></app-chip-estados>
  <app-chip-estados texto="Aprobado Parcial" estado="aprobadoParcial"></app-chip-estados>
  <app-chip-estados texto="Rechazado" estado="rechazado"></app-chip-estados>

Solution

I made a reusable input in the form of a component, I used ngClass to set different backgrounds. and it works well in 4 out of 5 scenarios. There's a case where the evaluated variable named "estados" is equal to "pagado", but it won't apply its corresponding class. I can't figure out why.

The reason is below value within [ngClass] binding:

colorPagado: estado === 'pagado', colorPagado: estado === 'aprobadoParcial'

When "estados" is equal to "pagado", colorPagado: estado === 'pagado' condition results in the class being added, but colorPagado: estado === 'aprobadoParcial' condition evaluates to false and thereby results in removing the same class colorPagado.

If you want to apply the same class when "estados" is equal to "pagado" or "aprobadoParcial", then you can modify the expression as:

colorPagado: (estado === 'pagado' || estado === 'aprobadoParcial')

Answered By - Siddhant