No After click event on modal closing?

Question

When i am closing a modal, i need to call a function (to false or reset the content in the modal using form controls) but i didn't find any handler for the event after click, how i could do this ?

 <clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="true">
        ...
 </clr-modal>

Thanks.

Treadwell

Answer 1

[(clrModalOpen)]="opened" is just syntactic sugar for [clrModalOpen]="opened" (clrModalOpenChange)="opened = $event" (see https://angular.io/guide/template-syntax#two-way-binding--- for more information).

So in your case, the event handler is (clrModalOpenChange). Also note that in Angular, outputs are not fired when the change comes from the corresponding input in a two-way binding, because it would lead to a loop. Which means if your own Close button updates the modal through the input, the output will not be fired. The solution is simply to make sure that your handler is called both from our output and from your own method to close the modal if there is one.

Because I was asked for a live example, here are two of them:

1. Elegant solution with getter and setter, keeps the two-way binding syntax: https://plnkr.co/edit/7J8MfH?p=preview
2. Explicit listener with de-sugared version: https://plnkr.co/edit/6cWHwu?p=preview

I do have a preference for the first one because on such simple getters and setters, there are no performance risks. But I figured since I mentioned the de-sugared syntax, I might as well show an example.

Polestar

Eudes, your explanation is clear. But I could not get it working. Can you give a live example? Further, I guess you are part of the team who develop Clarity. Although I am using it for some time, I still not able to fully get everything (for example, this Banana-In-a-Box notation) from the Clarity documentation. Do you have plan to elaborate / improve (give reference to Angular as and when required) in your documentation? – Iphigenia

@SoumyaKanti: I added a couple of plunkers to the answer. Regarding the documentation, I don't think it's our role to re-document what's already on the Angular website. We expect people using Clarity to know standard Angular template syntax and other non-Clarity features. – Polestar