[MUSIC]
En el primer módulo revisamos brevemente las directivas y
examinamos las directivas estructurales.
Vimos cómo las directivas estructurales nos permiten diseñar las plantillas.
Para nuestros componentes angulares.
En esta lección, vamos a revisar las directivas de atributos.
El tercer tipo de directiva.
Y también veremos cómo podemos diseñar una directiva personalizada
en el ejercicio que sigue a esta conferencia.
Así que como nos dimos cuenta, las directivas son una forma
de diseñar ambas plantillas angulares y nos permiten hacer
varias partes de la manipulación de la presa con vistas de aplicaciones angulares R.
Entonces, vimos el uso de directivas para dar instrucciones a la repetición angular y
cómo renderizar las plantillas en el DOM.
Y ya hemos aprendido que dentro de la aplicación Angular,
el uso de directivas estructurales en las plantillas nos permite diseñar
nuestras vistas de nuestra aplicación Angular.
También aprendimos que el componente que hemos utilizado tanto
extensamente en los diversos ejercicios de este curso.
Es un tipo especial de directiva que tiene una plantilla o una vista adjunta a ella.
Y también aprendimos anteriormente que
hay otros dos tipos de directivas que podemos usar dentro de nuestras plantillas.
Las directivas estructurales y las directivas de atributos.
Hemos analizado algunas directivas estructurales incorporadas en el primer módulo
de este curso.
Y vimos cómo podemos usar directivas estructurales como el NG4 o el NGF y
más en esos ejercicios en las partes anteriores de este curso.
Ahora veremos el otro tipo de directiva, la directiva de atributos.
¿Qué es una directiva de atributos y
cómo nos ayuda a la hora de diseñar nuestra aplicación Angular?
Entonces, ¿qué son las directivas de atributos?
Las directivas de atributos se utilizan como atributos para los elementos de la plantilla.
Así que al igual que tienes tu código HTML que escribes dentro de tu plantilla y
los elementos HTML puedes aplicar una directiva de atributo
a esos elementos HTML.
También vimos la directiva estructural del usuario.
Y vimos que los componentes pueden agregar elementos
adicionales como HTML que se pueden usar dentro de las plantillas de su aplicación Angular.
Así que la forma en que usamos los componentes con sus selectores
fue una forma en que usamos directivas dentro de nuestra aplicación Angular.
Cuando vimos el uso de directivas estructurales que se aplicaron a
los diversos elementos HTML dentro de nuestra plantilla.
Ahora nos fijamos en las directivas de atributos que nos permiten cambiar
ciertas propiedades de nuestros elementos HTML.
Entonces, ¿cuál es el uso de las directivas de atributos?
Las directivas de atributos escuchan y modifican el comportamiento de otros elementos HTML o
atributos o propiedades o componentes que se utilizan dentro de las plantillas.
De hecho, hemos usado ya parte de la directiva de atributos
incorporada sin hablar explícitamente de ellos.
Hablando de las directivas de atributos incorporadas que vienen como parte de su marco angular
.
Ya has encontrado el modelo Ng en algunas de las lecciones anteriores
en este curso, específicamente en el área de enlace de datos y
también cuando estudiamos sobre las fuentes en el módulo anterior.
Hay otros dos tipos de directivas de atributos incorporadas que
podríamos encontrar es ngClass y ngStyle.
Por el nombre mismo se puede adivinar cuál es su propósito.
Del mismo modo, hay algunos otros módulos que usa dentro de sus aplicaciones Angular
como el FormsModule y también el RouterModule que tienen su propio conjunto
de directivas de atributos incorporadas que hacemos uso de.
De hecho, ya hemos hecho uso de ellos cuando definimos formas y
también el uso del router dentro de nuestra aplicación Angular anteriormente.
Ahora, en este punto, puede que se pregunte, ¿cómo voy a crear mi propia directiva de atributos
si estoy interesado en crear una directiva personalizada, así que
aquí es donde veremos cómo puede derivar una directiva personalizada.
Exploremos brevemente las directivas personalizadas en la siguiente diapositiva y
en el ejercicio que sigue.
Así que en las directivas personalizadas su expectativa es que usted sería capaz de implementar
lo que le interesa.
En particular, así que aquí es donde podemos crear nuestras propias directivas personalizadas.
Usando la CLI angular, puede descifrar el código de huesos desnudos para una directiva
y posteriormente modificar ese código para implementar su directiva personalizada.
Entonces, cuando implementa una directiva personalizada usando Angular CLI,
creará una directiva para usted.
Y entonces usted notará inmediatamente que dentro de la directiva,
usarás esa clase
decoradora de directivas con el fin de convertir la clase en una directiva y
nos encontraremos con una en el ejercicio que sigue.
Además, con el director, especialmente cuando estás usando directivas de atributos y
quieres modificar cualquiera de los elementos que se usan dentro de tus plantillas.
Otra clase que es útil para nosotros se llama ElementEF.
Esto también es importante desde el código angular, y esto se inyecta en su constructor de directivas
, escrito su clase directiva.
Y luego esto le permite acceder a los elementos DOM y
luego hacer modificaciones en ellos.
Así que con esta rápida comprensión de cómo puede crear directivas personalizadas,
veamos un ejemplo en el ejercicio que sigue a esta conferencia.
[MÚSICA]