[MUSIC]
En el ejercicio anterior, vimos el uso de nuestra primera directiva estructural,
la NGFor.
Hagámonos algunas preguntas más sobre las directivas estructurales y
aprenda cómo son útiles cuando escribimos nuestras aplicaciones Angular.
Las directivas estructurales son un tipo de directivas.
Así que directivas es un paraguas general bajo el cual tiene componentes,
luego tiene directivas estructurales, y luego tiene directivas de atributos.
Así que vamos a aprender un poco más acerca de las directivas.
Entonces, lo que nos damos cuenta es que las plantillas angulares son dinámicas, por lo que necesitan ser
creadas sobre la marcha, habrá mucha manipulación que hacer en el DOM.
Entonces, lo que las directivas nos ayudan es permitirnos dar instrucciones
al Angular sobre cómo renderizar las plantillas al DOM.
Por lo tanto, usan directivas para dar instrucciones
a Angular ya que está representando las plantillas en la pantalla.
Entonces, en general, una directiva se puede definir directamente en Angular usando
una clase con el decorador @Directive.
Vemos bien un ejemplo de una directiva que nosotros mismos podemos crear
un poco más adelante en este curso.
Por el momento, vamos a ver las directivas de construcción.
Y en particular,
ya hemos encontrado nuestro primer tipo de directiva, que es un componente.
Un componente es un tipo especial de directiva y
Angular, que tiene su propia plantilla asociada.
Y ya hemos visto cómo podemos aprovechar un componente para definir
partes de nuestro diseño para la pantalla de nuestra aplicación.
Como mencioné, hay otros dos tipos de directivas en Angular,
estructurales y directivas de atributos.
Examinaremos rápidamente las directivas estructurales en esta lección.
Y luego veremos las directivas de atributos un poco más adelante en
este curso.
Entonces, ¿qué son las directivas estructurales y cómo son útiles para nosotros?
Lo que nos damos cuenta al usar directivas estructurales es que
nos ayudan a alterar el diseño de nuestro contenido
al ayudarnos a añadir y eliminar elementos del DOM.
En particular, tenga en cuenta el uso del término add y
eliminar y reemplazar elementos en el DOM.
Así que literalmente estás usando las directivas estructurales para manipular
tu DOM de tu página web.
Por lo tanto, puede usar las directivas estructurales aplicándolas a un elemento host,
típicamente un div o un elemento de lista en el DOM y también a sus descendientes.
Ya hemos visto al usuario,
la directiva estructural NGFor, en el ejercicio anterior.
Y vimos cómo usamos el ngFor para recorrer una variedad de platos,
y luego diseñar cada uno de ellos para construir el menú de nuestro restaurante.
Aquí, voy a mencionar brevemente algunas de las directivas estructurales comunes que encontrarán
al escribir su partición angular.
Una de las directivas estructurales más comunes que verá es la directiva nGiF
.
Cuando lo use en la sintaxis de su plantilla, lo escribirá como*nGIF,
así que así es como se usa esta directiva en su DOM.
Entonces, por ejemplo, si aplica la directiva nGIF a un div como
esto en este ejemplo, lo que está especificando dónde es que
si SelectedDish no es nulo, entonces este div se agregará al DOM.
Si ese SelectedDish es nulo, entonces este div,
lo que esté contenido en este div no se agregará al DOM, por lo que
está literalmente eliminando esto del DOM si el valor resulta ser falso.
Si resulta ser cierto, entonces se agrega al volcado.
Del mismo modo, vimos el uso de la directiva ngFor.
Entonces, donde definimos, por ejemplo, para el md-list-item en el anterior ejercicio
dijimos *ngFor y dijimos, dejar plato de platos.
Así que esto nos permite iterar sobre la matriz de platos
que se definen en nuestro tipo script coat.
Otra directiva estructural que podría encontrar un uso común es la directiva ngSwitch.
Aunque no tengo un ejemplo en este momento,
más adelante en este curso encontraremos el uso de la directiva ngSwitch.
Esto le permite agregar selectivamente ciertos elementos al DOM
especificando una condición, dependiendo de lo que se evalúe la condición,
entonces usará uno de esos elementos entre la lista.
Si está familiarizado con la declaración switch de C ++ o Java,
el ngSwitch le parece muy familiar.
Así que actuará similar a la declaración switch a la que
está acostumbrado desde Java o C ++.
Con la breve discusión sobre las directivas estructurales,
pasemos al próximo ejercicio en el que seguiremos examinando los componentes.
[MÚSICA]