CODEWITHSUNDEEP
angularmodal-dialog
Paige Bolduc
Paige Bolduc

Reputation: 131

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

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!

Upvotes: 0

Views: 2564

Answers (3)

danimal
danimal

Reputation: 1697

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.

Upvotes: 0

Pratap A.K
Pratap A.K

Reputation: 4517

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();
    }
}

Upvotes: 1

Luis Cazacu
Luis Cazacu

Reputation: 226

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

Upvotes: 2

Related Questions