4

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.

enter image description here

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?

Chris Dutrow
  • 48,402
  • 65
  • 188
  • 258
  • 2
    The easiest way to use bootstrap in angular is to use a library like https://ng-bootstrap.github.io/#/home (Still in beta) or if it does not have to be bootstrap you could try the material library for angular https://material.angular.io/ – Shadowlauch Jan 12 '18 at 18:35

2 Answers2

8

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 });
    }
}
Sangeet Saini
  • 5
  • 2
Hossein Bajan
  • 2,644
  • 5
  • 19
  • 36
-4

Can you try adding TetherJS after jQuery while importing the bootstrap cdn

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
justojas
  • 105
  • 9