Feature Request

[Robert L Collins Jr]

So, this would be really handy feature, I was going to try and pull it in but I was prevented from cloning the branch. I thought it would be great if you could add an input on "modal" to allow users to disable clicking to close the dialog!

In code you could have a getter/setter to set the value and be prepared for if the value is false:

private _closeWithoutButton: boolean; //stores the value for the getter
@input() set canCloseWithoutButton(value: boolean) {
this. _closeWithoutButton = value;
}

get canCloseWithoutButton() {
//this if statement protects against
if(this. _closeWithoutButton === null || typeof this. _closeWithoutButton === 'undefined'){
this. _closeWithoutButton = true;
}
return this. _closeWithoutButton;
}

Then modify your host listener for click to look at this extra variable.
@HostListener('click', ['$event'])
onContainerClicked(event: MouseEvent): void {
if ((event.target).classList.contains('modal') && this.isTopMost() && this. canCloseWithoutButton) {
this.close();
}
}

If I could get pull/push permissions I'd be happy to add this for you, otherwise I hope this is a useful suggestion.

[Gerard Rovira]

Hey @Rlcolli4!

What are you trying to do? It looks like you're trying to programatically close the modal by the source code above, which can be achieved by slightly modifying the example code by the following:

<!-- Example 1: Component Inside Modal -->
<modal #componentInsideModal>
<ng-template #modalHeader><h2>Component inside modal</h2></ng-template>
<ng-template #modalBody>
    <button (click)="componentInsideModal.close()">Close modal programatically</button>
  <app-modal-content>
  </app-modal-content>
</ng-template>
<ng-template #modalFooter></ng-template>
</modal>

Also, you can submit a pull request by cloning, modifying, pushing and submitting a pull request through GitHub. This also works with any other repo.

[Robert L Collins Jr]

I am trying to prevent a click outside of the modal dialog from closing the modal. In my use case, we want to allow the user to click outside the dialog but leave it open without closing. The @HostListener('click', [$event]) causes it to close every time without fail. I already have both the close button in the header as well as a second close button in the view to allow them to close the dialog and for our use case those are the only two exit methods we are looking for.

[Gerard Rovira]

@Rlcolli4 Would that work for you?

50977c7

[Robert L Collins Jr]

This would work perfect! That would do exactly what I am looking for.
I tried to pull it in on the master branch, is there a way I can install it in npm directly from the new branch you added? The version number in that package.json seems to be the same as the master branch.

[Gerard Rovira]

Tested and documented! Should be available as of v1.2.0 😃