correct ngSwitchCase doesn't make paragraph appear

Question

I have a button that assigns one of two strings from an array to a variable.

then, using [ngSwitch] I want to display only one paragraph.

None of the paragraphs seem to appear, I'm only getting the random alert on every button click.

Oh, and the component is called on the main component.

---

animations.component.html

<button (click)="chooseAnimation()">button</button>

<div [ngSwitch]="animation">
    <div *ngSwitchCase="splittingImage">
       <p> splitting </p>  
    </div>

    <div *ngSwitchCase="zoomAndBlur">
        <p> zooming </p> 
   </div>
</div>

animations.component.ts

---

export class AnimationsComponent implements OnInit {

animation;
animations = ['zoomAndBlur','splittingImage'];

ngOnInit(){
 }

chooseAnimation(){
    this.animation = this.animations[Math.floor(Math.random() * this.animations.length)];
    alert(this.animation); //this works fine and alerts zoomAndBlur or splittingImage. 
}

constructor() {

}

Answer 1

Try wrapping *switchCase value into single quotes.

<div *ngSwitchCase="'splittingImage'"> and <div *ngSwitchCase="'zoomAndBlur'">