CODEWITHSUNDEEP
angularng-bootstrap
Dany G
Dany G

Reputation: 345

Angular 2 NgbModal NgbActiveModal close event modal

I'm using Angular 2, I'm working with a form modal, I have two components, from one component I open the form modal this way: 

import { Component, OnInit, Output} from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { MyFormComponent } from '......./....';


@Component({
    moduleId: module.id,
    selector: 'my-component',
    templateUrl: 'my-component.html'
})
export class MyComponent implements OnInit {

    private anyData: any;
    private anyDataForm: any;


    constructor(
        private modalService: NgbModal
    ) { }

    ngOnInit(): void {
    }

    open() {
        const modalRef = this.modalService.open(MyFormComponent, { size: 'lg' });
        modalRef.componentInstance.anyDataForm = this.anyData;
    }

    possibleOnCloseEvet() { 
        //Do some actions....
    }

}

The open() method fires from a button on my-component.html

And on the Form component (the modal one) I use this for close the actual modal (from itself)

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

@Component({
    moduleId: module.id,
    selector: 'my-form-component',
    templateUrl: 'my-form-component.html'
})
export class MyFormComponent implements OnInit, OnDestroy {

    @Input() anyDataForm: any;

    constructor(
        public activeModal: NgbActiveModal
    ) {
    }

    ngOnInit(): void {
    }

    //Some form code...

    OnSubmit() {
        this.activeModal.close(); //It closes successfully
    }

    ngOnDestroy(): void {
    }

}

What I need to do is fire some kind of "on close" event on the caller component to perform some actions in the caller only when the modal is closed. (can't use event emmiter)

Is there any way for the component opener to know when the modal close? I have not found any clear example of this.

Upvotes: 20

Views: 54623

Answers (4)

octavian09
octavian09

Reputation: 159

in MyFormComponent you can add 

closeModal() { this.activeModal.close( anything ); }

Upvotes: 2

Hari
Hari

Reputation: 137

Instead of this.activeModal.close();, use this.activeModal.dismissAll(). It will close the popup successfully.

Upvotes: -3

David Njuguna
David Njuguna

Reputation: 833

On my ModalformComponent

 this.activeModal.close('success');

Then on my parent-component ListComponent

 this.modalRef = this.modalService.open(ModalformComponent);
 this.modalRef.componentInstance.title = 'Add Record';
 this.modalRef.result.then((result) => {
  if ( result === 'success' ) {
     this.refreshData(); // Refresh Data in table grid
  }
}, (reason) => {
});

Upvotes: 8

Adnan A.
Adnan A.

Reputation: 1982

Try this:

const modalRef = this.modalService.open(MyFormComponent, { size: 'lg' });
modalRef.componentInstance.anyDataForm = this.anyData;

modalRef.result.then((data) => {
  // on close
}, (reason) => {
  // on dismiss
});

Upvotes: 38

Related Questions