Bootstrap 4.0 "Modal" not working with Angular 4

angular bootstrap-4

10,725

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.

    <button type="button" class="btn btn-primary" (click)="openModal(template)">Create template 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">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        This is a modal.
    </div>
</ng-template>

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<any>) {
        this.modalRef = this.modalService.show(template,{ backdrop: 'static', keyboard: false });
    }
}

10,725

Author by

Chris Dutrow

Creator, EnterpriseJazz.com Owner, SharpDetail.com LinkedIn

Updated on July 25, 2022

Comments

Chris Dutrow almost 2 years

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/Lq73nfkx/1/

<!-- MODAL -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

You can see in the screen capture below, pressing displaying the Modal causes the html to be changed in several places, not only within the model HTML itself, butt the document's <body> element is manipulated as well.

The Bootstrap JavaScript that performs HTML manipulation appears to not be firing within the Angular 4 project, when I use that exact same code inside the project, the HTML is not changed at all.

Is there another way that I should be using Bootstrap with Angular 4? Or should I be using another Modal solution with Angular 4 that is not Bootstrap?