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.
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í.
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.