ng-bootstrap modal is not displaying

Question

Am using ng-bootstrap modal in my application to show dialogue box. but while clicking the button, nothing is happening, the modal is not displaying. while debugging it could find that the action is getting called, but the modal is not showing.

this is my app.module.ts

import {NgModule }      from '@angular/core';
import {BrowserModule } from '@angular/platform-browser';
import {TaskService} from '../app/task/task.service';
import {TaskComponent} from '../app/task/task.component';
import {AppComponent }  from './app.component';
import {FormsModule ,ReactiveFormsModule} from '@angular/forms';
import {HttpModule } from '@angular/http';
import {RouterModule, Routes,Route } from '@angular/router';
import {AddNewTaskComponent} from './task/addtask.component';
import {EventComponent} from '../app/controller/event.component'
import {EventService} from '../app/service/event.service'
import {AddNewEventComponent} from '../app/controller/addevent.component'
import {AddEventService} from '../app/service/addevent.service'
import {WeatherComponent} from '../app/controller/weather.component'
import {LoginComponent} from '../app/controller/login.component'
import {RegisterComponent} from '../app/controller/register.component'
import {DashBoardcomponent} from '../app/controller/dashboard.component'
import {FeatureComponent,StoryComponents} from '../app/controller/feature.component'
import {AddTaskService} from '../app/task/addtask.service'
import {FeatureServices } from '../app/service/feature.services'
import {FileUploadComponents } from '../app/controller/fileUpload.component'
import {AngularFireModule } from 'angularfire2'
import {NgbModule } from '@ng-bootstrap/ng-bootstrap'


//index routing , redirect to login for the blank request
const indexRoutes:Route = {
  path:'',component:LoginComponent
}

// for all invalid routers , it will redirect to login component
const fallbackRoutes = {
  path:'**',component:LoginComponent
}


// order is important, routes get called on the order which they defined
const routes: Routes = [
  indexRoutes,

  { path: 'register', component: RegisterComponent },
  { path: 'dash', component: DashBoardcomponent,
    children: [
      {   // shows feature   as default
          path: '',
          redirectTo: 'feature',
          pathMatch: 'full'
      },
      {   
          path: 'events', 
          component: EventComponent,
            children:[
              {  
                  path: 'addevent',
                  component: AddNewEventComponent
              }
            ]
      },
      
      {  
          path: 'task',
          component: TaskComponent,
          children:[
              {  
                  path: 'addtask',
                  component: AddNewTaskComponent
              }
            ]
      },
      { 
         path: 'weather',
         component: WeatherComponent
      },
      { 
         path: 'feature',
         component: FeatureComponent,
      },
      { 
         path: 'uploads',
         component: FileUploadComponents,
      }

  ]
 }
];

export const routing = RouterModule.forRoot(routes);
 
      };
@NgModule({
  imports:   [ 
    BrowserModule ,  
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    routing,
    AngularFireModule.initializeApp(firebaseConfig),
    NgbModule.forRoot()
    ],
    providers: [TaskService,EventService,AddEventService,AddTaskService,FeatureServices],
    declarations: [
      AppComponent,
      LoginComponent,
      TaskComponent,      
      AddNewTaskComponent,
      EventComponent,
      AddNewEventComponent,
      WeatherComponent,
      RegisterComponent,
      DashBoardcomponent,
      FeatureComponent,
      FileUploadComponents,
      StoryComponents
     ],
  entryComponents: [StoryComponents],
    bootstrap: [
     AppComponent 
    ],

    
})
export class AppModule { }

this is my FeatureComponent class

import { Component, ViewChild,Input } from '@angular/core';
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
import {FeatureServices} from '../service/feature.services'
import {ComponentAction} from '../base/Component.action'
import {Features} from '../model/feature'
import { NgForm } from '@angular/forms';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';


@Component({
        selector: 'addstories',
        template: `
    
        <div class="modal-header">
            <h4 class="modal-title">Hi there!</h4>
            <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
            <p>Hello, {{name}}!</p>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
        </div>
    
    `    
})
export class StoryComponents {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

@Component({
    moduleId:module.id,
    selector:'feature',
    template:`
    
         <link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css">
         
        <div>
            <button class="btn btn-primary" (click)="listFeature()">All Features</button>
            <button class="btn btn-primary" (click)="showAddFeature()" >Add Features</button>
        </div>
        {{enableAddFeature}}
            <!-- loads child component list task and add new task -->
            <router-outlet></router-outlet>

            <form *ngIf="mode == 'insert' || mode == 'update' " #featureForm="ngForm" (ngSubmit)="processFeature(featureForm)">
                    <div class="form-group">
                        <label for="title">Feature Title</label>
                        <input type="text" class="form-control" id="title" name="title" placeholder="Enter Feature Title" [(ngModel)]=selectedFeature.title>
                    </div>
                    <div class="form-group">
                        <label for="descr">Feature Title</label>
                        <input type="text" class="form-control" id="descr" name="descr" placeholder="Enter Feature Description" [(ngModel)]=selectedFeature.descr>
                    </div>
                    <div class="form-group">
                        <label for="area">Feature Title</label>
                        <input type="text" class="form-control" id="area" name="area" placeholder="Enter Feature Area" [(ngModel)]=selectedFeature.area>
                    </div>                   
                    <button type="submit" class="btn btn-primary">Submit</button>
                    
                </form>
                <br/>
          <div class="container">
            <div class="row">
                <div class="">
                    <table class="table table-hover table-responsive table-bordered">
                        <thead>
                            <tr>
                                <th class="col-md-2">Title</th>
                                <th class="col-md-2">Descr</th>
                                <th class="col-md-1">Area</th>
                                <th class="col-md-1">User Stories</th>
                                <th class="col-md-1"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let feature of features">
                                <td><a data-toggle="modal" data-target="#myModal">{{feature.title}}</a></td>
                                <td>{{feature.descr}}</td>
                                <td>{{feature.area}}</td>
                                <td *ngIf ="feature.userstories == null" >0</td>
                                <td *ngIf ="feature.userstories != null" > {{feature.userstories.length}}</td>
                                <td><a class='btn btn-info btn-xs'  (click)="editFeature(feature._id)"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a (click)="deleteFeature(feature)" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td>
                            </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <button type="button" class="btn btn-default" (click)="open()">Open me!</button>

    `

})

export class FeatureComponent extends ComponentAction{

    features:Features[]
    mode :string = "start";
    isEditMode = false;
    selectedFeature: Features;
   

    constructor(private featureService:FeatureServices,private modalService: NgbModal){
       super();
       this.getFeatures();
    }

    getFeatures(){
        this.featureService.getFeatures()
        .subscribe(result => {
            console.log('features from mongo :'+JSON.stringify(result))
            this.features = result;
            console.log('this features :'+JSON.stringify(this.features))
        })  
    }


    open() {
        console.log('u clicked me');
        const modalRef = this.modalService.open(StoryComponents);
        modalRef.componentInstance.name = 'World';
        console.log('finshed');
  }
    

}

I have a list of features and each feature contains different user stories, so am planning to display the option to add user stories into the future on the modal.but while clicking the StoryComponent is not displaying.

Answer 1

I faced the same problem, the issue was with CSS. When I check the elements of the document, find that the modal elements was created but not showing in the screen. Below css has solved the issue.

   .modal-backdrop.fade
   {
     opacity: 0.5;
   }
   .modal-open .modal
   {
     opacity: 1;
   }

Answer 2

I also had same problem, and found out that I was not including css link for bootstrap in my styles.css. Although I was using ng-bootstrap with bootstrap v4.

@import url('../node_modules/bootstrap/dist/css/bootstrap.min.css');

Answer 3

ng-bootstrap only works with Bootstrap 4, not compatible with Bootstrap 3.

Answer 4

As @Ansar Samad pointed out it only works with bootstrap 4. If you need it in a Bootstrap 3 project you can checkout https://www.npmjs.com/package/ng-bootstrap-to-bootstrap-3

Intructions:

• npm install ng-bootstrap-to-bootstrap-3

• import 'ng-bootstrap-to-bootstrap-3' somewhere in your code.

That's it!