Bootstrap Modal Window In Angular Using Typescript

,

Table of Contents

    Introduction

    In this blog, you’ll be learning 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. First, we can start with Typescript,

    What is Typescript?

    Typescript is a programming language that is the syntactical super-set 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 JavaScript but with Typescript it becomes easy. Typescript also provides tools like advanced auto-completion, navigation, and refactoring. And angular is also written in Typescript because of the features typescript offers. In Bootstrap we have so many features that 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>

    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 that has the required logic, view, and data as one unit.

    Bootstrap model in angular typescript

    When written using TypeScript, a component is a TypeScript class decorated with @Component() decorator.

    Now let us implement the 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 open modal() and change the display variable value as a block.

    openModal(){
      this.display='block';
   }

    Same as close the model window,

    onCloseHandled(){
      this.display='none';
   }

    Finally, we have a nice backdrop to add to the CSS component.

    .backdrop{
background-color:rgba(0,0,0,0.6);
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
}

    Result

    And now the modal popup/ modal window will look like the following : Finally, hope the blog aids you to implement a modal window/popup. If you have any doubts or queries while implementing please comment below. For more on Angular and web development follow BUSoft technologies. If you are looking for angular developers for your project? Hire Angular developer from BUSoft Technologies to build the best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web application development to meet your business requirements. Are you looking for Angular developers to build your application? Here is the comprehensive guide on how to hire Angular developers. Also, it guides you with the following topics.
    • Angular developer skills.
    • How an ideal Angular developer resume should look.
    • Top Angular developer tools.
    • Most common Angular developer interview questions.
    • Present Angular developer job opportunities.

    Author: Prasanna R

    Related Blogs - /

    • IT, Tech News

    How Master Data Management (MDM) Ensures Consistency and Accuracy Across Organization’s Data
    • IT, Tech News

    Drivers of a Successful AI adoption
    • IT, Tech News

    How To Build Login Page Using Angular Material Design – Explained