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

Angular esencial

Controlar estilos con NgStyle y NgClass

¡Prueba gratis durante 10 días

nuestros 1287 cursos !

Prueba gratis Mostrar modalidades de suscripción
En una aplicación Angular, aunque la lógica y la programación son el foco principal, inevitablemente vamos a necesitar interactuar con algunos elementos gráficos, Las directivas NgStyle y NgClass nos permiten asignar propiedades de CSS a partir de propiedades lógicas de la aplicación.
10:23

Transcripción

En Angular tenemos control total sobre los estilos de nuestra aplicación. En esta lección, vamos a ver dos directivas que son sumamente útiles, llamadas'ngStyle' y'ngClass'. Acá yo estoy trabajando en una aplicación que yo estoy ejecutando a través del comando'ngServe' y estoy trabajando en la plantilla del componente inicial'app. component. html'. Por ahora solamente tengo un encabezado y lo que voy a hacer es que voy a crear una casilla, –en este caso vamos a crear un'div'–, una casilla que va a estar controlada a través de dos botones que van a cambiar sus propiedades gráficas. Ahora, en este caso, yo ya tengo algunos elementos de CSS previamente definidos. Voy a copiar esta clase de CSS llamada'cuadrado', donde voy a definir las propiedades de este elemento, y vamos a examinar la base de nuestra aplicación. Básicamente tenemos dos botones y un elemento cuadrado. Ahora vamos a modificar estos botones y vamos a decir que cuando hacemos clic en el primero, nuestro cuadrado se vuelva de color rojo y cuando hacemos clic en el segundo, se ponga de color verde. Vamos a comenzar trabajando nuestro bloque'cuadrado' con la directiva'ngStyle'; 'ngStyle'es una directiva que nos permite inyectar directamente estilos en un elemento de HTML. Así que para invocarla, llamamos a través de la sintaxis de paréntesis cuadrado y el nombre de la directiva, en este caso, 'ng Style', y vamos a ponerle que sea igual. Y acá nosotros vamos a definir cuáles van a ser las propiedades que queremos insertar. Por ejemplo, su forma más básica, si yo pongo acá la propiedad 'background'y lo ponemos entre comillas simples ambas propiedades, vamos a guardar y, como puedes, ver en este caso estoy definiendo a través de paréntesis cuadrados un valor que está metido dentro de llaves y cada una de las propiedades dentro de comillas, para definir un elemento de CSS. Vamos a ver el resultado y vemos que estoy definiendo la propiedad'background'. Si lo revisamos acá, dentro del inspector, vamos a ver que estoy definiendo la propiedad'background' con el valor'yellow'. Ahora, podemos hacer algunos elementos básicos de programación dentro de'ngStyle'. Por ejemplo, yo puedo poner que tenga un valor por defecto. Puedo poner que, por ejemplo, yo quiero que el'background'en este caso tenga el valor dinámico de'color'. Por ahora'color'no se encuentra, así que voy a evaluar que'color' se encuentre activo y si no se encuentra activo, entonces, le voy a decir que muestre un color por defecto. Así que evaluando esta opción, 'color' una variable dentro de mi aplicación, vamos a incluir acá un signo de pregunta, y le voy a decir que si la variable'color'se encuentra definida, entonces, que el'background'utilice el valor de'color'. En caso de que no sea así – esto lo voy a poner a través de la sintaxis de dos puntos–, voy a definir acá una propiedad estática. En este caso, vamos a definir un color llamado'peru'. Estos son colores que se encuentran definidos por defecto en HTML, por eso estoy utilizando cadenas de texto directamente. Pero podemos definirlo también con colores hexadecimales. Por ahora voy a dejar este color, 'peru'. Lo que significa que'ngStyle' va a asignar el color de fondo o'background' a través de la propiedad'color' si se encuentra definida, y si no, le va a asignar la cadena de texto estática'peru' y va a mostrar el color que tiene ese nombre dentro de HTML. Revisamos y ahora podemos ver que, como no tengo definida la propiedad'color', está mostrando el color llamado'peru'. Vemos acá, dentro de las propiedades, que me está mostrando el color con este nombre. Vamos a seguir trabajando nuestra aplicación y ahora vamos a hacer que a través del botón y el evento'click' que vamos a incluir a través de: paréntesis 'click', vamos a asignar directamente valores dentro de nuestra aplicación. Yo voy a definir la propiedad que he creado antes, en este caso la variable'color', le voy a decir que'color' sea igual a. En este caso, ya que estoy definiéndole el color rojo, voy a utilizar la propiedad de HTML llamada'red', que me devuelve un color rojo, y voy a copiar exactamente el mismo código dentro del otro botón y solamente voy a cambiar la propiedad'red' por la propiedad'green' para que me despliegue el color de fondo verde. Ahora, lo que está pasando es esto: yo voy a modificar cada vez que haga clic el valor de'color' y de acuerdo al valor que tenga, se va mostrar como color de fondo de mi cuadrado. En caso de que no exista un valor, se va a mostrar el color'peru'. Vemos el resultado, tenemos el color por defecto, como puedes ver acá, 'peru'. Y vamos a hacer clic en'rojo', el valor acá, en vez de'peru', va a cambiar a'red'. Podemos ver que está en'red' y si hacemos clic en Verde, va a cambiar a'green'. Así es como nosotros podemos asignar propiedades de CSS dentro de una aplicación Angular. Ahora, también podemos utilizar otra directiva bastante útil llamada 'ngClass'; 'ngClass'es muy parecida a'ngStyle', pero la diferencia fundamental es que en vez de inyectar propiedades directamente de CSS, lo que inyecta es una clase. Así que vamos a modificar, por ejemplo, los botones. En este caso, vamos a modificar el botón verde y vamos a decir que cada vez que hagamos clic en el botón verde, se le asigne una clase. Esto lo hacemos con la sintaxis de paréntesis cuadrado, 'ng Class' y definimos cuál va a ser el valor que va a tener esta clase. En este caso, vamos a asignarle el valor que tenga'color'. Guardamos, vemos el resultado y vamos a inspeccionar este botón Verde, que es el que acabamos de cambiar. Por ahora no tiene ninguna clase. Si yo hago clic en Rojo, vemos que ahora sí existe una propiedad llamada'class' y yo ya he asignado esta propiedad'class'con el valor'red', ya he designado una propiedad'red' que me da un color rojo en el borde inferior. Si hago clic ahora en el botón verde, la clase va a cambiar al nuevo valor que tiene la propiedad'rojo', en este caso va a ser'green'. Vemos que vamos pasando, 'red', 'green', pero en este caso lo que se está asignando es una clase. Ahora vemos que la clase lo que hace es que en vez de asignar un color de fondo como se está haciendo en el cuadrado, porque lo estamos inyectando directamente, mi clase lo que hace es que asigna un borde, en este caso de un color verde cuando se llama'green' y rojo, cuando llamamos a la clase'red'. Así es como nosotros podemos definir específicamente clases. Mi recomendación personal es que en la medida de lo posible trates de asignar clases. Prefiere siempre utilizar el'ngClass', porque es mucho más eficiente y mucho más modular de trabajar. Te voy a mostrar una última opción dentro de'ngClass' para poder trabajar valores dinámicos. En este caso, vamos a utilizar exactamente la misma propiedad para el botón rojo, pero en vez de definir específicamente el color, vamos a cambiar la sintaxis y lo voy a poner entre llaves. Vamos a definir que: cuando nosotros hagamos clic sobre'rojo', se le asigne la clase'activo', una clase que ya he definido dentro de mi CSS. Acá, en un documento'app. component. css', yo ya tengo una clase llamada'activo'. Ahora, voy a hacer que'activo' se muestre únicamente cuando el valor de'color' sea igual a'rojo'o en este caso'red', o sea, cuando este botón esté activo. Esto lo vamos a hacer poniendo la propiedad'activo' dos puntos, y defino el valor, en este caso variable, 'color', y vamos a hacer la condicional que sea igual a, y entre comillas ponemos'red'. O sea, la clase 'activo'se va a asignar únicamente si el color es'red'. Si yo hago clic sobre este otro color, el color va a ser'green'y no se va a activar. Vamos a guardar y vamos a ver el resultado final de nuestra aplicación. Tenemos que Verde está utilizando los colores y ya vemos que Rojo se está activando cuando tenemos la propiedad'red' activa. Y únicamente, la clase –como la tenemos acá, vamos a inspeccionar este elemento–, vemos que acá tenemos la clase'activo', pero si el valor es diferente de'red', en este caso'verde', vemos que la clase 'activo'no se muestra dentro de este elemento. Así es como podemos utilizar también 'ngClass' a través de valores dinámicos. Si revisamos en nuestra aplicación, estamos utilizando tanto'ngStyle' como'ngClass'con valores estáticos y dinámicos. Estas dos propiedades son fundamentales en una aplicación Angular y te van a servir mucho para desplegar acciones o también para desplegar diferentes momentos de las aplicaciones. Posiblemente, las vas a utilizar muy frecuentemente en todas sus aplicaciones de Angular.

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.