Bootstrap 5 Modal Popup in Angular 16

If you are working in Angular application. And you have to implement a popup modal using Bootstrap 5. And also shows dynamic data on the popup modal or submit from the form. So you can learn from this tutorial.

In this tutorial, you will learn how to create, customize and use a popup modal in angular 16 projects using Bootstrap 5.

Angular 16 Bootstrap 5 Modal Popup Example Tutorial

Steps to create and use popup modal in angular 16 projects using Bootstrap 5:

• Step 1: Set up a new Angular 16 project
• Step 2: Install Bootstrap 5
• Step 3: Import Bootstrap styles and scripts
• Step 4: Create a Popup Modal component
• Step 5: Implement the Modal component
• Step 6: Create the Popup Modal in HTML template
• Step 7: Use the Modal component in your app
• Step 8: Handle the modal opening and closing
• Step 9: Start the Angular development server

Step 1: Set up a new Angular 16 project

First of all, open your cmd or command prompt and execute the following command into it to install and create a new Angular project using cli:

ng new angular-16-bootstrap-5-popup-modal-example

Step 2: Install Bootstrap 5

Next, you need to change your working directory to the newly created angular project and execute the following command on cmd to install Bootstrap 5 and its dependencies via npm:

npm install [email protected]

Step 3: Import Bootstrap styles and scripts

Next, you need to import bootstrap styles and scripts in angular project. So, Open the angular.json file and add the Bootstrap styles and scripts to the “styles” and “scripts” sections, respectively:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Step 4: Create a Popup Modal component

Next, you need to create popup modal components into your angular project. So, open cmd or command prompt and execute the following command to create a new component called “modal”:

ng generate component modal

Step 5: Implement the Modal component

Once you have created modal popup component. Now, you need to implement popup modal components. So, Open the modal.component.ts file and add the following code:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
  @ViewChild('myModal') myModal: ElementRef;

  constructor() { }

  ngOnInit(): void {
  }

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

  closeModal() {
    this.myModal.nativeElement.style.display = 'none';
  }
}

Step 6: Create the Popup Modal in HTML template

Once you have implemented modal functionality. Now you need to create popup modal in html template. So, Open the modal.component.html file and add the following code:

<!-- The Modal -->
<div #myModal class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <h5 class="modal-title">My Modal</h5>
        <button type="button" class="close" data-dismiss="modal" (click)="closeModal()">
          <span>&times;</span>
        </button>
      </div>
      <!-- Modal Body -->
      <div class="modal-body">
        <!-- Add your dynamic content or form here -->
        <p>Hello, this is a Bootstrap 5 Modal in Angular 16!</p>
      </div>
      <!-- Modal Footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="closeModal()">Close</button>
      </div>
    </div>
  </div>
</div>

Step 7: Use the Modal component in your app

Next, you need to use popup modal html component in your app. So, Open the app.component.html file and add the following code to use the Modal component:

<div class="container mt-4">
  <h1>Angular 16 Bootstrap 5 Popup Modal Example</h1>
  <button type="button" class="btn btn-primary" (click)="openModal()">Open Modal</button>
  <app-modal></app-modal>
</div>

Step 8: Handle the modal opening and closing

Once you done all the above given steps, you need to handle opening and closing of modal functionality. So, Open the app.component.ts file and add the following code:

import { Component } from '@angular/core';
import { ModalComponent } from './modal/modal.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private modalComponent: ModalComponent) {}

  openModal() {
    this.modalComponent.openModal();
  }
}

Step 9: Start the Angular development server

Finally, execute the following command in your cmd to start the development server:

ng serve

Open your web browser and navigate to http://localhost:4200/. You should see the “Angular 16 Bootstrap 5 Modal example” page with a button. Click the button to open the modal, and you’ll see the “My Modal” title and the sample content inside the modal.

Conclusion

Congratulations! You have successfully created Bootstrap 5 Modal Popup in Angular 16 projects.

Feel free to customize the content and appearance of the modal using Bootstrap’s classes to suit your application’s needs. Additionally, you can pass dynamic data from the parent component to the modal for more interactive behavior.

Recommended Tutorials