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

2
00:00:04,549 --> 00:00:08,557
En el primer módulo revisamos brevemente las directivas y

3
00:00:08,557 --> 00:00:11,590
examinamos las directivas estructurales.

4
00:00:11,590 --> 00:00:15,410
Vimos cómo las directivas estructurales nos permiten diseñar las plantillas.

5
00:00:15,410 --> 00:00:17,880
Para nuestros componentes angulares.

6
00:00:17,880 --> 00:00:21,160
En esta lección, vamos a revisar las directivas de atributos.

7
00:00:21,160 --> 00:00:23,770
El tercer tipo de directiva.

8
00:00:23,770 --> 00:00:28,790
Y también veremos cómo podemos diseñar una directiva personalizada

9
00:00:28,790 --> 00:00:31,350
en el ejercicio que sigue a esta conferencia.

10
00:00:33,240 --> 00:00:37,490
Así que como nos dimos cuenta, las directivas son una forma

11
00:00:37,490 --> 00:00:42,360
de diseñar ambas plantillas angulares y nos permiten hacer

12
00:00:42,360 --> 00:00:47,820
varias partes de la manipulación de la presa con vistas de aplicaciones angulares R.

13
00:00:47,820 --> 00:00:53,280
Entonces, vimos el uso de directivas para dar instrucciones a la repetición angular y

14
00:00:53,280 --> 00:00:56,750
cómo renderizar las plantillas en el DOM.

15
00:00:56,750 --> 00:01:01,090
Y ya hemos aprendido que dentro de la aplicación Angular,

16
00:01:01,090 --> 00:01:06,020
el uso de directivas estructurales en las plantillas nos permite diseñar

17
00:01:06,020 --> 00:01:10,080
nuestras vistas de nuestra aplicación Angular.

18
00:01:10,080 --> 00:01:15,060
También aprendimos que el componente que hemos utilizado tanto

19
00:01:15,060 --> 00:01:20,640
extensamente en los diversos ejercicios de este curso.

20
00:01:20,640 --> 00:01:26,410
Es un tipo especial de directiva que tiene una plantilla o una vista adjunta a ella.

21
00:01:27,430 --> 00:01:29,560
Y también aprendimos anteriormente que

22
00:01:29,560 --> 00:01:35,330
hay otros dos tipos de directivas que podemos usar dentro de nuestras plantillas.

23
00:01:35,330 --> 00:01:39,390
Las directivas estructurales y las directivas de atributos.

24
00:01:39,390 --> 00:01:44,060
Hemos analizado algunas directivas estructurales incorporadas en el primer módulo

25
00:01:44,060 --> 00:01:46,990
de este curso.

26
00:01:46,990 --> 00:01:52,380
Y vimos cómo podemos usar directivas estructurales como el NG4 o el NGF y

27
00:01:52,380 --> 00:01:59,060
más en esos ejercicios en las partes anteriores de este curso.

28
00:01:59,060 --> 00:02:04,230
Ahora veremos el otro tipo de directiva, la directiva de atributos.

29
00:02:04,230 --> 00:02:05,630
¿Qué es una directiva de atributos y

30
00:02:05,630 --> 00:02:10,360
cómo nos ayuda a la hora de diseñar nuestra aplicación Angular?

31
00:02:10,360 --> 00:02:12,650
Entonces, ¿qué son las directivas de atributos?

32
00:02:12,650 --> 00:02:18,790
Las directivas de atributos se utilizan como atributos para los elementos de la plantilla.

33
00:02:18,790 --> 00:02:23,460
Así que al igual que tienes tu código HTML que escribes dentro de tu plantilla y

34
00:02:23,460 --> 00:02:26,900
los elementos HTML puedes aplicar una directiva de atributo

35
00:02:26,900 --> 00:02:28,410
a esos elementos HTML.

36
00:02:28,410 --> 00:02:31,940
También vimos la directiva estructural del usuario.

37
00:02:31,940 --> 00:02:37,020
Y vimos que los componentes pueden agregar elementos

38
00:02:37,020 --> 00:02:41,710
adicionales como HTML que se pueden usar dentro de las plantillas de su aplicación Angular.

39
00:02:41,710 --> 00:02:45,510
Así que la forma en que usamos los componentes con sus selectores

40
00:02:45,510 --> 00:02:49,850
fue una forma en que usamos directivas dentro de nuestra aplicación Angular.

41
00:02:49,850 --> 00:02:53,910
Cuando vimos el uso de directivas estructurales que se aplicaron a

42
00:02:53,910 --> 00:02:58,890
los diversos elementos HTML dentro de nuestra plantilla.

43
00:02:58,890 --> 00:03:02,590
Ahora nos fijamos en las directivas de atributos que nos permiten cambiar

44
00:03:02,590 --> 00:03:06,930
ciertas propiedades de nuestros elementos HTML.

45
00:03:06,930 --> 00:03:09,480
Entonces, ¿cuál es el uso de las directivas de atributos?

46
00:03:09,480 --> 00:03:15,480
Las directivas de atributos escuchan y modifican el comportamiento de otros elementos HTML o

47
00:03:15,480 --> 00:03:21,410
atributos o propiedades o componentes que se utilizan dentro de las plantillas.

48
00:03:21,410 --> 00:03:25,630
De hecho, hemos usado ya parte de la directiva de atributos

49
00:03:25,630 --> 00:03:30,500
incorporada sin hablar explícitamente de ellos.

50
00:03:30,500 --> 00:03:34,880
Hablando de las directivas de atributos incorporadas que vienen como parte de su marco angular

51
00:03:34,880 --> 00:03:36,260
.

52
00:03:36,260 --> 00:03:41,390
Ya has encontrado el modelo Ng en algunas de las lecciones anteriores

53
00:03:41,390 --> 00:03:46,410
en este curso, específicamente en el área de enlace de datos y

54
00:03:46,410 --> 00:03:52,620
también cuando estudiamos sobre las fuentes en el módulo anterior.

55
00:03:52,620 --> 00:03:55,520
Hay otros dos tipos de directivas de atributos incorporadas que

56
00:03:55,520 --> 00:03:59,180
podríamos encontrar es ngClass y ngStyle.

57
00:03:59,180 --> 00:04:03,430
Por el nombre mismo se puede adivinar cuál es su propósito.

58
00:04:03,430 --> 00:04:07,600
Del mismo modo, hay algunos otros módulos que usa dentro de sus aplicaciones Angular

59
00:04:07,600 --> 00:04:13,190
como el FormsModule y también el RouterModule que tienen su propio conjunto

60
00:04:13,190 --> 00:04:18,245
de directivas de atributos incorporadas que hacemos uso de.

61
00:04:18,245 --> 00:04:22,865
De hecho, ya hemos hecho uso de ellos cuando definimos formas y

62
00:04:22,865 --> 00:04:28,645
también el uso del router dentro de nuestra aplicación Angular anteriormente.

63
00:04:28,645 --> 00:04:33,005
Ahora, en este punto, puede que se pregunte, ¿cómo voy a crear mi propia directiva de atributos

64
00:04:33,005 --> 00:04:37,985
si estoy interesado en crear una directiva personalizada, así que

65
00:04:37,985 --> 00:04:44,950
aquí es donde veremos cómo puede derivar una directiva personalizada.

66
00:04:44,950 --> 00:04:50,470
Exploremos brevemente las directivas personalizadas en la siguiente diapositiva y

67
00:04:50,470 --> 00:04:53,040
en el ejercicio que sigue.

68
00:04:53,040 --> 00:04:57,280
Así que en las directivas personalizadas su expectativa es que usted sería capaz de implementar

69
00:04:57,280 --> 00:04:58,990
lo que le interesa.

70
00:04:58,990 --> 00:05:03,310
En particular, así que aquí es donde podemos crear nuestras propias directivas personalizadas.

71
00:05:03,310 --> 00:05:08,660
Usando la CLI angular, puede descifrar el código de huesos desnudos para una directiva

72
00:05:08,660 --> 00:05:13,130
y posteriormente modificar ese código para implementar su directiva personalizada.

73
00:05:13,130 --> 00:05:17,860
Entonces, cuando implementa una directiva personalizada usando Angular CLI,

74
00:05:17,860 --> 00:05:19,920
creará una directiva para usted.

75
00:05:19,920 --> 00:05:24,490
Y entonces usted notará inmediatamente que dentro de la directiva,

76
00:05:24,490 --> 00:05:29,880
usarás esa clase

77
00:05:29,880 --> 00:05:35,290
decoradora de directivas con el fin de convertir la clase en una directiva y

78
00:05:35,290 --> 00:05:39,410
nos encontraremos con una en el ejercicio que sigue.

79
00:05:39,410 --> 00:05:45,120
Además, con el director, especialmente cuando estás usando directivas de atributos y

80
00:05:45,120 --> 00:05:50,490
quieres modificar cualquiera de los elementos que se usan dentro de tus plantillas.

81
00:05:50,490 --> 00:05:55,560
Otra clase que es útil para nosotros se llama ElementEF.

82
00:05:55,560 --> 00:06:00,740
Esto también es importante desde el código angular, y esto se inyecta en su constructor de directivas

83
00:06:00,740 --> 00:06:06,130
, escrito su clase directiva.

84
00:06:06,130 --> 00:06:10,940
Y luego esto le permite acceder a los elementos DOM y

85
00:06:10,940 --> 00:06:13,580
luego hacer modificaciones en ellos.

86
00:06:13,580 --> 00:06:18,137
Así que con esta rápida comprensión de cómo puede crear directivas personalizadas,

87
00:06:18,137 --> 00:06:22,351
veamos un ejemplo en el ejercicio que sigue a esta conferencia.

88
00:06:22,351 --> 00:06:28,469
[MÚSICA]