1
00:00:03,650 --> 00:00:10,075
Acabamos de tener una breve introducción a las directivas de atributos en la conferencia anterior.

2
00:00:10,075 --> 00:00:16,440
Vamos a construir ahora una directiva de atributos personalizados para nuestra aplicación angular y luego

3
00:00:16,440 --> 00:00:23,025
hacer uso de ella dentro de las vistas de algunos de los componentes dentro de nuestra aplicación angular.

4
00:00:23,025 --> 00:00:26,340
En el camino, aprenderemos acerca de cómo podemos crear directivas personalizadas

5
00:00:26,340 --> 00:00:30,795
y usarlas en nuestra aplicación Angular.

6
00:00:30,795 --> 00:00:36,275
Haremos uso de Angular CLI para crear la directiva personalizada y, a partir de entonces,

7
00:00:36,275 --> 00:00:39,830
la actualizaremos para realizar el tipo de características

8
00:00:39,830 --> 00:00:45,245
que necesitamos proporcionadas por esta directiva de atributos.

9
00:00:45,245 --> 00:00:51,220
Bajo la directiva mantener la directiva en una carpeta separada llamada Directivas,

10
00:00:51,220 --> 00:00:52,700
dentro de mi carpeta de aplicación.

11
00:00:52,700 --> 00:00:56,805
Por lo tanto, permítanme crear una nueva carpeta llamada Directivas.

12
00:00:56,805 --> 00:01:02,820
Ahora, voy a crear mi directiva personalizada dentro de esta carpeta Directivas.

13
00:01:02,820 --> 00:01:07,170
Tomará la ayuda de angular CLI para crear nuestra directiva personalizada.

14
00:01:07,170 --> 00:01:08,495
Entonces, en el prompt,

15
00:01:08,495 --> 00:01:20,400
type ng generate o g detectives/highlight.

16
00:01:20,780 --> 00:01:26,110
Por lo tanto, esta directiva en particular va a ser llamada la directiva más destacada.

17
00:01:26,110 --> 00:01:28,790
Así que con esto, vamos a crear

18
00:01:28,790 --> 00:01:34,460
una nueva directiva llamada la directiva resaltada y luego ahora vamos a ir

19
00:01:34,460 --> 00:01:38,600
y editar los archivos de directiva resaltados que

20
00:01:38,600 --> 00:01:43,175
han sido creados para crear nuestra directiva personalizada.

21
00:01:43,175 --> 00:01:46,895
¿Qué estoy tratando de lograr exactamente con esta directiva?

22
00:01:46,895 --> 00:01:52,910
Déjame llevarte a la vista del menú dentro de nuestra aplicación Angular.

23
00:01:52,910 --> 00:01:54,355
En la vista del menú,

24
00:01:54,355 --> 00:01:58,420
cuando quiero seleccionar cualquiera de estos elementos actualmente,

25
00:01:58,420 --> 00:02:01,495
no tengo ni idea exactamente de dónde estoy.

26
00:02:01,495 --> 00:02:08,520
Ahora en su lugar, cuando mi mouse se desplaza sobre cualquiera de estos elementos en mi lista de cuadrícula,

27
00:02:08,520 --> 00:02:13,340
quiero poder resaltar algún elemento para indicar que si hago clic,

28
00:02:13,340 --> 00:02:15,870
voy a seleccionar ese elemento en particular.

29
00:02:15,870 --> 00:02:19,220
Entonces, eso es lo que la funcionalidad que voy a diseñar

30
00:02:19,220 --> 00:02:23,825
usando mi directiva de resaltado que acabo de crear.

31
00:02:23,825 --> 00:02:28,410
Para hacer eso, vamos a abrir el archivo directive.ts de resaltado.

32
00:02:28,410 --> 00:02:33,935
Así que, verá que tenemos el andamio de huesos desnudos disponible para la directiva

33
00:02:33,935 --> 00:02:36,500
ya aquí y verá que hemos

34
00:02:36,500 --> 00:02:39,845
ya importado el director del código Angular.

35
00:02:39,845 --> 00:02:45,230
Ahora a esto, voy a añadir algunas importaciones más.

36
00:02:45,230 --> 00:02:52,055
Por lo tanto, importaremos ElementRF y luego importaremos Renderer2 aquí.

37
00:02:52,055 --> 00:02:57,215
Ahora Renderer2 sólo está disponible con Angular cuatro y superior.

38
00:02:57,215 --> 00:02:59,710
La versión anterior del renderizador se llamaba

39
00:02:59,710 --> 00:03:04,290
renderush y ahora se ha duplicado con Angular four.

40
00:03:04,290 --> 00:03:06,920
Renderer2 es ahora una nueva implementación de renderizador

41
00:03:06,920 --> 00:03:11,030
con mejor soporte para algunas otras características.

42
00:03:11,030 --> 00:03:18,045
Entonces, voy a aplicar el Renderer2 para crear la directiva de resaltado.

43
00:03:18,045 --> 00:03:20,005
Ahora, ¿por qué usamos este renderizador?

44
00:03:20,005 --> 00:03:23,690
Ahora, cuando crea directivas dentro de su aplicación Angular,

45
00:03:23,690 --> 00:03:25,640
desde su propia aplicación Angular,

46
00:03:25,640 --> 00:03:30,750
aunque en este momento nuestra aplicación Angular se está procesando principalmente en el navegador,

47
00:03:30,750 --> 00:03:33,740
puede usar el mismo código de andamio para

48
00:03:33,740 --> 00:03:37,420
su aplicación Angular para crear una aplicación para otros fines.

49
00:03:37,420 --> 00:03:42,985
En el curso de salto nativo que veremos más adelante en esta especialización,

50
00:03:42,985 --> 00:03:50,385
veremos otro uso de este código para crear aplicaciones usando NativeScript.

51
00:03:50,385 --> 00:03:54,470
Entonces, en ese caso, el renderizado se haría de una manera diferente,

52
00:03:54,470 --> 00:03:56,160
no en un navegador.

53
00:03:56,160 --> 00:04:00,455
Por lo tanto, necesitamos usar este Renderer2,

54
00:04:00,455 --> 00:04:03,710
que nos permite adaptarnos automáticamente a

55
00:04:03,710 --> 00:04:08,120
la plataforma apropiada en la que se está haciendo el renderizado de esta vista.

56
00:04:08,120 --> 00:04:13,320
Entonces, esa es la razón por la que estoy haciendo uso del renderizador aquí.

57
00:04:13,660 --> 00:04:20,460
Además, una cosa más que quiero importar es el HostListener.

58
00:04:20,460 --> 00:04:24,650
El HostListener escuchará los movimientos del ratón desde la pantalla

59
00:04:24,650 --> 00:04:28,755
y responderá adecuadamente en esas circunstancias.

60
00:04:28,755 --> 00:04:34,099
Veremos el uso de estos cuando creamos la directiva en unos momentos.

61
00:04:34,099 --> 00:04:37,010
Así que ahora, que hemos importado las cosas que necesitamos,

62
00:04:37,010 --> 00:04:40,620
vamos a inyectar algunas cosas en nuestro constructor.

63
00:04:40,620 --> 00:04:47,180
Entonces, primero usaremos un el,

64
00:04:47,180 --> 00:04:52,625
que es del tipo ElementF y

65
00:04:52,625 --> 00:04:59,569
también el segundo que usaremos es el renderizador,

66
00:04:59,569 --> 00:05:04,265
que es del tipo Renderer2.

67
00:05:04,265 --> 00:05:11,254
Ahora con esto, lo que vamos a hacer es que usaremos

68
00:05:11,254 --> 00:05:20,360
el HostListener y luego indicarían que para el HostListener,

69
00:05:20,360 --> 00:05:28,094
cuando ocurra el evento mouseenter,

70
00:05:28,094 --> 00:05:38,340
entonces llamaremos al método onmouseenter

71
00:05:38,340 --> 00:05:41,400
y en el método onmouseenter, vamos a hacer algo.

72
00:05:41,400 --> 00:05:43,790
Del mismo modo, crearé otro

73
00:05:43,790 --> 00:05:55,005
llamado HostListener y mouseleave.

74
00:05:55,005 --> 00:05:58,310
Así que cuando el ratón sale de una región en particular,

75
00:05:58,310 --> 00:06:02,790
, entonces, ¿qué vas a hacer en mouseleave?

76
00:06:02,950 --> 00:06:06,470
Vamos a hacer una operación diferente.

77
00:06:06,470 --> 00:06:11,660
Entonces, lo que vamos a hacer es cuando el ratón entre en una región en particular, en este caso,

78
00:06:11,660 --> 00:06:15,710
estamos usando esta directiva de atributos para resaltar

79
00:06:15,710 --> 00:06:22,130
el elemento específico de mi lista de cuadrícula en el que el mouse se ha desplazado.

80
00:06:22,130 --> 00:06:24,935
Entonces, ese es el propósito para implementar estos

81
00:06:24,935 --> 00:06:28,050
y cuando el puntero del mouse se aleja de ese elemento,

82
00:06:28,050 --> 00:06:29,580
eso ya no se resaltará.

83
00:06:29,580 --> 00:06:31,575
Entonces, ese es el propósito de esta directiva,

84
00:06:31,575 --> 00:06:33,850
la directiva más destacada que estoy creando aquí.

85
00:06:33,850 --> 00:06:40,715
Entonces, cuando el ratón entra en un área en particular.

86
00:06:40,715 --> 00:06:47,245
Entonces, voy a usar el renderizador y el renderizador proporciona un método llamado addClass.

87
00:06:47,245 --> 00:06:55,990
Entonces, este método se usará para agregar una clase al elemento de cuadrícula en mi lista de cuadrícula.

88
00:06:55,990 --> 00:06:58,755
Entonces, la clase que voy a agregar,

89
00:06:58,755 --> 00:07:08,160
la forma en que está configurada es dirá this.el.nativeElement y

90
00:07:08,160 --> 00:07:12,260
el segundo parámetro es

91
00:07:12,260 --> 00:07:17,240
el nombre de la clase que va a aplicar cuando se aventura en esa área.

92
00:07:17,240 --> 00:07:21,965
Por lo tanto, aplicaremos esta clase de resaltado a ese elemento cuando

93
00:07:21,965 --> 00:07:27,425
el mouse se mueva a la región donde ese elemento se representa en la vista.

94
00:07:27,425 --> 00:07:34,765
Ahora, lo mismo. Voy a hacer otro método cuando el mouse se vaya,

95
00:07:34,765 --> 00:07:37,200
Eliminaré esa clase.

96
00:07:37,200 --> 00:07:41,275
Por lo tanto, el método RemoveClass también es compatible con Renderer2.

97
00:07:41,275 --> 00:07:42,530
Entonces, en este caso,

98
00:07:42,530 --> 00:07:44,780
cuando el mouse se mueva a esa región,

99
00:07:44,780 --> 00:07:49,270
esta clase de resaltado se agregará a ese elemento de cuadrícula.

100
00:07:49,270 --> 00:07:52,250
Cuando el ratón deja ese elemento de cuadrícula en particular,

101
00:07:52,250 --> 00:07:54,890
la clase de resaltado se eliminará de los elementos de cuadrícula.

102
00:07:54,890 --> 00:07:57,685
Entonces, así es como al usar esta directiva de atributos,

103
00:07:57,685 --> 00:08:00,540
estoy agregando y eliminando clases,

104
00:08:00,540 --> 00:08:06,840
clases CSS a mi elemento de cuadrícula en mi página GridView.

105
00:08:06,840 --> 00:08:12,070
Ahora, el siguiente paso es, por supuesto, crear esta clase llamada como la clase de resaltado.

106
00:08:12,070 --> 00:08:16,535
Entonces, para hacer eso, entraré en el archivo styles.scss

107
00:08:16,535 --> 00:08:21,495
donde tenemos los estilos globales almacenados aquí.

108
00:08:21,495 --> 00:08:23,900
Entonces, dentro del archivo styles.scss,

109
00:08:23,900 --> 00:08:32,385
agregaré allí la clase CSS resaltada.

110
00:08:32,385 --> 00:08:37,340
La clase CSS resaltada que definiré como color de fondo.

111
00:08:37,340 --> 00:08:42,825
Voy a aplicar background-pale,

112
00:08:42,825 --> 00:08:46,810
que ya he definido antes y luego,

113
00:08:46,810 --> 00:08:52,140
Yo aplicaría un borde de un píxel,

114
00:08:52,140 --> 00:08:55,780
borde sólido del color,

115
00:08:55,860 --> 00:09:04,595
primary-color-dark, que también he definido anteriormente

116
00:09:04,595 --> 00:09:13,335
como una variable CSS y también aumentaré el índice z a uno.

117
00:09:13,335 --> 00:09:18,750
Lo que significa que ese artículo se levantará sobre los artículos restantes allí.

118
00:09:18,750 --> 00:09:24,790
Estoy seguro de que por su conocimiento de CSS entiende lo que se está haciendo.

119
00:09:24,790 --> 00:09:31,870
Además, voy a hacer un poco de transformación en el artículo allí,

120
00:09:31,870 --> 00:09:36,495
Sólo voy a escalarlo en una pequeña cantidad,

121
00:09:36,495 --> 00:09:39,570
por escalarlo hasta 1.01.

122
00:09:39,570 --> 00:09:42,220
Así que, un pequeño poco levantado y luego apareció,

123
00:09:42,220 --> 00:09:46,115
para que lo resalta en la pantalla.

124
00:09:46,115 --> 00:09:50,370
Entonces, esta es la clase CSS que

125
00:09:50,370 --> 00:09:54,535
voy a aplicar usando la directiva personalizada que he creado allí.

126
00:09:54,535 --> 00:09:57,530
Ahora, ¿dónde voy a aplicar esta directiva personalizada?

127
00:09:57,530 --> 00:10:04,340
Vamos a utilizar esta directiva personalizada en nuestro archivo de plantilla de componentes de menú.

128
00:10:04,340 --> 00:10:06,170
Ahora, antes de hacer eso,

129
00:10:06,170 --> 00:10:08,840
volvamos a resaltar la directiva y

130
00:10:08,840 --> 00:10:11,610
notarías que en la directiva resaltada,

131
00:10:11,610 --> 00:10:17,555
tienes ese decorador de directivas aquí donde tienes una propiedad llamada selector,

132
00:10:17,555 --> 00:10:20,355
que se ha configurado para resaltar la aplicación.

133
00:10:20,355 --> 00:10:23,360
Por lo tanto, donde quiera usar esta directiva,

134
00:10:23,360 --> 00:10:25,430
usará un atributo llamado

135
00:10:25,430 --> 00:10:30,110
appHighlight dentro de ese elemento particular en su plantilla.

136
00:10:30,110 --> 00:10:33,940
Entonces, así es como se crea esta directiva.

137
00:10:33,940 --> 00:10:36,910
Por lo tanto, vamos a aplicar esta aplicación resaltado atributo

138
00:10:36,910 --> 00:10:41,165
directiva dentro de nuestro archivo de plantilla de componentes de menú.

139
00:10:41,165 --> 00:10:44,749
Entonces, yendo al archivo de plantilla de componentes del menú,

140
00:10:44,749 --> 00:10:50,090
voy a aplicar esa directiva resaltada a este mosaico de rejilla de mat-rejilla aquí.

141
00:10:50,090 --> 00:10:52,330
Entonces, en este mosaico de cuadrícula,

142
00:10:52,330 --> 00:11:01,950
aplicaré esa directiva de atributos AppHighlight a este elemento particular aquí.

143
00:11:01,950 --> 00:11:04,485
Con esto, hemos completado todas las actualizaciones.

144
00:11:04,485 --> 00:11:11,005
Guardemos los cambios y luego vayamos a echar un vistazo a nuestra aplicación después de este cambio.

145
00:11:11,005 --> 00:11:13,680
Ir a nuestra aplicación en el navegador.

146
00:11:13,680 --> 00:11:20,270
Ahora, con la aplicación de la directiva AppHighlight que acabamos de crear,

147
00:11:20,270 --> 00:11:27,050
notará exactamente lo que sucede cuando navegamos hacia un elemento en nuestra vista de menú aquí.

148
00:11:27,050 --> 00:11:32,010
Por lo tanto, nota que cada vez que pasa el cursor sobre un elemento en la vista,

149
00:11:32,010 --> 00:11:36,770
la clase CSS resaltada se está aplicando a cada uno de ellos,

150
00:11:36,770 --> 00:11:41,150
por lo que qué elemento en particular se está resaltando en el menú,

151
00:11:41,150 --> 00:11:46,270
para que esto proporcione una mejor experiencia de usuario para el usuario.

152
00:11:46,270 --> 00:11:50,719
Se puede ver que el tamaño de ese elemento es cada vez tan ligeramente aumentado

153
00:11:50,719 --> 00:11:55,840
y presentado en la vista aquí.

154
00:11:55,840 --> 00:11:58,910
Esto completa la implementación de

155
00:11:58,910 --> 00:12:03,470
la directiva de atributos personalizados que hicimos en este ejercicio.

156
00:12:03,470 --> 00:12:09,810
Este es un buen momento para que hagas un commit de git con la directiva de mensajes.