diff --git a/.prettierignore b/.prettierignore
index d155fdb..baa2bec 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,4 +1,4 @@
# Add files here to ignore them from prettier formatting
/dist
/coverage
-/.nx/cache
\ No newline at end of file
+/.nx/cache
diff --git a/apps/playground/src/app/app.component.html b/apps/playground/src/app/app.component.html
index 5f56254..7e5c6df 100644
--- a/apps/playground/src/app/app.component.html
+++ b/apps/playground/src/app/app.component.html
@@ -146,3 +146,23 @@
Pass data to the dialog and get a result
+
+
+
Close Protection Guards
+
Test dialogs with close protection that only trigger on specific actions:
+
+
+
+
+ This dialog will ask for confirmation only when you press ESC key, not on backdrop click or close
+ button.
+
+
+
+
+
+
This dialog will ask for confirmation on any close action (ESC, backdrop, close button).
+
+
diff --git a/apps/playground/src/app/app.component.ts b/apps/playground/src/app/app.component.ts
index 21fb362..87a1caa 100644
--- a/apps/playground/src/app/app.component.ts
+++ b/apps/playground/src/app/app.component.ts
@@ -1,6 +1,6 @@
-import { Component, TemplateRef, Type, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, inject, TemplateRef, Type, ViewChild, ViewContainerRef } from '@angular/core';
import { ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
-import { interval } from 'rxjs';
+import { interval, firstValueFrom } from 'rxjs';
import { shareReplay } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
@@ -8,6 +8,7 @@ import { DialogCloseDirective, DialogService, DialogConfig } from '@ngneat/dialo
import { ResetLocationDialogComponent } from './reset-location-dialog.component';
import { TestDialogComponent } from './test-dialog.component';
+import { ConfirmationDialogComponent } from './confirmation-dialog.component';
@Component({
selector: 'app-root',
@@ -17,6 +18,9 @@ import { TestDialogComponent } from './test-dialog.component';
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
+ private fb = inject(UntypedFormBuilder);
+ dialog: DialogService = inject(DialogService);
+
@ViewChild('template', { static: true })
template: TemplateRef;
@@ -68,11 +72,6 @@ export class AppComponent {
backDropClicked = false;
- constructor(
- private fb: UntypedFormBuilder,
- public dialog: DialogService,
- ) {}
-
openDialog(compOrTemplate: Type | TemplateRef, config: DialogConfig) {
this.backDropClicked = false;
this.cleanConfig = this.normalizeConfig(config);
@@ -89,6 +88,38 @@ export class AppComponent {
return ref;
}
+ openDialogWithEscapeGuard(compOrTemplate: Type | TemplateRef, config: DialogConfig) {
+ const ref = this.openDialog(compOrTemplate, {
+ ...config,
+ guardTrigger: 'escape',
+ });
+
+ // guard will fire on escape keypress
+ ref?.beforeClose(async () => {
+ const confirmRef = this.showConfirmationDialog();
+ const result = await firstValueFrom(confirmRef.afterClosed$);
+ return result === true;
+ });
+
+ return ref;
+ }
+
+ openDialogWithAllGuard(compOrTemplate: Type | TemplateRef, config: DialogConfig) {
+ const ref = this.openDialog(compOrTemplate, {
+ ...config,
+ guardTrigger: 'all',
+ });
+
+ ref?.beforeClose(async () => {
+ const confirmRef = this.showConfirmationDialog();
+ const result = await firstValueFrom(confirmRef.afterClosed$);
+
+ return result;
+ });
+
+ return ref;
+ }
+
openDialogWithCustomVCR(compOrTemplate: Type | TemplateRef, config: DialogConfig) {
this.templateOfCustomVCRIsAttached = true;
@@ -115,6 +146,18 @@ export class AppComponent {
view.detectChanges();
}
+ private showConfirmationDialog() {
+ return this.dialog.open(ConfirmationDialogComponent, {
+ width: '400px',
+ data: {
+ title: 'Confirm Close',
+ message: 'Are you sure you want to close this dialog?',
+ confirmText: 'Yes, Close',
+ cancelText: 'Cancel',
+ },
+ });
+ }
+
openResetLocationDialog(config: DialogConfig) {
this.openDialog(ResetLocationDialogComponent, { ...config, draggable: true });
}
diff --git a/apps/playground/src/app/confirmation-dialog.component.ts b/apps/playground/src/app/confirmation-dialog.component.ts
new file mode 100644
index 0000000..3450593
--- /dev/null
+++ b/apps/playground/src/app/confirmation-dialog.component.ts
@@ -0,0 +1,30 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DialogRef } from '@ngneat/dialog';
+
+@Component({
+ selector: 'app-confirmation-dialog',
+ standalone: true,
+ imports: [CommonModule],
+ template: `
+
+
Are you sure you want to close this dialog ?
+
+
+
+
+
+ `,
+})
+export class ConfirmationDialogComponent {
+ private dialogRef = inject(DialogRef);
+
+ onConfirm() {
+ this.dialogRef.close(true);
+ }
+
+ onCancel() {
+ this.dialogRef.close(false);
+ }
+}
diff --git a/apps/playground/src/index.html b/apps/playground/src/index.html
index edbf155..97a65d6 100644
--- a/apps/playground/src/index.html
+++ b/apps/playground/src/index.html
@@ -8,6 +8,6 @@
-
+