En este artículo vamos a ver qué es NgSwitchCase en Angular 10 y cómo usarlo.
NgSwitchCaso NgSwitch
Sintaxis:
<li *NgSwitchCase='condition'></li>
NgModule: el módulo utilizado por NgSwitchCase es:
- CommonModule
Selectores:
- [NgSwitchCase]
Acercarse:
- Cree la aplicación angular que se utilizará
- No es necesario importar nada para usar NgSwitchCase
- definir una variable en app.component.ts
- en app.component.html use NgSwitch con la directiva NgSwitchCase en el elemento con las condiciones a verificar
- Sirva la aplicación angular usando ng serve para ver el resultado
Ejemplo 1:
app.component.ts
import { Component }
from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
num = 2;
}
app.component.html
<div [ngSwitch]="num"> <div *ngSwitchCase="'1'">One</div> <div *ngSwitchCase="'2'">Two</div> <div *ngSwitchCase="'3'">Three</div> <div *ngSwitchCase="'4'">Four</div> <div *ngSwitchCase="'5'">Five</div> </div>
Producción:
Referencia: https://angular.io/api/common/NgSwitchCase