Dialogue de confirmation en Angular
Les boîtes de dialogue de confirmation sont utilisées pour confirmer les actions que l’utilisateur est sur le point d’effectuer. Ils affichent également un message d’erreur si l’utilisateur a des données d’entrée invalides.
Cet article vous apprend à utiliser Angular Material pour créer une fenêtre contextuelle de confirmation dans Angular. Nous allons créer un nouveau composant commun, qui sera accessible depuis d’autres composants.
Installez et utilisez le composant Angular Material pour créer une boîte de dialogue de confirmation dans Angular
Les applications Web utilisent généralement la fonctionnalité JavaScript intégrée pour afficher des alertes et des dialogues. Les boîtes de dialogue JavaScript vanille, en revanche, sont contemporaines, ce qui signifie que tout à l’écran s’arrêtera jusqu’à ce que l’utilisateur réponde, et elles ne peuvent pas être modifiées visuellement.
Mais maintenant, les choses ont changé ; avec l’aide des composants Material, nous pouvons rapidement concevoir une popup de confirmation dynamique en Angular.
Tout d’abord, vous devez installer le Angular Material avec l’aide du code suivant.
npm install --save @angular/material @angular/cdk @angular/animations
Il est maintenant temps d’importer les dépendances importantes suivantes après l’installation de Angular Material. Pour plus d’informations sur le matériau Angular, cliquez ici.
import { NgModule } from '@angular/core';
import {MatDialogModule } from '@angular/material/dialog' ;'@material/button';
@NgModule({
imports: [
MatDialogModule
],
exports: [
MatDialogModule
]
})
export class CustomMaterialModule { }
À l’aide de la commande suivante, créez un nouveau composant avec le nom confirm-dialog.
ng generate component confirm-dialog
Le composant de dialogue sera créé dans un dossier et ajouté au tableau de déclarations app.module.ts.
Il est à noter que le module MatDialog crée des composants à l’exécution. En conséquence, Angular voudra des informations supplémentaires de notre part.
La classe de composant doit être incluse dans le tableau entry components de notre spécification NgModule pour tout composant chargé dans un dialogue.
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 { }
Après avoir terminé les étapes précédentes, il est temps d’ajouter directement du code au composant.
<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) {
}
}
La méthode constructeur fait deux choses : elle se connecte à la fenêtre et injecte le message qui y est affiché. Les deux sont donnés par le composant qui lance la fenêtre contextuelle.
Passons à l’étape finale. En fin de compte, nous pouvons utiliser le code ci-dessous pour afficher notre dialogue de confirmation personnalisé.
Parce que nous utilisons le composant MatDialog en interne, nous incluons la dépendance MatDialog dans le constructeur et affichons la boîte de dialogue de confirmation lorsque le bouton est cliqué. Nous pouvons recevoir le résultat et modifier la vue à l’aide de la liaison de données en écoutant l’événement afterClosed() de la boîte de dialogue.
Pour lancer le dialogue, ajoutez un bouton à la vue et une étiquette pour afficher la réponse.
<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