Bootstrap Modal In Angular 13

Websolutionstuff | Jun-10-2022 | Categories : Bootstrap Angular

In this article, we will see the bootstrap modal in angular 13. Ng Bootstrap is developed from bootstrap and they provide all bootstrap 3, bootstrap 4, and bootstrap 5 native angular 13 directives like a modal, pagination, date picker, buttons, etc. Ng Bootstrap will help to easily use bootstrap UI.

So, let's see bootstrap modal in angular 13, angular 13 bootstrap modal example, how to show modal popup in angular 13, how to use bootstrap modal in angular 12/13, modal popup in angular 13.

Step 1: Create New App

In this step, we will create a new app using the below command.

ng new my-new-app

 

 

Step 2: Install Bootstrap 5

Now, we will install the bootstrap core package using the below command.

npm install bootstrap --save

Now, we need to include bootstrap CSS like node_modules/bootstrap/dist/css/bootstrap.min.css. So, add it to the angular.json file.

angular.json


"styles": [

"node_modules/bootstrap/dist/css/bootstrap.min.css",

"src/styles.css"

],

 

Step 3: Install Ng Bootstrap

In this step, we will install the ng-bootstap package for use of bootstrap UI.

npm install --save @ng-bootstrap/ng-bootstrap

 

 

Step 4: Import Module

Now, we will import NgbModule to the app.module.ts file.

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

In this step, we will update the HTML file.

src/app/app.component.html

<h1>Bootstrap Modal In Angular 13 - Websolutionstuff </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 Popup</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 bootstrap modal example of websolutionstuff
  </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, we need to update our component.ts file here we will write the code of the bootstrap model open and close the function.

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 = '';
    
  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}`;
    }
  }
}

 

Step 7: Run The Server

In last, we need to run the server using the below command.

ng serve

Now, Go to your web browser, type the given URL and view the app output.

http://localhost:4200

 


You might also like:

Recommended Post
Featured Post
How To Create Unique Slug In Laravel 9
How To Create Unique Slug In L...

In this article, we will see how to create a unique slug in laravel 9. A slug is the part of a URL that i...

Read More

Sep-27-2022

Laravel whereIn and whereNotIn Query Example
Laravel whereIn and whereNotIn...

In this article, we will see the laravel whereIn and whereNotIn query examples. laravel query builder provides many diff...

Read More

Jan-16-2021

How to Use an Image as a Link in React
How to Use an Image as a Link...

In the ever-evolving realm of web development, I've come to realize the significance of interactivity in shaping rem...

Read More

Aug-16-2023

Laravel 9 Multiple Authentication Using Middleware
Laravel 9 Multiple Authenticat...

In this article, we will see laravel 9 multiple authentications using middleware. Using middleware we authenticate the u...

Read More

Apr-13-2022