Angular 17 Bootstrap 5 Modal Popup Example

To create popup modal in Angular 17 with Bootstrap 5; Just install Bootstrap 5 and setup it with the angular project and then create an alert popup modal component and use bootstrap with components in angular applications.

Angular 17 Bootstrap 5 Modal Popup Example

Using the following steps, you can create and use alert popup modal in angular 17 projects with Bootstrap 5:

Step 1: Set up a new Angular 17 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 demoApp

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 bootstrap

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 17!</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 17 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 17 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 17 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