*ngSwitchCase is not rendering the element as per condition

Question

I have two components that must be rendered according to an expression:

HTML:

<div *ngFor="let avaliacao of avaliacoes" [ngSwitch]="escolha_layout_avaliacao">
      <app-avaliacao-produto-modelo-emoji *ngSwitchCase="emoji" [avaliacao]="avaliacao"></app-avaliacao-produto-modelo-emoji>
      <app-avaliacao-produto *ngSwitchDefault [avaliacao]="avaliacao"></app-avaliacao-produto>
</div>

TS:

escolha_layout_avaliacao: string

ngOnInit() {
  this.buscaDadosLayout()
}

buscaDadosLayout(){
  this.escolha_layout_avaliacao = "emoji"
}

But the ngSwitch is rendering the default., ignoring the condition that has emoji value.

I tested in html through interpolation: {{escolha_layout_avaliacao}} and the printed value is "emoji", but still it is not rendered that component, but the one defined in *ngSwitchDefault.

Answer 1

To solve the problem replace:

*ngSwitchCase="emoji"

for

*ngSwitchCase="'emoji'"

In this case, the angular was trying to compare the variable "choose_layout_rating" with the variable "emoji" that does not exist.

By adding simple quotes ("'emoji'") you will compare the variable "choose_layout_rating" with the STRING "emoji".