Creating a Modal With ng-bootstrap

Posted 4 years, 9 months ago

Simple Example

Today, we'll take a look at the simplest way to create a modal using the ng-bootstrap library. ng-bootstrap has really good documentation and several examples on their site as well, so be sure to check out their documentation:

We'll start by reusing our landing page from an earlier exercise, eliminating all of the markdown, and setting up a single button.

landing-page.component.html:

<button>Open a modal</button>

landing-page.component.ts:

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

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

    constructor(
    ) {
    }

    ngOnInit(): void {
    }

}

Now, we're going to add a reference to our modal content and use the modal service in order to open a modal on the click event of the button:

landing-page.component.html:

<div class="container min-vh-100">
    <div class="row min-vh-100 justify-container-center align-items-center">
        <div class="col-12">
            <button (click)="open(reason)">Open a modal</button>
        </div>
    </div>
</div>

<ng-template #reason let-modal>
    <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">This is a modal!</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('dismiss')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <h2>Did you know stuff can go in here?</h2>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="modal.close('done')">Done</button>
    </div>
</ng-template>

landing-page.component.ts:

import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

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

    constructor(
        private modalService: NgbModal,
    ) {
    }

    ngOnInit(): void {
    }

    open(reason) {
        this.modalService.open(reason).result.then((result) => {
            console.log('done!');
        });
    }

}

And now we can take it a step further by adding in our logging. Don't forget to also handle the promise rejection:

import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { LoggingService } from '../services/logging.service';

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

    tag = 'LandingPageComponent';

    constructor(
        private modalService: NgbModal,
        private loggingService: LoggingService,
    ) {
    }

    ngOnInit(): void {
    }

    open(reason) {
        this.modalService.open(reason).result.then((result) => {
            this.loggingService.debug(this.tag, 'Modal success..');
        }, (err) => {
            this.loggingService.debug(this.tag, 'Modal dismiss..');
        });
    }

}