i basically copied the Modal example from ng-bootstrap Modal Documentaion and it seems like im unable to open it.

As soon as I click on the button to open the Modal, Chrome's console shouts:

Uncaught TypeError: Cannot set property stack of [object Object] which has only a getter

Thanks in advance!

EDIT:

This is my Modal Component code:

import {Component} from '@angular/core';

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'add-transaction',
    templateUrl: './app/ponents/add-transaction/AddTransaction.html'
})
export class AddTransaction {
    closeResult: string;

    constructor(private modalService: NgbModal) {}

    open(content) {
        this.modalService.open(content).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
            this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        });
    }

    private getDismissReason(reason: any): string {
        if (reason === ModalDismissReasons.ESC) {
            return 'by pressing ESC';
        } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
            return 'by clicking on a backdrop';
        } else {
            return  `with: ${reason}`;
        }
    }
}

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

<button class="btn btn-success" (click)="open(content)">New Transaction</button>

<pre>{{closeResult}}</pre>

This Modal ponent is being used by another ponent withing a <th>:

<th><add-transaction></add-transaction></th>

UPDATE:

It might be worth noting that while debugging it, I could see that the error pops when on the open method when this.modalService.open(content) is being invoked

i basically copied the Modal example from ng-bootstrap Modal Documentaion and it seems like im unable to open it.

As soon as I click on the button to open the Modal, Chrome's console shouts:

Uncaught TypeError: Cannot set property stack of [object Object] which has only a getter

Thanks in advance!

EDIT:

This is my Modal Component code:

import {Component} from '@angular/core';

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'add-transaction',
    templateUrl: './app/ponents/add-transaction/AddTransaction.html'
})
export class AddTransaction {
    closeResult: string;

    constructor(private modalService: NgbModal) {}

    open(content) {
        this.modalService.open(content).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
            this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        });
    }

    private getDismissReason(reason: any): string {
        if (reason === ModalDismissReasons.ESC) {
            return 'by pressing ESC';
        } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
            return 'by clicking on a backdrop';
        } else {
            return  `with: ${reason}`;
        }
    }
}

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

<button class="btn btn-success" (click)="open(content)">New Transaction</button>

<pre>{{closeResult}}</pre>

This Modal ponent is being used by another ponent withing a <th>:

<th><add-transaction></add-transaction></th>

UPDATE:

It might be worth noting that while debugging it, I could see that the error pops when on the open method when this.modalService.open(content) is being invoked

• javascript
• angular
• modal-dialog
• bootstrap-modal
• ng-bootstrap

• Please should us your code – Daniel Commented Sep 4, 2016 at 9:00

2 Answers 2

Heads up! The NgbModal service needs a container element with the ngbModalContainer directive. The ngbModalContainer directive marks the place in the DOM where modals are opened. Be sure to add somewhere under your application root element.

This was what i was missing, the code example does not contain that ngbModalContainer on the template.

Adding it solved my problem and now the Modal pops!

Hope it'll be helpful to somebody :)

Since 1.0.0-alpha.21 (2017-03-15), ngbModalContainer is no longer used to determine the position:

BREAKING CHANGES

model: The ngbModalContainer directive is no longer needed and was removed from this project. Just remove any references to the <template ngbModalContainer></template> from your projects.

Instead, a container option was added, which defaults to <body>:

const containerSelector = options.container || 'body';
const containerEl = document.querySelector(containerSelector);

When scoping the Twitter Bootstrap CSS to one's own ponent (such as <my-app>) rather than including it globally, then due to the missing styling it might seem that the modal opens below your application. In that case, explicitly set the container:

this.modalService.open(myContent, {container: 'my-app'})