Modal using Ngx Bootstrap in Angular - Education For Betterment

In this article, I discuss how to add Modal in our Angular application. First, we need to add below line in our app.module.ts file.


.................
//we need to import the first TimepickerModule  From Bootstrap.
import { ModalModule } from 'ngx-bootstrap';
...................
@NgModule({
  .........
  imports: [
                ModalModule.forRoot(),
            ...
           ]
})
export class AppModule(){}

After adding ModalModule in the app module file. Now we can use these module in any component.

1) Open modal using service
First, we need to “BsModalService” import in our constructor. It has mainly two methods.
1) Show(): this method is used for the open modal. It mainly 2 arguments. First argument passing “TemplateRef” or a component and the second argument is a config object it an optionally argument.
2) hide(): To close open modal.

Let’s create a Basic code for the modal elements.
1) Using Template Modal Open & Close


<button type="button" class="btn btn-primary" (click)="openModal(templatenew)">Create template modal</button>
 
<ng-template #templatenew>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is a modal.
  </div>
</ng-template>



import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 
@Component({
  selector: 'demo-modal-service',
  templateUrl: './modal.html'
})
export class DemoModalServiceStaticComponent {
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  openModal(template: TemplateRef) {
    this.modalRef = this.modalService.show(template);
  }
}

2) Using Component Modal Open & Close



import { Component, OnInit } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 
@Component({
  selector: 'modal-service-component',
  templateUrl: './modal.html'
})
export class ModalServiceFromComponent {
  bsModalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}
 
  openModalWithComponent() {
    const initialState = {
      title: 'Modal with component',
      content: "Modal content"
    };
    this.bsModalRef = this.modalService.show(ModalContentComponent, {initialState});
    this.bsModalRef.content.closeBtnName = 'Close';
  }
}
 
 
@Component({
  selector: 'modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title pull-left">{{title}}</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      {{content}}
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">{{closeBtnName}}</button>
    </div>
  `
})
export class ModalContentComponent implements OnInit {
  title: string;
  closeBtnName: string;
  content: string;
  constructor(public bsModalRef: BsModalRef) {}
 
  ngOnInit() {
    
  }
}


<button type="button" class="btn btn-primary" (click)="openModalWithComponent()">Create modal with component</button>

Next article we discuss on how to open nested modal in our angular application.

Spread the love

Related Posts

About The Author