Diálogo de confirmación en Angular
Los cuadros de diálogo de confirmación se utilizan para confirmar las acciones que el usuario está a punto de realizar. También muestran un mensaje de error si el usuario tiene datos de entrada no válidos.
Este artículo le enseña cómo usar Angular Material para crear una ventana emergente de confirmación en Angular. Crearemos un nuevo componente común, al que se podrá acceder desde otros componentes.
Instale y use el componente Material angular para crear un cuadro de diálogo de confirmación en Angular
Las aplicaciones basadas en la web suelen utilizar la funcionalidad de JavaScript integrada para mostrar alertas y diálogos. Los cuadros de diálogo de JavaScript estándar, por otro lado, son contemporáneos, lo que significa que todo en la pantalla se detendrá hasta que el usuario responda, y no se pueden modificar visualmente.
Pero ahora, las cosas han cambiado; con un poco de ayuda de los componentes Material, podemos diseñar rápidamente una ventana emergente de confirmación dinámica en Angular.
Primero, debe instalar el Material angular con la ayuda del siguiente código.
npm install --save @angular/material @angular/cdk @angular/animations
Ahora es el momento de importar las siguientes dependencias importantes después de instalar Angular Material. Para obtener más información sobre material angular, haga clic aquí.
import { NgModule } from '@angular/core';
import {MatDialogModule } from '@angular/material/dialog' ;'@material/button';
@NgModule({
imports: [
MatDialogModule
],
exports: [
MatDialogModule
]
})
export class CustomMaterialModule { }
Con el siguiente comando, cree un nuevo componente con el nombre confirm-dialog.
ng generate component confirm-dialog
El componente de diálogo se creará en una carpeta y se agregará al array de declaraciones app.module.ts.
Vale la pena señalar que el módulo MatDialog crea componentes en tiempo de ejecución. Como resultado, Angular querrá más información de nosotros.
La clase del componente debe incluirse en el array entry components de nuestra especificación NgModule para cualquier componente cargado en un diálogo.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CustomMaterialModule } from './custom-material/custom-material.module';
import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserModule,
CustomMaterialModule,
BrowserAnimationsModule,
],
declarations: [AppComponent, ConfirmDialogComponent],
entryComponents: [ConfirmDialogComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Después de completar los pasos anteriores, es hora de agregar algo de código al componente directamente.
<h1 mat-dialog-title>
{{title}}
</h1>
<div mat-dialog-content>
<p>{{message}}</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onDelete()">Cancel</button>
<button mat-raised-button (click)="onCommand()">Save</button>
</div>
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Component, OnInit, Inject } from '@angular/core';
@Component({
selector: 'app-confirm-dialog',
templateUrl: './confirm-dialog.component.html',
styleUrls: ['./confirm-dialog.component.css']
})
export class ConfirmDialogComponent implements OnInit {
title: string;
message: string;
constructor(public dialogRef: MatDialogRef<ConfirmDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: ConfirmDialogModel) {
this.title = data.title;
this.message = data.message;
}
ngOnInit() {
}
onCommand(): void {
this.dialogRef.close(true);
}
onDelete(): void {
this.dialogRef.close(false);
}
}
export class ConfirmDialogModel {
constructor(public title: string, public message: string) {
}
}
El método constructor hace dos cosas: se conecta a la ventana e inyecta el mensaje que se muestra en ella. Ambos son proporcionados por el componente que inicia la ventana emergente.
Saltemos al paso final. En última instancia, podemos usar el siguiente código para mostrar nuestro diálogo de confirmación personalizado.
Debido a que utilizamos el componente MatDialog internamente, incluimos la dependencia MatDialog en el constructor y mostramos el diálogo de confirmación cuando se hace clic en el botón. Podemos recibir el resultado y cambiar la vista mediante el enlace de datos escuchando el evento afterClosed() del diálogo.
Para iniciar el diálogo, agregue un botón a la vista y una etiqueta para mostrar la respuesta.
<button mat-raised-button (click)="confirmDialog()">Confirm</button>
import { Component } from '@angular/core';
import { ConfirmDialogModel, ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
import { MatDialog } from '@angular/material/dialog';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
result: string = '';
constructor(public dialog: MatDialog) {
}
confirmDialog(): void {
const message = `Do you want to save this file?`;
const dialogData = new ConfirmDialogModel("File Saving Message", message);
const dialogRef = this.dialog.open(ConfirmDialogComponent, {
maxWidth: "600px",
data: dialogData
});
dialogRef.afterClosed().subscribe(dialogResult => {
this.result = dialogResult;
});
}
}
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook