¿Cómo usar Mat-Dialog en Angular?

Introducción:
Angular Material es una biblioteca de componentes de interfaz de usuario desarrollada por el equipo de Angular para crear componentes de diseño para aplicaciones web móviles y de escritorio. Para instalarlo, necesitamos tener angular instalado en nuestro proyecto, una vez que lo tenga, puede ingresar el siguiente comando y descargarlo.

Sintaxis de instalación:

ng add @angular/material

Acercarse:

Primero necesitamos importar ‘MatDialog’ desde ‘@angular/material/dialog’ y necesitamos crear una instancia para ello en el constructor.
Usando esta instancia podemos abrir el componente del cuadro de diálogo.
Ahora cree un componente separado para el cuadro de diálogo y escriba el código según los requisitos.
En el componente de diálogo, necesitamos crear una instancia de ‘MatDialogRef’ que debemos importar desde ‘@angular/material/dialog’.
Importe ‘MatDialogModule’ desde ‘@angular/material’ en el archivo app.module.ts.
Asegúrese de mencionar el componente Diálogo en la array de componentes de entrada en el archivo del módulo.

Implementación de código: app.component.html:

<button mat-raised-button (click)="openDialog()">
    Pick one
</button>
<br>
  
<span *ngIf="animal">
    You choose: <i>{{animal}}</i>
<span>

aplicación.componente.ts:

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
  
import { ExampleDialogComponent } from './example-dialog';
  
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  
  animal: string;
  name: string;
  
  constructor(public dialog: MatDialog) {}
  
  openDialog(): void {
    let dialogRef = this.dialog.open(ExampleDialogComponent, {
      width: '250px',
      data: { name: this.name, animal: this.animal }
    });
  
    dialogRef.afterClosed().subscribe(result => {
      this.animal = result;
    });
  }
  
}

aplicación.módulo.ts:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MatButtonModule,
  MatCommonModule,
  MatFormFieldModule,
  MatInputModule,
} from '@angular/material';
  
import { AppComponent } from './example.component';
import { ExampleDialogModule } from './example-dialog';
  
@NgModule({
  declarations: [AppComponent],
  exports: [AppComponent],
  imports: [
    ExampleDialogModule,
    CommonModule,
    FormsModule,
    MatButtonModule,
    MatCommonModule,
    MatFormFieldModule,
    MatInputModule,
  ],
})
export class AppModule {}

ejemplo-dialog.component.html:

<h1 mat-dialog-title>Welcome user</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onCancel()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" 
             cdkFocusInitial>Ok</button>
</div>

ejemplo-dialog.component.ts:

import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
  
@Component({
  selector: 'app-example-dialog',
  templateUrl: 'example-dialog.component.html',
})
export class ExampleDialogComponent {
  
  constructor(
    public dialogRef: MatDialogRef<ExampleDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }
  
  onCancel(): void {
    this.dialogRef.close();
  }
  
}

ejemplo-dialog.module.ts:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MatButtonModule,
  MatCommonModule,
  MatDialogModule,
  MatFormFieldModule,
  MatInputModule,
} from '@angular/material';
  
import { ExampleDialogComponent } from './example-dialog.component';
  
@NgModule({
  declarations: [ExampleDialogComponent],
  entryComponents: [ExampleDialogComponent],
  imports: [
    FormsModule,
    MatButtonModule,
    MatCommonModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
  ],
})
export class ExampleDialogModule {}

Producción:

Salida cuando se abre el cuadro de diálogo:

Salida cuando el valor introducido se muestra en la pantalla:

Publicación traducida automáticamente

Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta