Bootstrap 4.0 “Modal” not working with Angular 4

Question

Having trouble getting a Bootstrap 4.0 modal to work within an Angular 4 project.

The modal works great inside a simple static HTML page: https://jsfiddle.net/Lq73nf

Answer 1

You can use ngx-bootstrap library to do this. After installing the library, follow these steps.

Step1: add the following code to app.module.ts file.

import { ModalModule, BsModalRef } from 'ngx-bootstrap';

@NgModule({
 imports: [ModalModule.forRoot(),...],
 providers: [BsModalRef]
})

Step2: copy the following code and paste to app.commponent.html.

    Create template modal


    

        
Modal
        
            ×
        
    
    

        This is a modal.
    

Step3: and finally the following code copy to app.component.ts.

import { Component, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

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

    openModal(template: TemplateRef) {
        this.modalRef = this.modalService.show(template,{ backdrop: 'static', keyboard: false });
    }
}