Why PopUp Modal Bootstrap Not Appearing In Angular 4

Question

Can anyone help me on why is my popup modal not appearing in page. I've already installed bootstrap in my cli and still doesn't show popup. Is there something you have to configure aside from my codes below? I believe that bootstrap.min.js is what makes the modal works and i also added it but still it doesn't show up

//.angular-cli.json

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],


//view.component.html
<div id="container-wrapper">
<div class="container">
    <div class = "row">
        <div class = "col-md-3"></div>
        <div class = "col-md-8 well">
            <h3 class="text-info">Account Information</h3>
            <br>
            <div class = "container-fluid">    
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>ID Number</th>
                                <th>Full Name</th>
                                <th>Email Address</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let account of accounts">
                                <td>{{account.id}}</td>
                                <td>{{account.fullname}}</td>
                                <td>{{account.email}}</td>
                                <td>
                                    <a class="teal-text" data-toggle="modal" data-target="#editmember"><i class="fa fa-pencil-square-o fa-lg"></i></a>
                                    <a class="red-text"><i class="fa fa-times fa-lg"></i></a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editmember" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form>
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title text-info" id="myModalLabel">Edit Account Details</h4>
                    </div>
                    <div class="modal-body">    
                        <div class = "form-group">
                            <label>ID Number</label>
                            <input type = "number" class = "form-control"/>
                        </div>
                        <div class = "form-group">
                            <label>Full Name</label>
                            <input type = "text" class = "form-control"/>
                        </div>
                        <div class = "form-group">
                            <label>Email Address</label>
                            <input type = "email" class = "form-control"/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-success" data-dismiss = "modal"><i class="fa fa-edit" aria-hidden="true"></i> Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

Answer 1

Install ngx-bootstrap from npm

npm install ngx-bootstrap --save

You will need bootstrap styles (Bootstrap 3)

index.html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

app.module.ts (RECOMMENDED)

import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
  imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}

app.component.ts

import { setTheme } from 'ngx-bootstrap/utils';
@Component({…})
export class AppComponent {
  constructor() {
    setTheme('bs3'); // or 'bs4'
    …
  }
}

Embedded editor will not show you the exact out, So integrate into your code 100% it works

<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>

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

@Component({
  selector: 'demo-modal-service-static',
  templateUrl: './service-template.html'
})
export class DemoModalServiceStaticComponent {
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

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

Answer 2

First off - "../node_modules/bootstrap/dist/js/bootstrap.min.js" should go under the scripts: [] section, not the styles: [] section.

Second - I recommend looking into https://github.com/valor-software/ngx-bootstrap which is a bootstrap wrapper for Angular. It makes it way easier to integrate with your Angular application.

Answer 3

The default modal by bootstrap doesn't work as intended because angular uses typescript instead of javascript. Have a look at ngx-bootstrap that offers a module for modals: https://valor-software.com/ngx-bootstrap/#/. I used it in a project I worked on and it works well with angular.