How to create modal popup in angular

The following is a basic and most common to use angular bootstrap popup. Easy to integrate a custom light-weight modal popup (dialog) in Angular without any plugins. This tutorial shows how to implement bootstrap dialog in angular.

HTML

<button type="button" mdbBtn color="secondary" class="btn canceledBtn" aria-label="Close" (click)="OpenPopUp()" mdbWavesEffect>Popup Open</button>

<div *ngIf="myPopup" class="myPopup" style="margin: 0px;">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title w-100" id="myModalLabel">Select Product</h4>
        <button type="button" class="close closedBtn" data-dismiss="modal" aria-label="Close" click)="ClosePopUp()">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="tableOuter">
          <table class="table table-hover table-striped">
            <thead>
              <tr>
                <th><input class="checkInput" type="radio" name="gridRadios" id="gridRadios1" value="option1"></th>
                <th>No</th>
                <th>Product Code</th>
                <th>Product Name</th>
                <th>UOM</th>
                <th>Batch</th>
                <th>Qiality</th>
              </tr>            
            </thead>
            <tbody>
              <tr>
                <td><input class="checkInput" type="radio" name="gridRadios" id="gridRadios2" value="option2"></td>
                <td>1</td>
                <td class="productCode">10027241</td>
                <td>Nova Ultra 15W40 210L</td>
                <td>PAK</td>
                <td>10</td>
                <td>20</td>
              </tr>
              <tr>
                <td><input class="checkInput" type="radio" name="gridRadios" id="gridRadios2" value="option2"></td>
                <td>1</td>
                <td class="productCode">10027241</td>
                <td>Nova Ultra 15W40 210L</td>
                <td>PAK</td>
                <td>10</td>
                <td>20</td>
              </tr>              
            </tbody>  
          </table> 
        </div>             
      </div>
    </div>
  </div>
</div>

.ts

public myPopup: boolean;

public ClosePopUp(): void { this.myPopup= false;}
public OpenPopUp(): void {this.myPopup= true; }

SCSS

.myPopup {
    .tableOuter {
        height: 300px;
        overflow: auto;
    }
    table {
        border: 1px solid #e5e5e5;
    }
    thead {
        background: #00a651;
    }
    thead th {
        border: 2px solid #00a651 !important;
        color: #fff;
        font-size: 15px;
        font-weight: normal;
    }
    tbody td {
        color: #101010;
        font-size: 14px;
        font-weight: 500;
    }
    .productCode {
        color: #00a651 !important; 
    }
    .modal-content {
        border-radius: 1rem;
        border: 0px;
        .modal-header {
            border-bottom: 0px;
            padding: 1.5rem 2rem 0 2rem;
            .closedBtn {
                color: #f10909;
                border: 2px solid #f10909;
                border-radius: 50%;
                padding: 0;
                line-height: 17px;
                margin: 0;
                display: flex;
                justify-content: center;
                width: 25px;
                height: 25px;
                font-size: 22px;
                opacity: 1;
            }
            .modal-title {
                font-weight: bold;
                font-size: 20px;
            }            
        }
        .modal-body {
            padding: 1rem 2rem;             
            
        }
    }    
}

How to open popup using Angular and Bootstrap?

First: Import NgbModal module in the component.ts file of the corresponding component, and then we have to write code for the popup model in the HTML file of the corresponding component. If you need popup in home.component then have written the code home.componen.ts and home.componen.html file.

import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

Example: home.component.ts

import {Component} from '@angular/core';

  import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

  @Component({
    selector: "app-home",
    templateUrl: "./home.component.html",
    styleUrls: ["./home.component.scss"]
  })
  export class HomeComponent implements OnInit {
    closeResult = '';

    constructor(private modalService: NgbModal) {}

    open(content) {
      this.modalService.open(content,
     {ariaLabelledBy: 'modal-basic-title'}).result.then((result)=> {
        this.closeResult = `Closed with: ${result}`;
      }, (reason) => {
        this.closeResult =
           `Dismissed ${this.getDismissReason(reason)}`;
      });
    }

    private getDismissReason(reason: any): string {
      if (reason === ModalDismissReasons.ESC) {
        return 'by pressing ESC';
      } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
        return 'by clicking on a backdrop';
      } else {
        return `with: ${reason}`;
      }
    }
  }

Now, we have to use ng-template to construct the model which will create a popup.

Example: home.component.html

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">
    Popup using Angular and Bootstrap
</button>
-------------------------------------------------
<ng-template #content let-modal>
    <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Popup Title</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
            <span aria-hidden="true"> × </span>
        </button>
    </div>
    <div class="modal-body">
        <form>
            <div class="form-group">
                <label for="dateOfBirth">
                    Date of birth
                </label>
                <div class="input-group">
                    <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker
                        #dp="ngbDatepicker">

                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary calendar"
                        (click)="dp.toggle()" type="button">
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark"(click)="modal.close('Save click')">
            Save
        </button>
    </div>
</ng-template>

If Bootstrap is not installed in your Angular application then first have to install Bootstrap. For Botstrap installation to your Angular application is an easy process. Just write the following command in your Angular CLI. It will add bootstrap into your node_modules folder.

ng add @ng-bootstrap/ng-bootstrap

Another Example of angular popup

home.component.html
---------------------------------
<button type="button" class="btn"(click)="openDialog('PopupdataComponent')">Popup using Angular</button>

home.component.ts
---------------------------------
import { MatDialog } from '@angular/material';
import { PopupdataComponent } from '../popupdata/popupdata.component';

constructor(public dialog: MatDialog) { }

openDialog(action) {

const dialogRef = this.dialog.open(PopupdataComponent, {
 width: '700px',
 data:''
});
}

PopupdataComponent is new component which contains only inside popup data which you want to display in Popup. You have to import import { PopupdataComponent } from ‘../popupdata/popupdata.component’; this is your component path which you have created.

Angular Bootstrap Modal Popup Example.

In this tutorial we learn that how to create bootstrap modal popup using bootstrap CSS and JS file, no need to include to extra JavaScript code for a default popup.

You can customize this code further as per your requirement.

---

Learn HTML/CSS from W3 School Website

• Angular