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.

Basic Structure of  Bootstrap Model in Angular

<!-- 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 it.  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 ScreenShot

Result :

 

And now the modal popup/ modal window will look like the following :

 

angular-typescript

 

 

Quote - Banner-Blog

 

 

Finally, 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. If you are looking for angular developers for your project ? Hire Angular developer from Agira Technologies to build best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web applications development to meet your business requirements. For any queries reach us via info@agiratech.com

READ NOW >>  How To Deploy Your Web Application To Firebase Hosting