Header Ads Widget

Ticker

6/recent/ticker-posts

Ejemplo modal de ventana emergente angular 10/9 con forma de material angular y componentes de diálogo modal

 En este tutorial, aprenderá sobre formas y modales emergentes angulares con ejemplos. Usaremos Material angular con un ejemplo de Angular 10.

Estos son los pasos:

  • Paso 1: Creando un Proyecto Angular 10
  • Paso 2: Agregar material angular v10
  • Creación del componente modal angular
  • Agregar un contenedor de tarjeta de material
  • Agregar un formulario HTML
  • Paso 3: uso de un cuadro de diálogo modal para mostrar mensajes de error
  • Paso 4: Abrir el cuadro de diálogo modal emergente

En este tutorial, creará una interfaz de usuario de inicio de sesión de ejemplo con un formulario y un cuadro de diálogo diseñados con material angular.

Paso 1: Creando un Proyecto Angular 10

Suponemos que ha creado un proyecto de Angular 10 utilizando Angular CLI . De lo contrario, puede instalar Angular CLI desde npm usando:

$ npm install @angular/cli -g

A continuación, puede generar su proyecto usando:

$ ng new mat-modal-example

Se le preguntará si desea agregar enrutamiento a su proyecto y qué formato de hojas de estilo desea usar. Elija las opciones deseadas para su proyecto y continuemos.

Puede entregar su proyecto usando los siguientes comandos:

$ cd mat-modal-example
$ ng serve

Su aplicación estará disponible en la http://localhost:4200/dirección.

Paso 2: Agregar material angular v10

Abra una nueva terminal y navegue a la carpeta de su proyecto, luego ejecute el ng addcomando para instalar y configurar Angular Material en su proyecto:

$ cd mat-modal-example
$ ng add @angular/material

También necesita configurar o deshabilitar animaciones .

A continuación, debe agregar los módulos para los componentes de Material que utilizará en su proyecto.

Abra el src/app/app.module.tsarchivo y agregue estas importaciones:

import {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatDialogModule } from '@angular/material/dialog';

A continuación, debe agregar estos módulos en la importsmatriz de su módulo principal:

imports: [ /*...*/, MatDialogModule, MatInputModule, MatButtonModule, MatCardModule, MatFormFieldModule],

Creación del componente modal angular

A continuación, debe crear el componente de inicio de sesión y diseñarlo con Material Design. En su terminal, ejecute el siguiente comando:

$ ng generate component login

Agregar un contenedor de tarjeta de material

Ahora, abra el src/app/login/login.component.htmlarchivo y agregue un contenedor de tarjeta de material de la siguiente manera:

    <mat-card>
    <mat-card-header>
        <mat-card-title>Example Login Form</mat-card-title>
    </mat-card-header>
        <mat-card-content>
        <!-- This is where you need to add your login form -->
        </mat-card-content>

Un <mat-card>componente se puede utilizar como contenedor de texto, formularios y fotografías. Puede consultar los documentos para obtener más información.

Agregar un formulario HTML

En el cuerpo del contenedor de la tarjeta, agregue un formulario:

    <form>
        <!-- Form fields -->
    </form>

A continuación, debemos proporcionar campos de entrada para obtener el correo electrónico y la contraseña del usuario:

<mat-form-field>
<input  matInput  placeholder="your email" [(ngModel)]="email"  type="email" name="email"  required>
</mat-form-field>
<mat-form-field>
<input  matInput  placeholder="your password" [(ngModel)]="password"  type="password"  name="password"  required>
</mat-form-field>

Primero, usamos <mat-form-field>para envolver cada campo del formulario, luego usamos la matInputdirectiva con <input>etiquetas regulares para crear campos de entrada con apariencia de Material.

El <mat-form-field>componente proporciona campos ajustados con características como el subrayado, la etiqueta flotante y los mensajes de sugerencia.

Puede envolver los siguientes elementos en <mat-form-field>:

A continuación, terminamos de construir la interfaz de usuario de inicio de sesión agregando un botón:

        <mat-card-actions>
            <button  mat-raised-button (click)="login()"  color="primary">Login</button>
        </mat-card-actions>
    </mat-card>

Puede crear botones de material utilizando las etiquetas HTML regulares, tales como <button><a>etiquetas y aplicar mat-buttonmat-raised-buttondirectivas. Para obtener más información, consulte los documentos .

Paso 3: uso de un cuadro de diálogo modal emergente para mostrar mensajes de error

Angular Material proporciona el MatDialogservicio para mostrar cuadros de diálogo modales. Puede crear un cuadro de diálogo usando un componente angular, así que primero cree el componente usando:

$ ng generate component message

A continuación, abra el src/app/message/message.component.tsarchivo y actualícelo en consecuencia:

import {Component, Inject, Injectable} from  '@angular/core';

import {MatDialogRef, MAT_DIALOG_DATA, MatDialog} from  '@angular/material/dialog';

@Component({
templateUrl:  'message.component.html'
})
export  class  MessageComponent {
    constructor(private  dialogRef:  MatDialogRef<MessageComponent>, @Inject(MAT_DIALOG_DATA) public  data:  any) {
    }
    public  closeMe() {
        this.dialogRef.close();
    }
}

Cuando este componente se crea con el MatDialogservicio, MatDialogRef<MessageComponent>se inyectará un que hace referencia al diálogo modal abierto para que pueda usarlo para cerrar el diálogo.

También necesitamos pasar datos entre el diálogo y el componente. Simplemente puede usar el MAT_DIALOG_DATAtoken de inyección y el decorador @Inject () para obtener datos de diálogo en su componente.

A continuación, abra el src/app/message.component.htmly actualícelo en consecuencia:

<h1  mat-dialog-title>Message</h1>
    <mat-dialog-content>  </mat-dialog-content>
<mat-dialog-actions>
    <button  mat-raised-button (click)="closeMe()">Close</button>
</mat-dialog-actions>

Usamos el mat-dialog-titlecombinado con la <h1>etiqueta para agregar el título del diálogo, la <mat-dialog-content>directiva para agregar el área de contenido del diálogo y el <mat-dialog-actions>para agregar los botones de acción del diálogo.

Paso 4: Abrir el cuadro de diálogo modal emergente

Para probar el diálogo modal, agregaremos el login()método a nuestro componente de inicio de sesión que abrirá el diálogo de mensaje para mostrar un error. Abra el src/login/login.component.tsarchivo y actualícelo en consecuencia:

import { Component, OnInit } from  '@angular/core';
import { MatDialog, MatDialogRef } from  '@angular/material';

// .. other imports

@Component({
// component metadata
})
export  class  LoginComponent{

    public  email:  string  =  "";
    public  password:  string  =  "";


    constructor(private  dialog:  MatDialog, private  router:  Router) { }
    login(){
        if(this.email  ===  "email@email.com"  &&  this.password  === "p@ssw0rd")
        {
            this.router.navigate(['success']);
        }
        else
        {
            this.dialog.open(MessageComponent,{ data: {
            message:  "Error!!!"
            }});
        }
    }
}

Utiliza la palabra clave TypeScriptimport para importar el MatDialogservicio e inyectarlo a través del constructor de su componente y luego llama al open()método de la instancia inyectada para abrir el mensaje modal. El método toma un configobjeto con un dataatributo que contiene datos que debe pasar al componente del diálogo.

Conclusión

En este tutorial, ha creado un ejemplo de interfaz de usuario de inicio de sesión simple con Angular 10, un formulario HTML, un cuadro de diálogo emergente modal y Angular Material 10.


Publicar un comentario

0 Comentarios