javascript - How to display simple modal with ng-bootstrap (Angular 2)

I'm trying to show a simple Modal with Ng2-bootstrap as per the following page:

However I am getting errors such as:

Error in ./AppComponent class AppComponent - inline template:7:0 caused by: Missing modal container, add <template ngbModalContainer></template> to one of your application templates.

ORIGINAL EXCEPTION: Missing modal container, add <template ngbModalContainer></template> to one of your application templates.

What am I doing wrong? I've got the following code to try and make this work:

Index.html:

<body> <app-root>Loading...</app-root> <template ngbModalContainer></template> </body>

app.module.ts:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; ... @NgModule({... imports: [ BrowserModule, FormsModule, HttpModule, NgbModule.forRoot() ...

appponent.ts:

import { NgbModal, NgbActiveModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { SasModalComponent } from './sas-modal/sas-modalponent';
...
constructor(..., private modalService: NgbModal){
}
...
open() {
  console.log("trying to open");
  const modalRef = this.modalService.open(SasModalComponent);
}

appponent.html

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

sas-modalponent.ts

import { NgbModal, NgbActiveModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
...
@Component({
  selector: 'sas-modal',
  templateUrl: './sas-modalponent.html',
  styleUrls: ['./sas-modalponent.css']
})
export class SasModalComponent {
  closeResult: string;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content);
  }
}

sas-modalponent.html:

<template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</template>

I'm trying to show a simple Modal with Ng2-bootstrap as per the following page: https://ng-bootstrap.github.io/#/ponents/modal

However I am getting errors such as:

Error in ./AppComponent class AppComponent - inline template:7:0 caused by: Missing modal container, add <template ngbModalContainer></template> to one of your application templates.

ORIGINAL EXCEPTION: Missing modal container, add <template ngbModalContainer></template> to one of your application templates.

What am I doing wrong? I've got the following code to try and make this work:

Index.html:

<body> <app-root>Loading...</app-root> <template ngbModalContainer></template> </body>

app.module.ts:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; ... @NgModule({... imports: [ BrowserModule, FormsModule, HttpModule, NgbModule.forRoot() ...

app.ponent.ts:

import { NgbModal, NgbActiveModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { SasModalComponent } from './sas-modal/sas-modal.ponent';
...
constructor(..., private modalService: NgbModal){
}
...
open() {
  console.log("trying to open");
  const modalRef = this.modalService.open(SasModalComponent);
}

app.ponent.html

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

sas-modal.ponent.ts

import { NgbModal, NgbActiveModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
...
@Component({
  selector: 'sas-modal',
  templateUrl: './sas-modal.ponent.html',
  styleUrls: ['./sas-modal.ponent.css']
})
export class SasModalComponent {
  closeResult: string;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content);
  }
}

sas-modal.ponent.html:

<template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</template>

Share Improve this question edited Dec 8, 2016 at 4:42 asked Dec 8, 2016 at 2:31 MikeDub 5,3034 gold badges32 silver badges44 bronze badges

Add entryComponents: [SasModalComponent] in your appModule file in @NgModule() – saurav1405 Commented Dec 8, 2016 at 6:20
Your constructor() in sas-modal.ponent.ts should be :- constructor(public activeModal: NgbActiveModal){}. Dont pass modalService in the constructor it and no need to declare the open function in sas-modal.ponent.ts – saurav1405 Commented Dec 8, 2016 at 6:23

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

sas-ponent.ts should be : -

import { NgbModal, NgbActiveModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
...
@Component({
  selector: 'sas-modal',
  templateUrl: './sas-modal.ponent.html',
  styleUrls: ['./sas-modal.ponent.css']
})
export class SasModalComponent {
  closeResult: string;

  constructor(private activeModal: NgbActiveModal) {}

}

app.module.ts Should contain SasModuleComponent in the declaration array and a entryComponent field that contains SasModuleComponent : -

@NgModule({
  imports: [ BrowserModule,
   FormsModule , HttpModule, NgbModule.forRoot()],
  declarations: [ AppComponent, SasModalComponent],
  bootstrap: [ AppComponent ],
  entryComponents: [SasModalComponent]
})

You need a entryComponent field in @NgModule()in your module file because you are loading the SasModuleComponent dynamically here this.modalService.open(SasModalComponent).

Try adding <template ngbModalContainer></template> in app-root template

Example:

@Component({
  selector: 'app-root',
  template: '<template ngbModalContainer></template>'
})

saurav1405's answer provided me with enough useful information to figure this out, however his solution didn't 100% work for me.

For this reason I've upvoted saurav1405's response, but couldn't claim is as the answer as I've had to do a bit more to get it to work for me.

The main difference was having a seperate control ponent and content ponent.

This is how I got it working:

>> app.module.ts

Note: saurav1405 suggested putting ModalContentComponent into declarations, (possibly a typo after reviewing his ments again).

but you need to put the actual modal custom modal ponents in here (in this case SasModalComponent & SasModalContent).

And the content ponent (SasModalContent) needs to be the entry ponent.

import { SasModalComponent, SasModalContent } from './sas-modal/sas-modal.ponent';
...
@NgModule({
  declarations: [
    AppComponent,
    SasModalComponent,
    SasModalContent
  ],
  entryComponents: [SasModalContent],
...

>> app.ponent.html:

The ngbModalContainer declaration should be along side the ponent declaration in the parent ponent html template, not in the index.html, which I think was the main reason I was getting the errors posted in the question.

<template ngbModalContainer></template>
<sas-modal-ponent></sas-modal-ponent>

>> sas-modal.ponent.ts:

This file bines both the control ponent [sas-modal-ponent] (that opens the content / template) and the content ponent [sas-modal-content] (that has the reference to the active modal and modal template).

import {Component, Input, Compiler } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'sas-modal-content',
  templateUrl: 'sas-modal-content.html'
})
export class SasModalContent {
  @Input() name;
  constructor(public activeModal: NgbActiveModal) {  }
}

@Component({
  selector: 'sas-modal-ponent',
  templateUrl: 'sas-modal.ponent.html'
})
export class SasModalComponent {
  constructor(private modalService: NgbModal, private piler: Compiler) {  }

  open() {
    //this.piler.clearCacheFor(SasModalContent); //Only use when the template is caching when you don't want it to.
    const modalRef = this.modalService.open(SasModalContent);
    modalRef.ponentInstance.name = 'World';
  }
}

>> sas-modal.ponent.html: Contains the button / control to open the modal

<h2> Click the button to open the modal</h2>
<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

>> sas-modal-content.html: Holds the modal template - can be whatever you want

<div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    <h4 class="modal-title">Hi there!</h4>
</div>
<div class="modal-body card-info">
    <h3 style="color: white;">So nice to meet you</h3>
    <h4 style="color: white;">This modal is great!</h4>
</div>
<div class="modal-footer ">
    <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to display simple modal with ng-bootstrap (Angular 2) - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)