La directiva NgSwitch funciona como muchas directivas NgIf anidadas, es decir, si queremos mostrar un elemento u otro según el valor de una variable. Eso es exactamente lo que hacíamos con el NgIf, pero en éste caso nos servirá si la variable tiene más de 2 posibles valores.
Vamos a verlo con un ejemplo.
Primero creamos un componente llamado "ngSwitch" e insertamos la etiqueta de su selector en el "app.component.html" para que aparezca en pantalla.
Después creamos en el componente una variable llamada "alerta" y la informamos con el valor "info":
Después modificamos el html del componente como sigue:
Como se puede ver, hemos creado un contenedor principal con la directiva NgSwitch apuntando a la variable "alerta" del componente.
Dentro de ese contenedor principal, hemos creado 4 contenedores con la directiva NgSwitch apuntando al valor que debe tener la variable "alerta" para que ese contenedor se muestre por la pantalla. El último de los contenedores no apunta a ningún valor, será el que se muestre si el valor de la variable "alerta" no coincide con ninguno de los anteriores.
Así, como a la variable "alerta" le dimos el valor "info", se mostrará por pantalla sólo el segundo contenedor, pero podemos modificar el valor de la variable para que se muestre otro contenedor.
Para probarlo, levantamos la aplicación:
Comprobamos que se muestra sólo el contenedor "info".
Y eso es todo.
No hay comentarios:
Publicar un comentario