Antes de comenzar con formularios basados en plantillas angulares,
necesitamos encontrar una forma de superponer contenido en la parte superior de la vista web actual.
El Bootstrap, tenemos modelos que nos permiten superponer contenido en la parte superior de la página Web.
Con el uso de material Angular en nuestra aplicación Angular,
el material Angular proporciona un componente llamado
el Componente Angular Dialogue que le permite
superponer contenido en la parte superior de la vista actual.
Veamos cómo utilizamos el Componente de Diálogo en este ejercicio.
Para empezar con este ejercicio,
vamos a nuestro código y necesitamos encontrar
una forma de activar la aplicación para mostrar el diálogo.
Entonces, para hacer eso, agregemos un botón a nuestra barra de herramientas aquí.
Así que, yendo a la barra de herramientas justo en la parte superior aquí,
déjame agregar un lapso con el espaciador flex de clase que
hemos introducido en nuestro archivo SCSS
para nuestra aplicación.
Entonces, habíamos introducido el espaciador flexor en el archivo styles.scss aquí,
justo abajo aquí.
Entonces, esa es la clase que vamos a usar con un lapso aquí.
Entonces, cuando se aplica el espaciador flexor al span,
lo que hace es que proporciona suficiente espacio entre
el elemento anterior y el elemento que sigue aquí.
Por lo tanto, empujará cualquier elemento que siga el lapso a
el borde más derecho de la pantalla en la medida de lo posible.
Así que, aquí, después de esto,
déjame agregar un botón aquí.
Por lo tanto, este botón que al hacer clic
invocará una función llamada OpenLogForms.
Así que, como te das cuenta,
así que aquí es donde vamos a apoyar un formulario para nuestra solicitud.
Veremos cómo se desarrolla el formulario en el próximo ejercicio.
Ahora, para esto, permítanme agregar en
los iconos impresionantes de la fuente correspondiente.
Así que, voy a decir fa fa-sign-in,
y también añadir en fa-lg a eso.
Así que, eso agregará en un icono,
el icono de inicio de sesión aquí,
y luego siguiendo esto,
pondremos la palabra login allí.
Por lo tanto, esto creará un botón llamado login en la barra de herramientas
en el borde derecho de la pantalla junto con el icono de inicio de sesión allí,
que al hacer clic, abrirá un formulario de inicio de sesión.
Este formulario de inicio de sesión se alojará dentro de un componente de diálogo material.
Ahora, para crear un componente de diálogo, obviamente,
nos damos cuenta de que ese va a ser un componente que
necesita ser superpuesto en la parte superior de la vista actual allí.
Por lo tanto, necesitamos otro componente para ser añadido a nuestra aplicación.
Entonces, vayamos a la terminal y luego añadamos un componente más a nuestra aplicación.
Al ir a la terminal, déjame escribir ng g componente de inicio de sesión.
Por lo tanto, hemos añadido un nuevo componente llamado como el componente de inicio de sesión a nuestra aplicación.
Una vez añadido el componente de inicio de sesión,
vamos a ir y configurar el componente de inicio de sesión para que sea un componente de diálogo en nuestra aplicación.
Entonces, para hacer eso, volvamos a nuestro código.
Volviendo a nuestro código,
ahora vemos que el componente de inicio de sesión ya está abierto.
Déjame abrir el archivo component.ts de inicio de sesión.
Por lo tanto, configure esto como
un componente de diálogo en la aplicación Angular utilizando el componente de diálogo material.
Déjame importar MatDialog.
Entonces, este es el componente que soporta
el componente de diálogo en material angular y luego también
déjame importar MatDialogRef y estos se importan
desde material angular aquí.
Esto nos permitirá crear nuestro componente y convertirlo en un componente de diálogo.
Ahora, después de esto, vamos a seguir adelante y luego configurar nuestro archivo de plantilla aquí.
Entonces, yendo al archivo de plantilla aquí,
voy a crear esto como diciendo mat-toolbar.
Por lo tanto, dentro de este diálogo también voy a mostrar una barra de herramientas.
Para esta barra de herramientas, voy a decir login justo en la parte superior, a continuación,
vamos a introducir la clase espaciador flex
aquí y luego después de la clase espaciador flex,
vamos a añadir en un botón
con los atributos mat-button mat-dialog-close.
Por lo tanto, este mat-dialog-close es algo que los componentes del diálogo apoyan para nosotros,
este atributo que convierte este botón en
un botón que cuando se hace clic cerrará este diálogo allí.
Dentro de este botón, voy a usar una vez allí.
Entonces, eso lo mostrará como una cruz en la pantalla allí.
Entonces, ese es el botón que añadiremos al diálogo.
En este momento, nuestro diálogo sólo contiene esto en su opinión.
Ahora, para que podamos incluir el componente de diálogo y hacer uso de él,
por supuesto, tenemos que ir al módulo de aplicación.
En el módulo de aplicación,
tenemos que importar el módulo correspondiente que soporta el componente de diálogo.
Por lo tanto, vamos a importar el MatDialogueModule
del cuadro de diálogo Material angular.
Por lo tanto, esto agregará en el módulo de diálogo a nuestra aplicación y luego, como usted espera,
tendrán que bajar aquí en las importaciones y luego importar
ese módulo de diálogo en nuestra aplicación.
No solo esto, ahora,
para convertir un componente angular en un componente de diálogo,
también necesitamos declarar ese componente como componente de entrada.
Ahora, recuerde que agregamos en el componente de inicio de sesión a nuestra aplicación y por lo tanto
este componente de inicio de sesión ya está agregado allí y
luego también se incluye en las declaraciones.
Ahora, si desea usar eso como una superposición con el componente de diálogo material,
también necesitamos incluirlo en otra propiedad llamada como componentes de entrada
en nuestro decorador de módulo ng aquí.
Entonces, dentro de estos componentes de entrada,
también necesito incluir el componente de inicio de sesión aquí.
Ahora, esto nos permitirá usar
el componente de inicio de sesión como una superposición en la parte superior de la pantalla actual.
Así que, una vez que hayamos actualizado el componente de material angular,
ahora, necesitamos poder activar este componente de inicio de sesión.
Ahora, hemos añadido en el botón en
el componente de encabezado y luego aquí tenemos esta función llamada formulario de inicio de sesión abierto.
Por lo tanto, esto necesita activar la demostración del diálogo.
Entonces, entrando en el archivo component.ts de encabezado,
para hacer uso del componente de diálogo mat en el componente de encabezado,
déjame importar MatDialog y luego
MatDialogRef del material angular.
Dentro de esta función, en el constructor,
déjame inyectar
el diálogo como MatDialog.
Por lo tanto, este es un servicio que nos permite abrir el componente como un componente de diálogo.
Ahora, ¿cómo funciona esto?
Por lo tanto, aquí, tenemos que agregar en esta función llamada OpenLoginForm,
que cuando se invoca debería activar la visualización del componente de diálogo.
Entonces, para esto, diremos, este diálogo,
y este diálogo soporta una función llamada
abierta a la que suministramos el componente que va a
actuar como la vista para el diálogo que se superpone en la parte superior de la vista web actual.
Así que, aquí, como nos damos cuenta,
hemos declarado el componente de inicio de sesión como el componente de diálogo.
Por lo tanto, invocaremos el componente de inicio de sesión
y luego también especificaremos un tamaño para el diálogo.
Si lo desea,
puede permitir que se muestre el tamaño predeterminado,
pero también puede configurar el tamaño explícitamente si lo desea.
Así que, en este caso,
permítanme configurar el ancho y la altura de este diálogo.
No necesariamente tiene que hacer esto, si no lo hace,
entonces el diálogo se mostrará en el tamaño predeterminado estándar aquí.
Entonces, con esto, mi componente de encabezado
ahora está configurado de tal manera que cuando se invoca el formulario de inicio de sesión abierto,
entonces esto nos permitirá abrir
el componente de inicio de sesión como un diálogo y luego mostrarlo en la parte superior de la cadena actual.
Así que, vamos a guardar todos los cambios y luego ir a echar
un vistazo a nuestra aplicación en el navegador.
Al ir al navegador, ahora verás que en el borde derecho de la pantalla,
tenemos otro nuevo botón aquí llamado el botón de inicio de sesión,
y verás que el icono impresionante de la fuente de inicio de sesión añadido a eso.
Ahora, cuando haga clic en el botón de inicio de sesión,
verá inmediatamente un diálogo emergente en la pantalla.
De nuevo, puede descartar eso haciendo clic en cualquier lugar de la pantalla fuera de
el diálogo o haga clic en eso y luego el diálogo aparece en la pantalla.
Entonces, desde Bootstrap, has visto el modal en Bootstrap.
Entonces, esto es exactamente como el modal de Bootstrap.
Así que, aquí, tenemos el diálogo que aparece en la pantalla.
Ahora, tenemos espacio en el diálogo donde ahora podemos poner
en contenido que necesitamos mostrar cuando se invoca este diálogo.
También tenga en cuenta este botón de descartar aquí.
Así que, cuando haces clic en eso,
el diálogo también se descarta.
Ahora, cuando hace clic en cualquier lugar del diálogo,
no sucede nada, pero cuando hace clic en este botón, el diálogo se descarta.
Entonces, así es como funciona el componente de diálogo de material angular en nuestra aplicación.
El siguiente paso es agregar el formulario de inicio de sesión a este cuadro de diálogo.
Con esto, completamos este ejercicio.
En este ejercicio, usted ha visto cómo podemos hacer uso del cuadro de diálogo Material angular a
agregar una superposición a nuestra aplicación y luego mostrarla en la parte superior de la vista actual.
Vamos a añadir en el formulario a esto.
Este es un buen momento para que hagas una confirmación de Git con los diálogos de mensajes.