Issue
If I have a custom Angular Component, let's say, MyPanelComponent
/<my-panel>
how could I implement functionality where if something calls MyPanelComponent.closePanel()
I could allow something else the chance to stop the panel from closing?
What I have in mind is something like this:
home.component.html:
<my-panel (closing)="panelIsClosing($event)"> ... </my-panel>
home.component.ts
panelIsClosing(event: any) {
if (!allowPanelClose) {
event.stopPropagation();
}
}
So the expected behavior would be:
- Something calls
closePanel()
on the<my-panel>
instance. HomeComponent
is notified that the panel is trying to close and can optionally cancel the panel from closing.- If nothing cancels it, the
<my-panel>
instance will proceed to close.
I'm not sure where to start with this, but I think being able to use RxJS Observable
s would be ideal.
EDIT: I know the DevExtreme library does something like this, I think I found how they implement it but I haven't managed to wrap my head around it just yet, and it's probably more than I need...
Solution
In your PanelComponent, you could leverage the fact that the default behavior of EventEmitter
is synchronous*
close() {
this.closing.emit({
preventClose: () => {
this.closePrevented = true
}
});
if (this.closePrevented) {
return;
}
// Go on with closing implementation
}
A very bare-bones/basic demo here.
* Reference: EventEmitter docs
Answered By - webdevius
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.