CODEWITHSUNDEEP
javascripttwitter-bootstrapangularng2-bootstrap
MikeDub
MikeDub

Reputation: 5283

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: https://ng-bootstrap.github.io/#/components/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.component.ts:

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

app.component.html

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

sas-modal.component.ts

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

  constructor(private modalService: NgbModal) {}

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

sas-modal.component.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>

Upvotes: 1

Views: 10527

Answers (3)

saurav1405
saurav1405

Reputation: 409

sas-component.ts should be : - 

import { NgbModal, NgbActiveModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
...
@Component({
  selector: 'sas-modal',
  templateUrl: './sas-modal.component.html',
  styleUrls: ['./sas-modal.component.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).

Upvotes: 2

MikeDub
MikeDub

Reputation: 5283

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 component and content component.

This is how I got it working:

>> app.module.ts

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

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

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

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

>> app.component.html:

The ngbModalContainer declaration should be along side the component declaration in the parent component 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-component></sas-modal-component>

>> sas-modal.component.ts:

This file combines both the control component [sas-modal-component] (that opens the content / template) and the content component [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-component',
  templateUrl: 'sas-modal.component.html'
})
export class SasModalComponent {
  constructor(private modalService: NgbModal, private compiler: Compiler) {  }

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

>> sas-modal.component.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>

Upvotes: 0

Thinh Ngo
Thinh Ngo

Reputation: 36

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

Example:

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

Upvotes: 1

Related Questions