En este artículo, vamos a ver qué es NgSwitch en Angular 10 y cómo usarlo.
NgSwitch especifica la condición para mostrar u ocultar los elementos secundarios.
Sintaxis:
<li *NgSwitch='condition'></li>
NgModule: El módulo utilizado por NgSwitch es:
- CommonModule
Selectores:
- [NgSwitch]
- Directivas:
- NgSwitchCase
Acercarse:
- Cree la aplicación angular que se utilizará
- No es necesario importar nada para usar NgSwitch
- 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:
app.component.ts
import { Component, Inject }
from '@angular/core';
import { PLATFORM_ID }
from '@angular/core';
import { isPlatformWorkerApp }
from '@angular/common';
@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/NgSwitch