1
00:00:04,010 --> 00:00:09,440
Antes de comenzar con formularios basados en plantillas angulares,

2
00:00:09,440 --> 00:00:15,165
necesitamos encontrar una forma de superponer contenido en la parte superior de la vista web actual.

3
00:00:15,165 --> 00:00:21,935
El Bootstrap, tenemos modelos que nos permiten superponer contenido en la parte superior de la página Web.

4
00:00:21,935 --> 00:00:26,700
Con el uso de material Angular en nuestra aplicación Angular,

5
00:00:26,700 --> 00:00:29,970
el material Angular proporciona un componente llamado

6
00:00:29,970 --> 00:00:32,820
el Componente Angular Dialogue que le permite

7
00:00:32,820 --> 00:00:35,865
superponer contenido en la parte superior de la vista actual.

8
00:00:35,865 --> 00:00:42,010
Veamos cómo utilizamos el Componente de Diálogo en este ejercicio.

9
00:00:42,080 --> 00:00:45,470
Para empezar con este ejercicio,

10
00:00:45,470 --> 00:00:49,580
vamos a nuestro código y necesitamos encontrar

11
00:00:49,580 --> 00:00:54,230
una forma de activar la aplicación para mostrar el diálogo.

12
00:00:54,230 --> 00:00:58,620
Entonces, para hacer eso, agregemos un botón a nuestra barra de herramientas aquí.

13
00:00:58,620 --> 00:01:01,475
Así que, yendo a la barra de herramientas justo en la parte superior aquí,

14
00:01:01,475 --> 00:01:10,790
déjame agregar un lapso con el espaciador flex de clase que

15
00:01:10,790 --> 00:01:18,340
hemos introducido en nuestro archivo SCSS

16
00:01:18,340 --> 00:01:21,650
para nuestra aplicación.

17
00:01:21,650 --> 00:01:29,170
Entonces, habíamos introducido el espaciador flexor en el archivo styles.scss aquí,

18
00:01:29,170 --> 00:01:30,840
justo abajo aquí.

19
00:01:30,840 --> 00:01:34,240
Entonces, esa es la clase que vamos a usar con un lapso aquí.

20
00:01:34,240 --> 00:01:37,035
Entonces, cuando se aplica el espaciador flexor al span,

21
00:01:37,035 --> 00:01:40,670
lo que hace es que proporciona suficiente espacio entre

22
00:01:40,670 --> 00:01:45,670
el elemento anterior y el elemento que sigue aquí.

23
00:01:45,670 --> 00:01:49,280
Por lo tanto, empujará cualquier elemento que siga el lapso a

24
00:01:49,280 --> 00:01:53,030
el borde más derecho de la pantalla en la medida de lo posible.

25
00:01:53,030 --> 00:01:54,985
Así que, aquí, después de esto,

26
00:01:54,985 --> 00:01:57,500
déjame agregar un botón aquí.

27
00:01:57,500 --> 00:02:02,755
Por lo tanto, este botón que al hacer clic

28
00:02:02,755 --> 00:02:09,635
invocará una función llamada OpenLogForms.

29
00:02:09,635 --> 00:02:11,660
Así que, como te das cuenta,

30
00:02:11,660 --> 00:02:17,865
así que aquí es donde vamos a apoyar un formulario para nuestra solicitud.

31
00:02:17,865 --> 00:02:22,475
Veremos cómo se desarrolla el formulario en el próximo ejercicio.

32
00:02:22,475 --> 00:02:25,330
Ahora, para esto, permítanme agregar en

33
00:02:25,330 --> 00:02:33,120
los iconos impresionantes de la fuente correspondiente.

34
00:02:33,120 --> 00:02:38,950
Así que, voy a decir fa fa-sign-in,

35
00:02:42,290 --> 00:02:50,010
y también añadir en fa-lg a eso.

36
00:02:50,010 --> 00:02:52,875
Así que, eso agregará en un icono,

37
00:02:52,875 --> 00:02:54,645
el icono de inicio de sesión aquí,

38
00:02:54,645 --> 00:02:55,880
y luego siguiendo esto,

39
00:02:55,880 --> 00:02:58,690
pondremos la palabra login allí.

40
00:02:58,690 --> 00:03:05,980
Por lo tanto, esto creará un botón llamado login en la barra de herramientas

41
00:03:05,980 --> 00:03:14,070
en el borde derecho de la pantalla junto con el icono de inicio de sesión allí,

42
00:03:14,070 --> 00:03:16,960
que al hacer clic, abrirá un formulario de inicio de sesión.

43
00:03:16,960 --> 00:03:22,670
Este formulario de inicio de sesión se alojará dentro de un componente de diálogo material.

44
00:03:22,670 --> 00:03:26,204
Ahora, para crear un componente de diálogo, obviamente,

45
00:03:26,204 --> 00:03:29,330
nos damos cuenta de que ese va a ser un componente que

46
00:03:29,330 --> 00:03:32,270
necesita ser superpuesto en la parte superior de la vista actual allí.

47
00:03:32,270 --> 00:03:36,770
Por lo tanto, necesitamos otro componente para ser añadido a nuestra aplicación.

48
00:03:36,770 --> 00:03:44,095
Entonces, vayamos a la terminal y luego añadamos un componente más a nuestra aplicación.

49
00:03:44,095 --> 00:03:50,735
Al ir a la terminal, déjame escribir ng g componente de inicio de sesión.

50
00:03:50,735 --> 00:03:55,725
Por lo tanto, hemos añadido un nuevo componente llamado como el componente de inicio de sesión a nuestra aplicación.

51
00:03:55,725 --> 00:03:57,725
Una vez añadido el componente de inicio de sesión,

52
00:03:57,725 --> 00:04:04,490
vamos a ir y configurar el componente de inicio de sesión para que sea un componente de diálogo en nuestra aplicación.

53
00:04:04,490 --> 00:04:08,305
Entonces, para hacer eso, volvamos a nuestro código.

54
00:04:08,305 --> 00:04:10,215
Volviendo a nuestro código,

55
00:04:10,215 --> 00:04:13,715
ahora vemos que el componente de inicio de sesión ya está abierto.

56
00:04:13,715 --> 00:04:16,445
Déjame abrir el archivo component.ts de inicio de sesión.

57
00:04:16,445 --> 00:04:18,935
Por lo tanto, configure esto como

58
00:04:18,935 --> 00:04:24,485
un componente de diálogo en la aplicación Angular utilizando el componente de diálogo material.

59
00:04:24,485 --> 00:04:30,385
Déjame importar MatDialog.

60
00:04:30,385 --> 00:04:32,540
Entonces, este es el componente que soporta

61
00:04:32,540 --> 00:04:39,480
el componente de diálogo en material angular y luego también

62
00:04:39,600 --> 00:04:45,545
déjame importar MatDialogRef y estos se importan

63
00:04:45,545 --> 00:04:52,420
desde material angular aquí.

64
00:04:53,140 --> 00:05:03,750
Esto nos permitirá crear nuestro componente y convertirlo en un componente de diálogo.

65
00:05:03,750 --> 00:05:10,030
Ahora, después de esto, vamos a seguir adelante y luego configurar nuestro archivo de plantilla aquí.

66
00:05:10,030 --> 00:05:11,940
Entonces, yendo al archivo de plantilla aquí,

67
00:05:11,940 --> 00:05:16,300
voy a crear esto como diciendo mat-toolbar.

68
00:05:16,300 --> 00:05:22,330
Por lo tanto, dentro de este diálogo también voy a mostrar una barra de herramientas.

69
00:05:25,350 --> 00:05:34,065
Para esta barra de herramientas, voy a decir login justo en la parte superior, a continuación,

70
00:05:34,065 --> 00:05:43,920
vamos a introducir la clase espaciador flex

71
00:05:43,920 --> 00:05:49,350
aquí y luego después de la clase espaciador flex,

72
00:05:49,350 --> 00:05:53,169
vamos a añadir en un botón

73
00:05:54,590 --> 00:06:04,385
con los atributos mat-button mat-dialog-close.

74
00:06:04,385 --> 00:06:09,850
Por lo tanto, este mat-dialog-close es algo que los componentes del diálogo apoyan para nosotros,

75
00:06:09,850 --> 00:06:13,490
este atributo que convierte este botón en

76
00:06:13,490 --> 00:06:18,255
un botón que cuando se hace clic cerrará este diálogo allí.

77
00:06:18,255 --> 00:06:26,740
Dentro de este botón, voy a usar una vez allí.

78
00:06:26,740 --> 00:06:30,600
Entonces, eso lo mostrará como una cruz en la pantalla allí.

79
00:06:30,600 --> 00:06:33,110
Entonces, ese es el botón que añadiremos al diálogo.

80
00:06:33,110 --> 00:06:38,855
En este momento, nuestro diálogo sólo contiene esto en su opinión.

81
00:06:38,855 --> 00:06:44,870
Ahora, para que podamos incluir el componente de diálogo y hacer uso de él,

82
00:06:44,870 --> 00:06:47,350
por supuesto, tenemos que ir al módulo de aplicación.

83
00:06:47,350 --> 00:06:49,030
En el módulo de aplicación,

84
00:06:49,030 --> 00:06:59,190
tenemos que importar el módulo correspondiente que soporta el componente de diálogo.

85
00:06:59,190 --> 00:07:02,765
Por lo tanto, vamos a importar el MatDialogueModule

86
00:07:02,765 --> 00:07:10,200
del cuadro de diálogo Material angular.

87
00:07:10,200 --> 00:07:20,300
Por lo tanto, esto agregará en el módulo de diálogo a nuestra aplicación y luego, como usted espera,

88
00:07:20,300 --> 00:07:25,070
tendrán que bajar aquí en las importaciones y luego importar

89
00:07:25,070 --> 00:07:30,515
ese módulo de diálogo en nuestra aplicación.

90
00:07:30,515 --> 00:07:32,735
No solo esto, ahora,

91
00:07:32,735 --> 00:07:38,575
para convertir un componente angular en un componente de diálogo,

92
00:07:38,575 --> 00:07:44,330
también necesitamos declarar ese componente como componente de entrada.

93
00:07:44,330 --> 00:07:49,310
Ahora, recuerde que agregamos en el componente de inicio de sesión a nuestra aplicación y por lo tanto

94
00:07:49,310 --> 00:07:51,920
este componente de inicio de sesión ya está agregado allí y

95
00:07:51,920 --> 00:07:54,845
luego también se incluye en las declaraciones.

96
00:07:54,845 --> 00:08:02,255
Ahora, si desea usar eso como una superposición con el componente de diálogo material,

97
00:08:02,255 --> 00:08:08,285
también necesitamos incluirlo en otra propiedad llamada como componentes de entrada

98
00:08:08,285 --> 00:08:17,460
en nuestro decorador de módulo ng aquí.

99
00:08:17,460 --> 00:08:19,715
Entonces, dentro de estos componentes de entrada,

100
00:08:19,715 --> 00:08:23,810
también necesito incluir el componente de inicio de sesión aquí.

101
00:08:23,810 --> 00:08:26,000
Ahora, esto nos permitirá usar

102
00:08:26,000 --> 00:08:30,235
el componente de inicio de sesión como una superposición en la parte superior de la pantalla actual.

103
00:08:30,235 --> 00:08:35,330
Así que, una vez que hayamos actualizado el componente de material angular,

104
00:08:35,330 --> 00:08:39,370
ahora, necesitamos poder activar este componente de inicio de sesión.

105
00:08:39,370 --> 00:08:42,530
Ahora, hemos añadido en el botón en

106
00:08:42,530 --> 00:08:47,240
el componente de encabezado y luego aquí tenemos esta función llamada formulario de inicio de sesión abierto.

107
00:08:47,240 --> 00:08:51,770
Por lo tanto, esto necesita activar la demostración del diálogo.

108
00:08:51,770 --> 00:08:56,350
Entonces, entrando en el archivo component.ts de encabezado,

109
00:08:57,410 --> 00:09:04,350
para hacer uso del componente de diálogo mat en el componente de encabezado,

110
00:09:04,350 --> 00:09:12,420
déjame importar MatDialog y luego

111
00:09:12,420 --> 00:09:22,605
MatDialogRef del material angular.

112
00:09:22,605 --> 00:09:26,745
Dentro de esta función, en el constructor,

113
00:09:26,745 --> 00:09:28,575
déjame inyectar

114
00:09:28,575 --> 00:09:37,365
el diálogo como MatDialog.

115
00:09:37,365 --> 00:09:43,680
Por lo tanto, este es un servicio que nos permite abrir el componente como un componente de diálogo.

116
00:09:43,680 --> 00:09:45,615
Ahora, ¿cómo funciona esto?

117
00:09:45,615 --> 00:09:50,039
Por lo tanto, aquí, tenemos que agregar en esta función llamada OpenLoginForm,

118
00:09:52,090 --> 00:09:57,610
que cuando se invoca debería activar la visualización del componente de diálogo.

119
00:09:57,610 --> 00:10:00,894
Entonces, para esto, diremos, este diálogo,

120
00:10:00,894 --> 00:10:03,860
y este diálogo soporta una función llamada

121
00:10:03,860 --> 00:10:09,395
abierta a la que suministramos el componente que va a

122
00:10:09,395 --> 00:10:18,170
actuar como la vista para el diálogo que se superpone en la parte superior de la vista web actual.

123
00:10:18,170 --> 00:10:22,415
Así que, aquí, como nos damos cuenta,

124
00:10:22,415 --> 00:10:28,475
hemos declarado el componente de inicio de sesión como el componente de diálogo.

125
00:10:28,475 --> 00:10:33,740
Por lo tanto, invocaremos el componente de inicio de sesión

126
00:10:33,740 --> 00:10:39,670
y luego también especificaremos un tamaño para el diálogo.

127
00:10:39,670 --> 00:10:40,910
Si lo desea,

128
00:10:40,910 --> 00:10:44,089
puede permitir que se muestre el tamaño predeterminado,

129
00:10:44,089 --> 00:10:47,610
pero también puede configurar el tamaño explícitamente si lo desea.

130
00:10:47,610 --> 00:10:48,620
Así que, en este caso,

131
00:10:48,620 --> 00:10:57,960
permítanme configurar el ancho y la altura de este diálogo.

132
00:11:02,370 --> 00:11:05,960
No necesariamente tiene que hacer esto, si no lo hace,

133
00:11:05,960 --> 00:11:11,990
entonces el diálogo se mostrará en el tamaño predeterminado estándar aquí.

134
00:11:11,990 --> 00:11:16,550
Entonces, con esto, mi componente de encabezado

135
00:11:16,550 --> 00:11:20,490
ahora está configurado de tal manera que cuando se invoca el formulario de inicio de sesión abierto,

136
00:11:20,490 --> 00:11:23,765
entonces esto nos permitirá abrir

137
00:11:23,765 --> 00:11:28,835
el componente de inicio de sesión como un diálogo y luego mostrarlo en la parte superior de la cadena actual.

138
00:11:28,835 --> 00:11:32,090
Así que, vamos a guardar todos los cambios y luego ir a echar

139
00:11:32,090 --> 00:11:35,605
un vistazo a nuestra aplicación en el navegador.

140
00:11:35,605 --> 00:11:40,310
Al ir al navegador, ahora verás que en el borde derecho de la pantalla,

141
00:11:40,310 --> 00:11:43,010
tenemos otro nuevo botón aquí llamado el botón de inicio de sesión,

142
00:11:43,010 --> 00:11:47,085
y verás que el icono impresionante de la fuente de inicio de sesión añadido a eso.

143
00:11:47,085 --> 00:11:49,560
Ahora, cuando haga clic en el botón de inicio de sesión,

144
00:11:49,560 --> 00:11:53,995
verá inmediatamente un diálogo emergente en la pantalla.

145
00:11:53,995 --> 00:11:58,610
De nuevo, puede descartar eso haciendo clic en cualquier lugar de la pantalla fuera de

146
00:11:58,610 --> 00:12:03,225
el diálogo o haga clic en eso y luego el diálogo aparece en la pantalla.

147
00:12:03,225 --> 00:12:06,840
Entonces, desde Bootstrap, has visto el modal en Bootstrap.

148
00:12:06,840 --> 00:12:10,485
Entonces, esto es exactamente como el modal de Bootstrap.

149
00:12:10,485 --> 00:12:13,645
Así que, aquí, tenemos el diálogo que aparece en la pantalla.

150
00:12:13,645 --> 00:12:17,720
Ahora, tenemos espacio en el diálogo donde ahora podemos poner

151
00:12:17,720 --> 00:12:22,790
en contenido que necesitamos mostrar cuando se invoca este diálogo.

152
00:12:22,790 --> 00:12:26,120
También tenga en cuenta este botón de descartar aquí.

153
00:12:26,120 --> 00:12:27,260
Así que, cuando haces clic en eso,

154
00:12:27,260 --> 00:12:29,030
el diálogo también se descarta.

155
00:12:29,030 --> 00:12:31,535
Ahora, cuando hace clic en cualquier lugar del diálogo,

156
00:12:31,535 --> 00:12:36,320
no sucede nada, pero cuando hace clic en este botón, el diálogo se descarta.

157
00:12:36,320 --> 00:12:43,340
Entonces, así es como funciona el componente de diálogo de material angular en nuestra aplicación.

158
00:12:43,340 --> 00:12:50,005
El siguiente paso es agregar el formulario de inicio de sesión a este cuadro de diálogo.

159
00:12:50,005 --> 00:12:53,365
Con esto, completamos este ejercicio.

160
00:12:53,365 --> 00:12:58,250
En este ejercicio, usted ha visto cómo podemos hacer uso del cuadro de diálogo Material angular a

161
00:12:58,250 --> 00:13:04,575
agregar una superposición a nuestra aplicación y luego mostrarla en la parte superior de la vista actual.

162
00:13:04,575 --> 00:13:07,610
Vamos a añadir en el formulario a esto.

163
00:13:07,610 --> 00:13:13,770
Este es un buen momento para que hagas una confirmación de Git con los diálogos de mensajes.