Angular2 ng-bootstrap Modal close in component

Question

I will close a bootstrap modal in my component via save when input is ok. I'm using angular v2.4.1 and ng-bootstrap 1.0.0-alpha.19

I've tried this solution but I get following error:

No provider for ViewContainerRef

I tried to add ViewContainerRef to my module.ts but I get following error:

Type 'typeof ViewContainerRef' is not assignable to type 'Provider'

Here the code in my component:

import { Component } from '@angular/core'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: '[add-name]', templateUrl: '../add-name.html' }) export class MyComponent { public errorMessage: string = ''; constructor(public modalActive: NgbActiveModal) {} public saveNewStuff(name: string) { this.errorMessage = ''; if (name === '' || name === undefined) { this.errorMessage = 'some message'; } else if (this.errorMessage === '') { this.modalActive.close(); } } }

I also tried to use NgbModalRef like

 constructor(public modalRef: NgbModalRef) {} public closeModal() { this.modalRef.close(); this.modalRef.dismiss(); }

But this is not working at all. I not even getting an error message.

did you add NgbModule in your ngModule?

Habeeb
– Habeeb

2017-02-06 13:37:08 +00:00
Commented Feb 6, 2017 at 13:37 — Habeeb
– Habeeb, Commented Feb 6, 2017 at 13:37
yeah I add "NgbModule.forRoot()" in imports of @NgModule()

trololololol
– trololololol

2017-02-06 13:47:45 +00:00
Commented Feb 6, 2017 at 13:47 — trololololol
– trololololol, Commented Feb 6, 2017 at 13:47

Steffets · Accepted Answer · 2017-02-07 15:14:45Z

11

You have to save the reference to the openend modal window to close it later like:

public mr: NgbModalRef; ... public openModal(content: string) { this.mr = this.modalService.open(content); } ... public closeModal() { this.mr.close(); }

answered Feb 7, 2017 at 15:14

Steffets

1262 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

trololololol Over a year ago

thats it! Thank you soooooo much :3

sofly Over a year ago

This still works lovely. Don't forget to import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

Prasad Shetty · Accepted Answer · 2017-05-08 05:28:56Z

Using bootstrap modal Popup in angular 2 :

In Html : Just copy and paste bootstrap modal popup code.

In Ts File :

import {Component} from 'angular2/core'; @Component({ selector: 'mymodal', templateUrl: 'html page url' }) export class ModalComp { }

Then you can use this component in any html view by importing in TS file.

import {ModalComp} from '/your component location';

In View :

<mymodal></mymodal>

Collectives™ on Stack Overflow

Angular2 ng-bootstrap Modal close in component

2 Answers 2

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Linked

Related