Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Angular esencial

Mostrar opciones múltiples con NgSwitch y NgModel

¡Prueba gratis durante 10 días

nuestros 1291 cursos !

Prueba gratis Mostrar modalidades de suscripción
Cuando trabajes tus aplicaciones y estas comiencen a hacerse más complejas, posiblemente necesites evaluar una premisa que tenga muchos valores diferentes más allá de TRUE o FALSE. Para eso existe la directiva NgSwitch, que permite evaluar de forma rápida y eficiente premisas de valores múltiples. También usaremos la directiva NgModel para recibir datos generados por el usuario.
08:37

Transcripción

La directiva'ngSwitch'nos permite mostrar u ocultar elementos del código de acuerdo al valor que se encuentre en una expresión. En esta lección, vamos a trabajar con esta directiva. Yo acá estoy trabajando una aplicación la cual tengo funcionando en el servidor, a través del comando'gnServe'. También estoy trabajando en la plantilla del componente principal que se encuentra en la carpeta'src', 'app' y en este caso'app. component. html'. Por ahora solo tengo un encabezado y voy a incluir los elementos básicos que va a tener nuestra aplicación. Lo primero que vamos a necesitar es un contenedor donde vamos a tener las diferentes opciones que vamos a desplegar. Cada una de las opciones en este caso va a ser un párrafo que va a cambiar de acuerdo al valor que nosotros estemos igualando, por ahora solo voy a poner 'texto'. Luego vamos a insertar una entrada de textos que nos va a servir a nosotros para evaluar un valor dentro de la aplicación. Esto lo vamos a hacer a través de la etiqueta'input' que vamos a definir que sea de tipo'texto' y por ahora lo vamos a dejar así. Vamos a ver el resultado de esta aplicación en el servidor. En este caso tenemos un encabezado, un texto que va a cambiar de acuerdo a un valor y tenemos una entrada de texto que va a definir un valor arbitrario, el cual vamos a evaluar y de acuerdo al valor que exista acá vamos a mostrar un texto. En este caso, la aplicación lo que va a evaluar son los días de la semana, así que si yo escribo "lunes", debería mostrarme un mensaje diferente de que si escribo "martes". Vamos a realizar la lógica de esta aplicación y vamos a comenzar incluyendo la directiva'ngSwitch'. Esto lo vamos a hacer dentro del contenedor principal, como te mencioné hace unos minutos. En este caso, este'div'lo vamos a incluir utilizando la sintaxis de paréntesis cuadrado 'ng Switch' y le vamos a asignar la expresión que vamos a evaluar. En este caso se va a llamar'díasSemana'; 'diasSemana'todavía no existe dentro de mi aplicación y lo que vamos a necesitar es que tenga diferentes valores. Para eso, vamos a utilizar también otra directiva dentro de la entrada de texto. Esta directiva se va a llamar'ngModel'. La sintaxis de'ngModel'va a ser paréntesis cuadrado, paréntesis redondo y dentro escribimos'ng Model'. Un modelo dentro de Angular básicamente es una variable, pero en el momento en que nosotros creamos una variable relacionada a una entrada de texto, vamos a hacer una conexión en tiempo real de lo que escriba el usuario con la evaluación que vamos a hacer en el'ngSwitch', así que el resultado se va a mostrar en el momento en que se cumpla específicamente el valor que nosotros tengamos mientras el usuario va tecleando. Esto lo vamos a hacer definiendo acá que'ngModel'sea el valor "días de la semana". Así, el valor que exista dentro de este'input', esta entrada de texto, va a ser el que vamos a evaluar en el'ngSwitch'. Por ahora, mi aplicación no funciona, porque'ngSwitch'necesita otras directivas para poder operar. La primera directiva que vamos a necesitar va a ser el valor que vamos a necesitar por defecto. Ahora, esta aplicación siempre va a mostrar un párrafo. Lo que vamos a definir es cuál párrafo va a mostrar. Así que en caso de que no tengamos ningún valor definido dentro de nuestra lógica, vamos a mostrar uno que se va a desplegar por defecto. Esto lo vamos a hacer a través de la sintaxis que vamos a agregar dentro de este párrafo que acabo de copiar. Vamos a poner: asterisco 'ng Switch Default', esto significa que vamos a mostrar, por defecto, este texto. Por ahora, lo que vamos a mostrar va a ser un mensaje invitando al usuario a que escriba un texto dentro de la casilla que ya tenemos asignada. Ahora vamos a evaluar un valor, en este caso vamos a evaluar que, por ejemplo, si dentro de la casilla de texto tenemos un'valor13', se muestra acá 'valor13'. Ahora, ¿cómo hacemos esto? Lo vamos a hacer también utilizando la sintaxis: asterisco 'ng Switch' y en este caso tenemos que definir la directiva'Switch Case'. Esto va a evaluar que en caso de que "días de la semana" sea igual a –en este caso queremos evaluar que sea 13–, si "días de la semana" es igual a 13, nos va a mostrar este valor y si no tiene el valor'13', entonces, vamos a ir al valor por defecto. Guardamos, examinamos la aplicación y vemos que tenemos acá el mensaje que se está mostrando por defecto y si ponemos, por ejemplo, 11, no muestra nada, pero si pongo 13 me muestra el mensaje que yo he definido de acuerdo a ese valor. Ahora avancemos un poco más este código. Nosotros podemos aprovechar el'ngSwitch' para poner una cantidad indefinida de diferentes opciones. Yo acá ya tengo diferentes opciones para cada uno de los días de la semana, así que vamos a dejar este 13, no pasa nada, y vamos a poner diferentes opciones. Vamos a darle formato a este documento y vemos que tenemos acá la estructura de mi aplicación, que va a ser un párrafo, en ese caso le he agregado una clase, simplemente para efecto gráfico y le estoy incluyendo la directiva'ng SwitchCase'. Quiero que pongas atención a que esta directiva funciona únicamente dentro de una etiqueta que ya tiene definido el'ngSwitch', porque estas dos directivas son dependientes entre sí. Ahora, en el caso de que "días de la semana" tenga el valor'lunes' –y también quiero que notes que en este caso estoy poniendo 'lunes'dentro de comillas simples–, recordemos que la sintaxis de HTML me obliga a mí a siempre a incluir un valor dentro de comillas dobles, pero como estamos definiendo una cadena de texto, la debo definir dentro de comillas simples para que Angular la interprete de esta forma. Ahora, estoy repitiendo más o menos el mismo proceso dentro de todos estos elementos, como puedes ver estoy definiendo una cadena de texto y en este caso, en el caso de'13', no lo he definido como cadena de texto, estoy definiendo un valor numeral, lo que significa que no necesita ir entre comillas simples, solamente las comillas dobles, que son requisito de la sintaxis de HTML. Finalmente, en caso de que ninguno de estos casos se dé correctamente de que el valor de "días de la semana" no sea ni'lunes', 'martes', 'miércoles', 'viernes' o que sea'13', entonces, me va a mostrar este mensaje. Tenemos lista la aplicación, vamos a examinar cómo trabaja y vemos que si, por ejemplo, yo escribo "lunes", me muestra acá el mensaje. En este caso está mostrando un cuadro de color gris, porque yo le he asignado previamente los estilos en CSS para que en este caso la clase'item' se muestre de esta forma. Quiero que notes que no lo he incluido dentro de todos y así puedo mostrar diferentes estilos y diferentes elementos dentro de mi aplicación. Ahora, por ejemplo, si cambio el valor y solamente elimino la's', ya no calza con la cadena de texto'lunes', así que no me va a mostrar ningún mensaje. No calza con ninguna de las opciones y me muestra la opción por defecto. Vamos a poner'martes'. Y también si quiero poner el valor'13', me muestra la opción acá. En el caso de'ngSwitch', vamos a tener una similitud ligera con el'ngIf'. Es importante que tomes en cuenta que'ngSwitch'se debe utilizar si nosotros vamos a evaluar un elemento que tiene diferentes valores cambiantes. En el caso de'ngIf' es mejor utilizarlo cuando estamos trabajando con valores que sean cierto o falso; 'ngIf'nos va funcionar para valores mucho más complejos y para hacer análisis de diferentes opciones de una forma más eficiente.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.