Las directivas están en todos en nuestras aplicaciones Angular, puede que incluso estén en más lugares de los que te imaginabas. Nos sirven para modificar nuestro DOM dentro de nuestras páginas o Templates. Estas directivas hacen, entre otras cosas, que nuestro HTML sea mucho mas legible y fácil de modificar. Así que si querés que tu vida sea mucho mas fácil… ¡prestále atención a este post!
¿Qué son las Directivas?
Técnicamente hablando, una Directiva es una Clase decorada con @Directive. El tema es así, cuando Angular va por tu aplicación visitando las páginas HTML, y encuentra una Directiva dentro del HTML, sabe que tiene que hacer algo: modificar ese pedazo de HTML completamente o solo una parte, modificar solo un atributo o agregarle comportamiento a un elemento del DOM.
¿Y para qué sirven exactamente?
Para hacer el código mas Modularizable. Así como con varios Componentes se pueden crear páginas, las Directivas son usadas para componer Templates: podés crear Directivas a tu antojo (o usar las que te proporciona Angular) para crear código HTML mucho más modularizable, ¡fácil y rápido!.
¿Cuál es la diferencia entre una directiva y un componente?
¡Wow, me descubriste! ¡un Componente es una Directiva! sí sí como lo oís, es una Directiva con un Template, lo que pasa es que es un elemento tan importante en la construcción de nuestras aplicaciones Angular que los muchachos de Angular le dieron un Decorador propio ( @Component ).
Que tipo de directivas existen
- Directivas Component: las que estuvimos creando con la Metadata @Component
- Directivas Estructurales: modifican el DOM generalmente eliminando, agregando o modificando elementos del DOM. Los mas comunes son ngIf, ngFor, ngSwitch
- ngIf: dependiendo de la condición muestran o eliminan un elemento del DOM
- ngFor: es un loop de elementos
- ngSwitch: dependiendo de la condición muestra el elemento que corresponda
- ngIf: dependiendo de la condición muestran o eliminan un elemento del DOM
Son fáciles de reconocer porque son precedidas por un asterisco (*)
Algo importante es que solo UNA Directiva de tipo Estructurales pueden estar en un mismo elemento host
- Directivas Atributo: modifican un atributo dentro del elemento. Las dos más comunes son:
- ngClass: esta directiva modifica el atributo «class» dentro de un elemento HTML
- ngStyle: esta directiva modifica el atributo «style» dentro de un elemento HTML
- ngClass: esta directiva modifica el atributo «class» dentro de un elemento HTML
Cómo se crea una Directiva
La forma de crear una Directiva ya la debes conocer, puesto que es similar a la forma en que veníamos creando Componentes, y ya que estuvimos creando muchos componentes… ¡esto es pan comido!
Al igual que los Component, las Directivas se deben incluir en un módulo NgModule en el campo declarations:
Al momento de crear una Directiva le indicamos cómo se debe procesar esa directiva, cómo crearla y cómo usarla en run-time.
¡Un momento! Y esas Directivas que vienen en Angular, ngIf por ejemplo ¿como las agregamos al proyecto?
Bueno, en principio, como esas Directivas ya están creadas sólo tenemos que importarlas. ngIf particularmente se encuentra en el módulo @angular/common así que para poder usar esa Directiva hay que importarse ese módulo en el @ngModule.
En el caso del proyecto «Mi Casa Inteligente» el módulo @angular/common se encuentra en el módulo BrowserModule
Es por eso que al incorporar el módulo BrowserModule tenemos incluida esa directiva y muchas Directivas mas de uso común
Más código para la casa Inteligente
Si seguiste los pasos de los posts de la casa inteligente ( post 1, post 2, post 3, post 4, post 5) tendremos la siguiente aplicación:
Lo que haremos, por un lado, es mejorar nuestra «cocina», mostramos la lista de compras usando ngFor. Por otro lado, mostraremos la lista si es que hay algún elemento; si la lista de compras esta vacía mostraremos el mensaje «Lista vacía, nada para comprar«, usando la directiva ngSwitch. Por último, a los registros pares los pintaremos de color amarillo y a los impares de verde, usando ngClass.
¡Manos a la obra!
Lo primero que hacemos es modificar el archivo «cocina.component.html» en una lista
Luego, agregamos nuestra Directiva ngSwitch mostrando el mensaje «Lista vacía, nada para comprar» cuando no hay elementos en la lista de compras. Para corroborar que funciona bien, podemos modificar el Servicio «CocinaService» para que nos devuelva una lista vacía.
Y modificamos nuestro Template con la directiva ngSwitch.
Oka, volvamos nuestro servicio a como estaba antes
Por último, creamos dos clases CSS en nuestro archivo «cocina.component.css» una para ítems pares (con fondo amarillo) y una para ítems impares (con fondo verde). Por si no lo recordás, este archivo se crea cuando creamos un componente usando angular-cli.
Y modificamos la lógica del HTML «cocina.component.html» para que nos muestre los ítems pares en amarillo, y los y impares en verde. Para eso usamos la directiva ngClass donde le pasamos una condición de si es par inyectamos la clase «item-par» y si es impar inyectamos la clase «item-impar».
El HTML nos queda de la siguiente forma:
Bonus track
Y… ¿cómo creo Directivas nuevas?
Si querés crear una nueva Directiva lo podés hacer con angular-cli de la siguiente manera:
Fijáte que se nos crea tanto la clase decorada como una Directiva (en el directorio que le indiquemos), y además nos inyecta en el módulo que le indiquemos (en –module), y ya nos queda registrado el módulo listo para usar.
Definiciones
¿Qué es el DOM?
El DOM o Modelo de Objetos del Documento, es una estructura de objetos que genera el navegador cuando se carga un documento (nuestra pagina HTML). El DOM Puede ser alterado dinámicamente mediante JavaScript (o Angular ;) ) su contenido y aspecto de la página.
Host Element
El Host element es básicamente el elemento que contiene la Directiva
Conclusiones
Las Directivas son parte fundamental del desarrollo de nuestras aplicaciones Angular. Dominarlas es imprescindible para nuestro bueno dominio de Angular y para nuestro desarollo. Así que… ¡dominálas y tus habilidades en Angular no tendrán limites!
Suscribíte a la Newsletter!
Si te suscribís, nunca te vas a perder un post Y vas a tener acceso a mi contenido exclusivo de forma totalmente gratuita. ¡Suscribite!
gustavodohara.com te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Gustavo Dohara como responsable de esta web.
Finalidad de la recolección y tratamiento de los datos personales: gestionar el alta a esta suscripción y remitir boletines periódicos con información y oferta prospectiva de productos o servicios propios y de terceros afiliados.
Legitimación: Consentimiento del interesado. Destinatarios: Mailchimp. Puedes consultar aquí su política de privacidad. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en gustavo@gustavodohara.com así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad