NgbModal.open not working in Angular 4

Question

I want to display a message in a modal using angular 4.0.0 and ng-bootstrap 1.0.0-beta.4 but it does not display the modal.

app-module.ts

@NgModule(         


        

Answer 1

Here is how I implemented in my application:

app.module.ts

@NgModule({
// ...
declarations: [
  LoginComponent,
  ModalComponent
],
imports: [
// ...
  NgbModule.forRoot()
],
entryComponents: [ModalComponent], //Only Modal component included here
bootstrap: [AppComponent]
})
export class AppModule { }

Component from where I am opening the modal. LoginComponent in your case :

imports ....
import { ModalComponent} from '../Modal/Modal.component'; //My actual Modal component which includes HTML for modal

    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    })
    export class LoginComponent {
       @ViewChild('examplemodal')
       private modalRef: TemplateRef;

       constructor(private modalService: NgbModal) { }

       //.... some event that fires onModalRequest() 

       onModalRequest(): void {
        const modalRef = this.modalService.open(ModalComponent); //Added Modal Component here

         modalRef.componentInstance.src = link;//anything u wish to pass to modal component @Input 

 modalRef.result.then((result) => {
      console.log(result);
      console.log('closed');
    }).catch( (result) => {
      console.log(result);
      console.log('cancelling');
    });

      }
    }

Modal.component.ts:

import { Component, OnInit, Input } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
  @Input() src;
  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {
  }

}

Modal.component.html:

  
    ×
  


          STUFF HERE

Here working Demo

PLEASE NOTE: You would need to install Bootstrap 4 for SCSS. npm install bootstrap -D and include its reference in your style.scss like :

@import "node_modules/bootstrap/scss/bootstrap";