Home AngularJs How To Create Bootstrap Modal Popup In Angular 14?

How To Create Bootstrap Modal Popup In Angular 14?

by Shahriar Sagor

Hello Dev, Today now in this article i will provide an example of angular 14 bootstrap modal popup example. So from here you will know about angular 14 bootstrap 5 modal example. Here i will show step by step explain how to use bootstrap modal in angular 14. Just need to follow step by step explain angular 14 bootstrap modal example. So You just need to some step to done angular 14 modal popup example.

Let’s start the code.

Step 1: Create New App

We can easily create our angular app by using the bellow command:

ng new my-new-app
Step 2: Install Bootstrap 5

Now in this step, i will be install bootstrap core package. So i can use the bootstrap css so let’s install by using the following command:

npm install bootstrap --save

Now, i have to include the bootstrap css as like “node_modules/bootstrap/dist/css/bootstrap.min.css”. So let’s add it on angular.json file.

angular.json

.....
    "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
    ],
.....
Step 3: Install Ng Bootstrap

Now in this step, i will be install Ng Bootstrap package. so i can use the bootstrap ui. So let’s install by using the following command:

npm install --save @ng-bootstrap/ng-bootstrap
Step 4: Import Module

Now in this step, i have to import the NgbModule to app.module.ts file. So let’s import it as like as bellow:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
  
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, 
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Step 5: Updated View File

Now here, i will be updated our html file. So i will create the simple bootstrap model template file.

so let’s put the bellow code:

src/app/app.component.html

<h1>Angular 14 Bootstrap Modal Popup Example - CodingsPoint.com </h1>
   
<button class="btn btn-lg btn-outline-primary" (click)="open(mymodal)">Open My Modal</button>
   
<ng-template #mymodal let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Bootstrap Modal</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">
    This is example from CodingsPoint.com
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>
  </div>
</ng-template>
Step 6: Use Component ts File

Now i have to update our component.ts file. So here i will be write code of bootstrap model then open and close function so, let’s update as like as bellow:

src/app/app.component.ts

import { Component } from '@angular/core';
    
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'appBootstrap';
   
  closeResult: string = '';
    
  /*------------------------------------------
  --------------------------------------------
  Created constructor
  --------------------------------------------
  --------------------------------------------*/
  constructor(private modalService: NgbModal) {}
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  open(content:any) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  } 
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  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}`;
    }
  }
}

Read Also: Laravel 9 Image Intervention Tutorial

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like