How to open a Bootstrap Modal in your Angular Typescript file?

Modals are not just decorative prompts, but are integral to the overall user experience of a real world application.  We use modals to prompt the users, to display additional information in the detail page,  to query list, and so much more that it needs it’s own personal CSS.

For this post, we are going to explore how to call the modal in your Typescript file as well as provide its own CSS to make it more intuitive for the user.

1.) First we define the modal HTML mark-ups (see Bootstrap 4 official page for more information).  Take note of the [ngStyle] property in the mdlSample div tag.  It has to have the display and opacity styles, if one is missing it will not work.

<button type="button" id="btnOpen" class="btn btn-primary" (click)="openModal(true)”>
<div id="mdlSample" class="modal fade" role="dialog" [ngStyle]="{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">My Modal</h4>
</div>
<div class="modal-body">Text here!</div>
<div class="modal-footer" align="right">
            <button type="button" id="btnOK" class="btn btn-success" (click)="btnOKClick()"><i class="fa fa-check fa-fw"></i> Ok</button>
            <button type="button" id="btnClose" class="btn btn-danger (click)="openModal(false)"><i class="fa fa-times fa-fw"></i> Cancel</button></div>
</div>
</div>
</div>

2.) Next we modify our Typescript file by adding the following:

  • Modal open boolean variable (line 1)
  • Event to change the variable from true or false (line 2)
private mdlSampleIsOpen : boolean = false;
private openModal(open : boolean) : void {
    mdlSampleIsOpen = open;
}

Below is a screen shot of what your application modal will look like with a little CSS (see below the image).

Untitled

.modal-dialog {
    -webkit-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    top: 20%;
    margin: 0 auto;
}
.modal-header{
    background-color:rgb(164, 197, 235);
}
.modal-content {
    overflow:hidden;
}

Thats it.  Happy New Year! and have fun coding. And if you find this blog helpful, you can make the donation by clicking the Paypal button below.


Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s