Angular2 ng2-bs3-modal: how to execute a function every time the modal closes?

Question

I'm using the ng2-bs3-modal library to write a modal using Typescript and Angular 2. It's mostly working, but I can't figure out how to make a function execute every time the modal closes. Right now, if you change some state via the modal, close it, and then re-open it, the state remains changed. However, I want to be able to call a "clear()" function (or do some other behavior) every time the modal is closed.

I've read the documentation here: https://github.com/dougludlow/ng2-bs3-modal, and it seems to me that there ought to be a way I can use the onClose EventEmitter to call a function every time the modal is closed, but I can't find an example anywhere of how to do this.

Here's a paired-down version of my code:

<modal #Modal> <modal-header [show-close]="true">Header </modal-header> <div class="modal-body"> <form (ngSubmit)="onConfirm()"> <label>NAME</label> <input type="text" [(ngModel)]="name"/> </form> </div>

and here's the typescript file:

import { Component, Input, Output, EventEmitter, ViewChild } from "@angular/core"; import { MODAL_DIRECTIVES, ModalComponent } from "ng2-bs3-modal/ng2-bs3-modal"; @Component({ selector: "modal", templateUrl: "/modal.html", directives: [MODAL_DIRECTIVES] }) export class SaveSearchModalDirective { @Output() Confirm = new EventEmitter<string>(); @ViewChild("Modal") Modal: ModalComponent; name: string; constructor() { } open() { // do some things } clear() { // do some things } onConfirm() { // do more things this.Confirm.emit(this.name); this.close(); } }

Again, I've shaved out all of the details, and the modal functionality is MOSTLY working. But how to I get my clear( ) function to be called every time the modal is closed?

Thanks!

Have you tested to bind the function to the emitter in your template ? <modal (onClose)="clear()"... — Frank Bessou
– Frank Bessou, Commented Sep 8, 2016 at 21:46

Luis Cazacu · Accepted Answer · 2016-09-08 22:01:15Z

Probably you need to change the html template to:

<modal #Modal (onClose)="clear();">

If the event passes some event args it should be

<modal #Modal (onClose)="clear($event);">

and your clear method should receive an input argument.

Probably you should listen to the "onDismiss" event as well...

Check out this tutorial on event emitter: https://toddmotto.com/component-events-event-emitter-output-angular-2

yes, turned out that onDismiss() is the method I was looking for! I was able to find an example of it being used here: github.com/dougludlow/ng2-bs3-modal/tree/master/demo

Pratap A.K · Accepted Answer · 2016-12-12 07:00:15Z

Have normal angular2 click event to call your typescript function (click)="closeModal()"

<modal #myModal [keyboard]="false" [backdrop]="'static'"> <modal-header> <button (click)="closeModal()"></button> </modal-header> <modal-body> //body </modal-body> </modal>

then in your component import ModalComponent

component.ts

 import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal'; export class ModalExampleComponent { @ViewChild('myModal ') modal: ModalComponent; closeModal() { this.modal.close(); } }

danimal · Accepted Answer · 2017-06-23 12:12:52Z

In addition to Luis' answer, you can subscribe to the event emitter in your component and perform some action of the back of the emission, for example:

@ViewChild('myModal ') modal: ModalComponent; ... ngOnInit() { ... this.modal.onClose.subscribe(_ => { // code to do something when the modal is closed } ... }

You can also use the onOpen and onDismiss() EventEmitters in a similar way.

Collectives™ on Stack Overflow

Angular2 ng2-bs3-modal: how to execute a function every time the modal closes?

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related