Directivas estructurales *ngSwitchCase, *ngSwitchDefault y ngSwitch

Para implementar la sintaxis de un switch similar a Javascript, Angular requiere dos directivas estructurales: *ngSwitchCase, *ngSwitchDefault y una directiva de atributo que deben trabajar en conjunto.

Veamos con un ejemplo como actúan en conjunto estas directivas.

Problema

Implementar una aplicación que permita cargar dos valores numéticos y mediante un control select indicar si queremos sumar, restar, multiplicar o dividir. Actualizar el resultado inmediatamente se seleccione la operación del control select.

Crearemos primero el proyecto
```
ng new proyecto045
```

Como utilizaremos la directiva ngModel debemos importar la clase 'FormsModule' en el archivo 'app.module.ts':

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

En la clase principal 'AppComponent' definimos las variables que luego en la vista se asocian a los distintos controles de formulario:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  valor1!: number;
  valor2!: number;
  operacion: string = "ninguna";
  resultado!: number;
}

En la vista definimos los tres controles de formulario y mediante estas nuevas directivas reaccionamos para mostrar alguno de los cinco valores que puede tomar el control 'select':

<p>Ingrese primer valor
  <input [(ngModel)]="valor1" type="number">
</p>
<p>Ingrese segundo valor
  <input [(ngModel)]="valor2" type="number">
</p>
<p>
  <select [(ngModel)]="operacion">
    <option value="ninguna">Elija una opción</option>
    <option value="sumar">Sumar</option>
    <option value="restar">Restar</option>
    <option value="multiplicar">multiplicar</option>
    <option value="dividir">Dividir</option>
  </select>
</p>
<p>Resultado:
  <span [ngSwitch]="operacion">
    <span *ngSwitchCase="'sumar'">{{valor1+valor2}}</span>
    <span *ngSwitchCase="'restar'">{{valor1-valor2}}</span>
    <span *ngSwitchCase="'multiplicar'">{{valor1*valor2}}</span>
    <span *ngSwitchCase="'dividir'">{{valor1/valor2}}</span>
    <span *ngSwitchDefault>(No eligió operación)</span>
  </span>
</p>

Disponemos una etiqueta 'span' y le asociamos una directiva de atributo indicando la variable 'operación':

  <span [ngSwitch]="operacion">

Según el valor que almacena la variable 'operación' se ejecutará el *ngSwitchCase que coincide exactamente con el string que almacena. En el caso que tenga almacenado la cadena 'ninguna' se verifica verdadera la directiva *ngSwitchDefault.

Las comillas simples dentro de las dobles son importantes ya que la variable operación es de tipo string:

 *ngSwitchCase="'sumar'"

Podemos probar esta aplicación en la web aquí.

Microsintaxis

La microsintaxis de angular le permite configurar una directiva en una cadena compacta y amigable. El analizador de microsintaxis traduce esa cadena en atributos de una etiqueta <ng-template>. La microsintaxis se aplica también para las directivas *ngSwitchCase y *ngSwitchDefault.

Por ejemplo la sintaxis del problema anterior:

<span [ngSwitch]="operacion">
    <span *ngSwitchCase="'sumar'">{{valor1+valor2}}</span>
    <span *ngSwitchCase="'restar'">{{valor1-valor2}}</span>
    <span *ngSwitchCase="'multiplicar'">{{valor1*valor2}}</span>
    <span *ngSwitchCase="'dividir'">{{valor1/valor2}}</span>
    <span *ngSwitchDefault>(No eligió operación)</span>
</span>

El transpilador de Angular procede a modificar las directivas estructurales *ngSwitchCase y *ngSwitchDefault por elementos <ng-template>:

  <span [ngSwitch]="operacion">
    <ng-template [ngSwitchCase]="'sumar'">
      <span>{{valor1+valor2}}</span>
    </ng-template>
    <ng-template [ngSwitchCase]="'restar'">
      <span>{{valor1-valor2}}</span>
    </ng-template>
    <ng-template [ngSwitchCase]="'multiplicar'">
      <span>{{valor1*valor2}}</span>
    </ng-template>
    <ng-template [ngSwitchCase]="'dividir'">
      <span>{{valor1/valor2}}</span>
    </ng-template>
    <ng-template ngSwitchDefault>
      <span>(No eligió operación)</span>
    </ng-template>
  </span>

Normalmente utilizamos el prefijo * para crear las directivas estructurales, pero cuando veamos la creación de nuestras propias directivas estructurales necesitamos conocer como Angular las trata y modifica.

Retornar

75 - Directivas estructurales *ngSwitchCase, *ngSwitchDefault y ngSwitch - Sintaxis completa

Problema

Microsintaxis

75 - Directivas estructurales ngSwitchCase, ngSwitchDefault y ngSwitch - Sintaxis completa