CODEWITHSUNDEEP
javascriptangularmodal-dialogbootstrap-modalng-bootstrap
Kesem David
Kesem David

Reputation: 2245

Cannot open the simplest Modal

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/components/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 component is being used by another component 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

Upvotes: 1

Views: 2781

Answers (2)

Arjan
Arjan

Reputation: 23569

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 component (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'})

Upvotes: 3

Kesem David
Kesem David

Reputation: 2245

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 :)

Upvotes: 6

Related Questions