Componentes y databinding en Angular: Guía avanzada | Parte #2

Retomamos esta saga sobre el uso avanzado de componentes y databinding en Angular, después de ver la parte #1. Habíamos dejado nuestra demo app con este aspecto tan majo:

ejemplo event emitter

Breve historia del View Encapsulation

Si te fijas, antes de dividir nuestra app en componentes, cuando generábamos contenido añadiendo un blueprint, el texto de la card era de color azul. El párrafo "Add new servers or blueprints!" también era azul previamente. Esto sucedía porque el archivo CSS del AppComponent así lo especifica:

p {
  color: blue;
}

Pero ahora, al haber dividido en componentes nuestro código, el template del AppComponent no contiene ningún <p> al que aplicarle el color de su archivo CSS. Los <p> están ahora repartidos entre el ServerElementComponent y el ControlPanelComponent.

Teniendo en cuenta que CSS se aplica en cascada, sin importar en qué archivo CSS definamos una regla, en nuestro caso debería aplicarse a todas las etiquetas <p> de nuestra app, buscando cualquier <p> siguiendo un patrón de AppComponent ➡ elementos del AppComponent como el <app-control-panel> ➡ elementos del <app-control-panel> ➡ hasta finalmente llegar a un <p> dentro del <app-control-panel> y aplicar ese color azul. Pero esto no es lo que sucede. ¿Por qué? 

Porque Angular sobrescribe el comportamiento por defecto del navegador, encapsulando los estilos CSS y aplicándolos únicamente al componente al que pertenecen.

Es el mismo principio que aplica Angular a los archivos .ts y .html de un componente: por defecto, lo que declaremos en dichos archivos sólo puede ser accedido desde dentro del mismo componente, y si queremos acceder desde fuera, tendremos que implementar una lógica de comunicación entre componentes como la que hablábamos en la parte #1 de esta serie

Esto significa que, si quisiéramos colorear todos los <p> de color azul, deberíamos aplicar una regla de CSS en el archivo CSS de cada componente donde haya etiquetas <p>. Por ejemplo, podemos cortar esa regla de nuestro app.component.css añadirla al archivo server-element.component.cssque es donde la queremos. Y ahora, cuando generamos contenido pulsando el botón "Add Server Blueprint", éste vuelve a ser azul.

Cuando Angular fuerza esta encapsulación de estilos (en inglés, styles encapsulation view encapsulation), lo hace aplicando un atributo distinto por componente. Inspecciona tu app con las dev tools para comprobarlo: verás que, como por arte de magia, el párrafo que ahora recibe la clase que lo pinta de color azul también contiene esa extraña adición subrayada en amarillo, que no tiene que ser igual en tu caso que en el mío. 

atributo angular css class

Si inspeccionas todas las etiquetas HTML de ese componente, verás, que todas comparten ese atributo: _ngcontent-syk-c2 en mi caso.

Si inspeccionas el primer párrafo de nuestra app ("Add new Servers or blueprints!"), verás que Angular le ha añadido otro atributo distinto a _ngcontent-syk-c2, porque ese <p> está dentro de otro componente (al ControlPanel).

Y esta es la manera que tiene Angular de decir: "tú, <p>, perteneces a este componente X, porque he creado un atributo único para identificar ese componente. Así que cuando desde el archivo CSS del componente X se defina un estilo para un <p>, sólo lo aplicaré a los <p> que estén dentro de ese componente X". ?‍♂️ 

Angular fuerza el "view encapsulation" dando un mismo atributo a todos los elementos HTML de un componente.

Este comportamiento de Angular emula la tecnología del shadow DOM, que no es compatible con todos los navegadores, y que consiste precisamente en encapsular cada nodo de HTML, haciéndolos así independientes entre sí. Pero al no ser compatible con todos lo navegadores, Angular utiliza este otro enfoque de view encapsulation para conseguir el mismo resultado.

? CONTENIDO RESTRINGIDO

El resto del contenido es sólo para miembros del Club ACTech. Puedes unirte aquí o iniciar sesión si ya eres miembro.

¡BRAVO! 

Y hasta aquí la parte #2 de esta saga sobre el uso avanzado de componentes y databinding en Angular. Si quieres seguir aprendiendo, aquí tienes la parte #3. Si te queda alguna duda, ¡nos vemos en los comentarios!

Sobre la autora de este post

Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí. 

Más recursos de aprendizaje

En mi experiencia, la manera más eficaz para aprender Angular es combinando varias vías de aprendizaje. Uno de mis métodos favoritos son los vídeo-cursos y mi plataforma predilecta para eso es Udemy. He hecho varios cursos pero sólo recomiendo aquellos que verdaderamente me han sido útiles. Aquí van:

angular the complete guide - curso Max S.

  Max Schwarzmüller

curso angular fernando herrera

   Fernando Herrera

Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:

libro 1 angular
libro 2 angular

La programación es un mundo que evoluciona a una velocidad de vértigo. Los autores de estos libros lo saben, por eso suelen encargarse de actualizar su contenido regularmente. Asegúrate de que así sea antes de adquirirlos ?.

Participo en el programa de afiliados de Udemy y Amazon, lo que significa que, si compras alguno de estos cursos y/o libros, yo me llevaré una pequeña comisión y a ti no costará nada extra. Vamos, lo que se dice un win-win ?.

Otros artículos que pueden interesarte

Cómo aprendí a programar cuando estaba «programada» para ser de letras
[tcb-script src="https://player.vimeo.com/api/player.js"][/tcb-script]A nadie le gusta su trabajo. Eso es lo que me decía a mí misma cuando conseguí mi primer[...]
Días del 160 al 203 – ¡Primer objetivo conseguido!
“A veces podemos pasarnos años sin vivir en absoluto, y de pronto toda nuestra vida se concentra en un solo[...]
Claves para entender Angular. Qué es y cómo se utiliza
Angular es un framework creado por Google que nos permite construir Single Page Applications (SPA, por sus siglas en inglés).Frameworks¿Pero qué es[...]
Si crees que este post puede serle útil a alguien, ¡compártelo!:

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Esta web utiliza cookies para asegurar que se da la mejor experiencia al usuario. Si continúas utilizando este sitio se asume que estás de acuerdo. más información

Los ajustes de cookies en esta web están configurados para «permitir las cookies» y ofrecerte la mejor experiencia de navegación posible. Si sigues usando esta web sin cambiar tus ajustes de cookies o haces clic en «Aceptar», estarás dando tu consentimiento a esto.

Cerrar