Ngx Bootstrap Modals

Ngx Bootstrap Modals

A flexible and highly configurable dialogue prompt, the ngx-bootstrap modal component provides several defaults and can be used with minimum code.

ModalDirective

selector

• [bsModal]

Inputs

• Config − ModalOptions allows modal configuration to be set via the element property property.

Outputs

• onHidden-This event is fired when the modal is hidden from the user (will wait for CSS transitions to complete) (will wait for CSS transitions to complete) (will wait for CSS transitions to complete).
• onHide − When the hide instance method has been called, this event is fired immediately.
• onShow − When the display instance method is called, this event fires instantly.
• onShown − This event is triggered when the modal is available to the user (will wait for CSS transitions to complete).

Methods

• show()-Allows to open a modal manually.
• hide()-Allows modal closing manually.
• toggle()-Allows to toggle modal visibility manually.
• showElement() − Shows dialog.
• focusOtherModal()- Tricks for events.

Example

We have to update app.module.ts used in the ngx-bootstrap Dropdowns chapter to use ModalModule and BsModalService when we're going to use a modal.

To use the ModalModule and the BsModalService, update app.module.ts.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { ModalModule, BsModalService } from 'ngx-bootstrap/modal';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule
   ],
   providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig,BsModalService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Update test.component.html to use the modal.

test.component.html

<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
<ng-template #template>
   <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">×</span>
      </button>
   </div>
   <div class="modal-body">
      This is a sample modal dialog box.
   </div>
   <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="modalRef.hide()">Close</button>
   </div>
</ng-template>

Update test.component.ts for corresponding variables and methods.

test.component.ts

import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

   modalRef: BsModalRef;
   constructor(private modalService: BsModalService) {}

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

   ngOnInit(): void {
   }
}

Build and Serve

Run the following command to start the angular server.

ng serve