Reusable Confirmation Dialog in Angular
In this tutorial we shall see how to create a custom component to act as a reusable confirmation dialog box to handle success and cancel events.
Create a new angular project
First let's create a new angular application using the angular cli command.
ng new angular-dialog
Create a component for dialogbox
This will create a new angular application. Now lets create a dialog component using the following angular cli command.
ng g c dialog
Open the dialog.component.html
file and modify the code as below.
<div #container class='container'>
<div class='dialog'>
<div class="header">
<h3>{{type}}</h3>
</div>
<div class="content">{{message}}</div>
<div class="footer">
<input class='btn success' type='button' value='Ok' (click)="onSuccess()"/>
<input class='btn cancel' type='button' value='Cancel' (click)="onCancel()"/>
</div>
</div>
</div>
Here, we have created a div
with template reference name #container
.Then we create div
container with class name header
to display the dialog heading from the variable name type
.
Then the div
container with class name content
will display the message
of the confirmation dialog from message parameter.
The div
container with class name footer
will hold two buttons with values Ok
and Cancel
.
The Ok
button calls onSuccess()
function on click
event and Cancel
button calls onCancel()
function on click
event.
The command will create a DialogComponent
. Open the dialog.component.ts
file and add the following code.
import {
Component,
OnInit,
ViewChild,
Renderer2
} from "@angular/core";
import { BehaviorSubject } from "rxjs";
@Component({
selector: "app-dialog",
templateUrl: "./dialog.component.html",
styleUrls: ["./dialog.component.css"]
})
export class DialogComponent implements OnInit {
type = "Alert";
message = "";
private $selectedOption = new BehaviorSubject<boolean>(false);
@ViewChild("container") container;
constructor(private renderer: Renderer2) {}
ngOnInit() {}
openDialog(type, message) {
this.type = type;
this.message = message;
this.renderer.setStyle(this.container.nativeElement,'display', 'flex');
}
closeDialog() {
this.renderer.setStyle(this.container.nativeElement,'display', 'none');
}
onSuccess() {
this.closeDialog();
this.$selectedOption.next(true);
}
onCancel() {
this.closeDialog();
this.$selectedOption.next(false);
}
getSelectedOption() {
return this.$selectedOption;
}
}
Let's break this one by one and analyse the code.
type = "Alert";
message = "";
private $selectedOption = new BehaviorSubject<boolean>(false);
@ViewChild("container") container;
constructor(private renderer: Renderer2) {}
First we have created two variables, the type
variable to specify the dialog box heading which can be one of the following, Confirm
or Alert
or Warning
. The message
variable to display the confirmation message.
We then create a BehaviorSubject with the name $selectedOption
to emit a boolean
value. By default we set it to be false
.
We then create a container variable to get the reference of the div
container using @ViewChild
. Then import the Renderer2
and inject into the constructor with the variable name renderer
. This is used to change the style of the container element.
openDialog(type, message) {
this.type = type;
this.message = message;
this.renderer.setStyle(this.container.nativeElement,'display', 'flex');
}
The openDialog()
function will receive type
and message
as parameters and set it to the component's type
and message
variables.
Then using renderer
we set the style of the container's display
property to flex
.
closeDialog() {
this.renderer.setStyle(this.container.nativeElement,'display', 'none');
}
The closeDialog()
function is responsible for setting the container's display
property to none
. Setting this will hide the container
.
onSuccess() {
this.closeDialog();
this.$selectedOption.next(true);
}
onCancel() {
this.closeDialog();
this.$selectedOption.next(false);
}
The onSuccess
function will initially close the dialog by calling the closeDialog()
function and then emit true
value to the $selectedOption BehaviorSubject variable by calling the next function.
The onCancel
function will initially close the dialog by calling the closeDialog()
function and then emit false
value to the $selectedOption
BehaviorSubject variable.
getSelectedOption() {
return this.$selectedOption;
}
The getSelectedOption()
function, will return the BehaviorSubject $selectedOption
.
Now open the dialog.component.css
file and add a few styles to the component.
.container {
height: 100vh;
width: 100%;
opacity: 0.75;
background-color: #3b3a3a;
display: none;
justify-content: center;
align-items: center;
position: absolute;
}
.dialog {
width: 400px;
min-height: 200px;
background-color: rgb(228, 228, 228);
box-shadow: 5px 2px #3b3a3a;
position: relative;
}
.header {
margin: 10px;
height: 20%;
}
.content {
margin: 10px;
height: 70px;
}
.footer {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.footer .btn {
height: 35px;
width: 60px;
color: white;
margin: 5px;
border: none;
}
.success {
background-color: green;
}
.cancel {
background-color: brown;
}
Use DialogComponent in AppComponent
Now, let's use this DialogComponent
in our AppComponent
to show a confirmation dialog box. Open the app.component.html file and add the following code.
<app-dialog #dialog></app-dialog>
<p>
Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum.
</p>
<div>
<input type='button' (click)='openModal()' value='Open Dialog'/>
</div>
In the above code we had referred the DialogComponent
selector app-dialog
and also provide a template reference using #dialog
.
Then we create a button with the value Open Dialog
, which calls the function openModal()
function on the click event.
Now open the app.component.ts
file and add the following code.
import { Component, ViewChild, OnInit, AfterViewInit } from "@angular/core";
import { DialogComponent } from "./dialog/dialog.component";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit, AfterViewInit {
@ViewChild(DialogComponent) dialogComponent;
ngOnInit(): void {}
ngAfterViewInit(): void {
this.dialogComponent.getSelectedOption().subscribe((value: boolean) => {
console.log(value);
});
}
openModal() {
this.dialogComponent.openDialog(
"Warning",
"Are you sure to remove the content?"
);
}
}
In the above code, using the @ViewChild
we will reference the DialogComponent
. This will refer to the DialogComponent
which is mentioned in the app.component.html
file.
Then implement the ngAfterViewInit
lifecycle event and using the variable dialogComponent
call the getSelectedOption()
function and subscribe to the $selectedOption
.
This will supply true
value whenever Ok
button is clicked and false
value whenever Cancel
button is clicked.
The openModal()
function will call the openDialog()
function of the DialogComponent
with dialogComponent
variable.
Here, we have provided a Warning
value as a type of the confirmation box and Are you sure to remove the content?
content as the message for the confirmation box.
Now run the application using
ng serve --o
When the application is launched, click on the 'Open Dialog' button, it will open a confirmation dialog box with the provided message. When the Ok or Cancel button is clicked it will be logged to the console.
We can now use those boolean values and perform any action based on the boolean value.
You can check out the source in this link.