Bootstrap Modal Window In Angular Using Typescript

This blog introduces you to the basic implementation of modal window/popup in Angular using Typescript. Angular 2/4 or Typescript are bringing in the true Object Oriented Front-end development. 

What is Typescript?

Typescript is a programming language which is the syntactical superset of Javascript. Typescript being purely object-oriented and helps us to write clean and scalable javascript. When we are developing complex applications many developers find it difficult to write clean and object-oriented code in JS but with Typescript it becomes easy. Typescript also provides tools like advanced autocompletion, navigation, and refactoring. And angular is also written in Typescript because of the features typescript offers.

typescript-angular

In Bootstrap we have so many features which are implemented by default, One such feature is modal popup/ modal windows.

The basic structure of  bootstrap model looks like the following :

 


<!-- open a modal window by clicking button-->

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#bootstrapModel">click to open</button>

<!-- Modal section -->

<div id="bootstrapModel" class="modal fade" role="dialog">

 <div class="modal-dialog">

   <!-- Modal content-->

   <div class="modal-content">

     <div class="modal-header">

       <button type="button" class="close" data-dismiss="modal">&times;</button>

       <h4 class="modal-title">Modal Header section</h4>

     </div>

<!-- model body section -->

     <div class="modal-body">

       <p>body text in the modal.</p>

     </div>

     <div class="modal-footer">

       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

     </div>

   </div>

 </div>

</div>

Bootstrap-model

 

Angular 2 or 4 is a component-based framework with typescript, Components are major building blocks of Angular 2 or 4.  A component can be defined as an independent cohesive block of code which has the required logic, view, and data as one unit. When written using TypeScript, a component is a TypeScript class decorated with @Component() decorator.

Now let us implement above bootstrap modal window code in angular

 


<!-- open a modal window by clicking button  basic bootstrap-->

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#bootstrapModel"> click to open</button>

Now converting it  to angular, By clicking the button open the modal using event binding method as the  following

<button type="button" class="btn btn-info btn-lg" (click)=”openModal()”>click to open</button>

Next the model window code is implemented as the following,

 


<div class="backdrop" [ngStyle]="{'display':display}"></div>

<div class="modal" tabindex="-1" role="dialog"  [ngStyle]="{'display':display}">

 <div class="modal-dialog" role="document">

   <div class="modal-content">

     <div class="modal-header">

       <button type="button" class="close" aria-label="Close" (click)="onCloseHandled()"><span aria-hidden="true">&times;</span></button>

       <h4 class="modal-title">Model Title</h4>

     </div>

     <div class="modal-body">

       <p>Model body text</p>

     </div>

     <div class="modal-footer">

       <button type="button" class="btn btn-default" (click)="onCloseHandled()" >Close</button>

     </div>

   </div><!-- /.modal-content -->

 </div><!-- /.modal-dialog -->

</div><!-- /.modal !-->

ngClass or ngStyle are the built in directives for angular, using them we will be able to dynamically  update the html  element. Now we have used ngStyle to show & hide the modal window.

 


[ngStyle]="{'display':display}"

display is a defined variable in angular typescript and by default it is none.

 


display='none';

Next, For opening the model window, click the openModal() and change the display variable value as block

 


 openModal(){

      this.display=block;

   }

Same as close the model the model window,


   onCloseHandled(){

      this.display='none';

   }

Finally we have nice backdrop css to added in our css component,

 


.backdrop{

background-color:rgba(0,0,0,0.6);

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

}

code ts

Result :

 

Now the modal popup/ modal window will look like the following.

 

angular-typescript

 

Hope the blog helped you to implement modal window/popup. If you have any doubts or queries while implementing please comment below. For more on Angular and web development follow Agira technologies.