1
00:00:00,000 --> 00:00:04,518
[MUSIC]

2
00:00:04,518 --> 00:00:09,098
En el ejercicio anterior, vimos el uso de nuestra primera directiva estructural,

3
00:00:09,098 --> 00:00:09,812
la NGFor.

4
00:00:09,812 --> 00:00:15,186
Hagámonos algunas preguntas más sobre las directivas estructurales y

5
00:00:15,186 --> 00:00:19,970
aprenda cómo son útiles cuando escribimos nuestras aplicaciones Angular.

6
00:00:22,000 --> 00:00:26,110
Las directivas estructurales son un tipo de directivas.

7
00:00:26,110 --> 00:00:30,628
Así que directivas es un paraguas general bajo el cual tiene componentes,

8
00:00:30,628 --> 00:00:35,847
luego tiene directivas estructurales, y luego tiene directivas de atributos.

9
00:00:35,847 --> 00:00:39,015
Así que vamos a aprender un poco más acerca de las directivas.

10
00:00:39,015 --> 00:00:43,121
Entonces, lo que nos damos cuenta es que las plantillas angulares son dinámicas, por lo que necesitan ser

11
00:00:43,121 --> 00:00:47,379
creadas sobre la marcha, habrá mucha manipulación que hacer en el DOM.

12
00:00:47,379 --> 00:00:52,721
Entonces, lo que las directivas nos ayudan es permitirnos dar instrucciones

13
00:00:52,721 --> 00:00:57,710
al Angular sobre cómo renderizar las plantillas al DOM.

14
00:00:57,710 --> 00:01:00,900
Por lo tanto, usan directivas para dar instrucciones

15
00:01:00,900 --> 00:01:04,880
a Angular ya que está representando las plantillas en la pantalla.

16
00:01:04,880 --> 00:01:10,120
Entonces, en general, una directiva se puede definir directamente en Angular usando

17
00:01:10,120 --> 00:01:14,520
una clase con el decorador @Directive.

18
00:01:14,520 --> 00:01:19,044
Vemos bien un ejemplo de una directiva que nosotros mismos podemos crear

19
00:01:19,044 --> 00:01:22,630
un poco más adelante en este curso.

20
00:01:22,630 --> 00:01:25,258
Por el momento, vamos a ver las directivas de construcción.

21
00:01:25,258 --> 00:01:26,587
Y en particular,

22
00:01:26,587 --> 00:01:32,650
ya hemos encontrado nuestro primer tipo de directiva, que es un componente.

23
00:01:32,650 --> 00:01:35,060
Un componente es un tipo especial de directiva y

24
00:01:35,060 --> 00:01:39,800
Angular, que tiene su propia plantilla asociada.

25
00:01:39,800 --> 00:01:45,700
Y ya hemos visto cómo podemos aprovechar un componente para definir

26
00:01:45,700 --> 00:01:50,420
partes de nuestro diseño para la pantalla de nuestra aplicación.

27
00:01:51,910 --> 00:01:57,610
Como mencioné, hay otros dos tipos de directivas en Angular,

28
00:01:57,610 --> 00:02:00,465
estructurales y directivas de atributos.

29
00:02:00,465 --> 00:02:05,138
Examinaremos rápidamente las directivas estructurales en esta lección.

30
00:02:05,138 --> 00:02:09,359
Y luego veremos las directivas de atributos un poco más adelante en

31
00:02:09,359 --> 00:02:10,290
este curso.

32
00:02:11,400 --> 00:02:15,608
Entonces, ¿qué son las directivas estructurales y cómo son útiles para nosotros?

33
00:02:15,608 --> 00:02:19,590
Lo que nos damos cuenta al usar directivas estructurales es que

34
00:02:19,590 --> 00:02:24,910
nos ayudan a alterar el diseño de nuestro contenido

35
00:02:24,910 --> 00:02:30,020
al ayudarnos a añadir y eliminar elementos del DOM.

36
00:02:30,020 --> 00:02:33,800
En particular, tenga en cuenta el uso del término add y

37
00:02:33,800 --> 00:02:37,460
eliminar y reemplazar elementos en el DOM.

38
00:02:37,460 --> 00:02:41,720
Así que literalmente estás usando las directivas estructurales para manipular

39
00:02:41,720 --> 00:02:44,640
tu DOM de tu página web.

40
00:02:44,640 --> 00:02:51,124
Por lo tanto, puede usar las directivas estructurales aplicándolas a un elemento host,

41
00:02:51,124 --> 00:02:56,738
típicamente un div o un elemento de lista en el DOM y también a sus descendientes.

42
00:02:56,738 --> 00:02:59,435
Ya hemos visto al usuario,

43
00:02:59,435 --> 00:03:04,840
la directiva estructural NGFor, en el ejercicio anterior.

44
00:03:04,840 --> 00:03:11,650
Y vimos cómo usamos el ngFor para recorrer una variedad de platos,

45
00:03:11,650 --> 00:03:17,020
y luego diseñar cada uno de ellos para construir el menú de nuestro restaurante.

46
00:03:18,480 --> 00:03:22,870
Aquí, voy a mencionar brevemente algunas de las directivas estructurales comunes que encontrarán

47
00:03:22,870 --> 00:03:27,180
al escribir su partición angular.

48
00:03:27,180 --> 00:03:31,520
Una de las directivas estructurales más comunes que verá es la directiva nGiF

49
00:03:31,520 --> 00:03:32,620
.

50
00:03:32,620 --> 00:03:40,710
Cuando lo use en la sintaxis de su plantilla, lo escribirá como*nGIF,

51
00:03:40,710 --> 00:03:45,800
así que así es como se usa esta directiva en su DOM.

52
00:03:45,800 --> 00:03:50,973
Entonces, por ejemplo, si aplica la directiva nGIF a un div como

53
00:03:50,973 --> 00:03:56,050
esto en este ejemplo, lo que está especificando dónde es que

54
00:03:56,050 --> 00:04:01,845
si SelectedDish no es nulo, entonces este div se agregará al DOM.

55
00:04:01,845 --> 00:04:05,287
Si ese SelectedDish es nulo, entonces este div,

56
00:04:05,287 --> 00:04:10,053
lo que esté contenido en este div no se agregará al DOM, por lo que

57
00:04:10,053 --> 00:04:15,965
está literalmente eliminando esto del DOM si el valor resulta ser falso.

58
00:04:15,965 --> 00:04:19,800
Si resulta ser cierto, entonces se agrega al volcado.

59
00:04:19,800 --> 00:04:24,280
Del mismo modo, vimos el uso de la directiva ngFor.

60
00:04:24,280 --> 00:04:29,580
Entonces, donde definimos, por ejemplo, para el md-list-item en el anterior ejercicio

61
00:04:29,580 --> 00:04:35,470
dijimos *ngFor y dijimos, dejar plato de platos.

62
00:04:35,470 --> 00:04:40,750
Así que esto nos permite iterar sobre la matriz de platos

63
00:04:40,750 --> 00:04:46,925
que se definen en nuestro tipo script coat.

64
00:04:46,925 --> 00:04:55,570
Otra directiva estructural que podría encontrar un uso común es la directiva ngSwitch.

65
00:04:55,570 --> 00:04:57,840
Aunque no tengo un ejemplo en este momento,

66
00:04:57,840 --> 00:05:02,940
más adelante en este curso encontraremos el uso de la directiva ngSwitch.

67
00:05:02,940 --> 00:05:07,080
Esto le permite agregar selectivamente ciertos elementos al DOM

68
00:05:07,080 --> 00:05:11,940
especificando una condición, dependiendo de lo que se evalúe la condición,

69
00:05:11,940 --> 00:05:17,060
entonces usará uno de esos elementos entre la lista.

70
00:05:17,060 --> 00:05:21,858
Si está familiarizado con la declaración switch de C ++ o Java,

71
00:05:21,858 --> 00:05:25,250
el ngSwitch le parece muy familiar.

72
00:05:25,250 --> 00:05:29,710
Así que actuará similar a la declaración switch a la que

73
00:05:29,710 --> 00:05:32,295
está acostumbrado desde Java o C ++.

74
00:05:32,295 --> 00:05:35,675
Con la breve discusión sobre las directivas estructurales,

75
00:05:35,675 --> 00:05:40,748
pasemos al próximo ejercicio en el que seguiremos examinando los componentes.

76
00:05:40,748 --> 00:05:47,459
[MÚSICA]