Bienvenidos en esta clase vamos a ver las directivas estructurales, comenzando con Henry Ford.
Vamos a crear un nuevo componente que le vamos a llamar directiva, pero ahora sí que lo vamos a crear
completamente de forma automática utilizando generate component.
Nos vamos a la consola de Angular y con el comando MJI generai vamos a colocar component, es decir,
vamos a crear un componente de Angular y le damos el nombre.
Le vamos a colocar directiva.
Entonces Aiji genere componen directiva.
Eso sería una forma.
Otra forma es usar el alias para abreviar.
Entonces, en vez de usar y generate usamos simplemente Augé y en vez de usar component usamos la CE
de compra y después el nombre componente enter.
Eso automáticamente va a crear el HTML del componente.
Va a crear también el archivo para las pruebas unitarias, la clase component y también el estilo CSS
y todo dentro de un directorio de una carpeta con el nombre componente.
Entonces, si nos vamos ahora a app directiva, acá tenemos otro componente y además al final actualiza
el app móvil.
Justamente para registrar este componente en nuestra aplicación, abramos el app móvil y observamos
que automáticamente importa.
Directiva component.
Luego se define en Declaration.
Acá se declara justo después de footer.
Por lo tanto, está todo de forma automática.
Crea la clase.
Acá tenemos la clase directiva, crea el HTML, crea la hoja de estilo, en fin, crea todo.
Vamos a borrar el archivo de testing y vamos a abrir nuestra clase directiva component y la vamos a
simplificar.
Acá implementa la interfaz on init para manejar el ciclo de vida, el evento cuando se inicializa componente,
pero como no lo vamos a ocupar simplemente mejor eliminar lo mejor, tener lo justo necesario.
Y también tiene un constructor que construye el objeto.
Ahí tenemos nuestra clase directiva y crea todo de forma automática el selector, el template RL y la
hoja de estilo.
La hoja de estilo tampoco lo vamos a utilizar para este ejemplo, así que la podemos quitar, se puede
eliminar y dejamos solamente el template o RL y el selector.
Por lo tanto, también podremos eliminar la hoja de estilo, el archivo CSS.
Bien, hasta ahí estamos perfecto.
Vamos a crear un atributo, le vamos a llamar lista curso del tipo String.
Pero es un arreglo, así que lo vamos a dejar con corchete igual.
Recordemos que todo arreglo se define con corchete y vamos a tener acá los elementos.
Y por ejemplo, acá vamos a tener descrip.
Por ejemplo, lleva a scrip yaba estándar de o yaba simplemente y por ejemplo se echarpe y php.
Acá faltó la cola.
Bien, acá tenemos entonces un arreglo, una lista.
Entonces la idea iterar sobre este arreglo utilizando la directiva en ti for.
En la vista.
Ahora vamos a ir a directiva compra.
Entonces acá la idea.
Bueno, vamos a quitar el código que viene de ejemplo.
Guardamos y acá vamos a tener nuestro en Gifford.
Por ejemplo, podríamos tener un div y dentro del dir podríamos tener una lista, un uele y también
lehet.
Nuestro div va a tener una clase de vostra card y el whele va a tener también vostra.
Vamos a utilizar list group.
Y por supuesto, el li son los items.
Entonces sería List Group Item y además podríamos tener un título.
Vamos a utilizar undir también, por ejemplo, listado de cursos.
Un carth ider guárdanos con control s como siempre.
Y la idea es iterar o mostrar cada curso dentro del uele, en cada ítem.
Entonces, en la etiqueta que queremos repetir varias veces por cada elemento de la lista del arreglo,
queremos repetir en este caso el lï.
Entonces en Helí vamos a utilizar la directiva en Whitford, primero con el austriaco, en Yi for Gifford
igual.
Y acá va toda la estructura y la estructura sería la variable.
Utilizando Lett, por ejemplo, curso off del arreglo.
En este caso, el arreglo sería lista curso.
Eso sería una forma.
Otra forma un poco más automática.
Escribimos en TxI y acá tenemos el en již for que esto lo probé el plan Jinns para trabajar con Angular
doble clic en esta directiva y automáticamente nos genera el Gifford con su estructura.
Acá tenemos la variable por cada elemento que estamos integrando.
Curso off y el arreglo la lista que sería lista curso tenemos nuestro en Ford.
Entonces vamos a repetir tantas veces este elemento li como elemento tengamos en nuestro arreglo holista.
Acá tenemos que mostrar el valor de cada elemento de la iteración.
Entonces, como siempre, utilizando las llaves de interpolación de String, vamos a imprimir el curso
que el curso sería justamente nuestra variable lett que contiene el nombre, el nombre del curso.
Vamos a guardar y vamos a ejecutar.
Entonces con Engine Cerf menos o vamos a levantar el servicio.
Tenemos creado nuestro componente, pero en ninguna parte le hemos dicho dónde la vamos a utilizar.
Recuerden que importante el selector.
Bien, ahí tenemos nuestra aplicación, pero en ninguna parte hemos utilizado el selector de nuestro
componente directiva.
Si se fijan acá el app directiva, el nombre selector y si queremos mostrar el contenido de este componente,
utilizar este componente.
La tema es que colocar en algún lugar de nuestra aplicación.
Entonces, para poder mostrar la lista de curso tenemos que utilizar este selector donde por ejemplo
en a componer HTML que es el componente principal.
Y acá vamos a quitar el uele li que tenemos del curso profesor.
Vamos a colocar el selector directiva justamente acá.
Vamos a guardar.
Tenemos esta discri.
Ya escribí, ya está.
Entredichos se echarpe y PTP.
Entonces acá tenemos nuestro primer ejemplo utilizando Gifford para iterar, cosa que vamos a seguir
utilizando en nuestro curso.
Kedamos hasta acá.
Hasta la próxima.