Closing Dialog on router navigation

[salarenko]

Issue type

I'm submitting a

• bug report
• feature request

Issue description

Current behavior:

• Open dialog
• Navigate programmatically to another page
• Dialog remains opened

Expected behavior:

• Possibility to configure dialog to close on navigation
• Dialog closes after navigation

Other information:

Currently it is possible to achieve desired behaviour by handling each dialog separately or extending Nebular code, but lack of this crucial functionality adds non obvious work for the developers.

Furthermore this issue is not only a "UI problem", as when application navigates to the page which is not embedded in nb-overlay, dialog is removed from the DOM, but references are still active causing memory leaks.

Angular, Nebular
Angular v.15
Nebular v.10

[PieterjanDeClippel]

Hi, You can easily create a custom directive which injects the DialogService, add the ngOnDestroy lifecycle hook to this directive and call the service. Somewhat like this Only I don't yet know how to get the DialogRef.

[salarenko]

@PieterjanDeClippel

I just usually extend Nebular services, to add features:

@Injectable()
export class MyDialogService extends NbDialogService {
  constructor(
    @Inject(NB_DOCUMENT) document: Document,
    @Inject(NB_DIALOG_CONFIG) globalConfig: NbDialogConfig,
    overlay: NbOverlayService,
    injector: Injector,
    positionBuilder: NbPositionBuilderService,
    componentFactoryResolver: ComponentFactoryResolver,
    private _router: Router
  ) {
    super(document, globalConfig, positionBuilder, overlay, injector, componentFactoryResolver);
  }

  public override open<T>(
    content: Type<T> | TemplateRef<T>,
    userConfig?: Partial<NbDialogConfig<Partial<T> | string> & { closeOnRouting: boolean }>
  ): NbDialogRef<T> {
    const dialogRef = super.open(content, userConfig);

    if (userConfig?.closeOnRouting !== false) {
      const subscription = this._router.events
        .pipe(filter(event => event instanceof NavigationStart))
        .subscribe(() => dialogRef.close());

      dialogRef.onClose.subscribe(() => subscription.unsubscribe());
    }

    return dialogRef;
  }
}

At root:

{ provide: NbDialogService, useClass: MyDialogService }

But would be nice to have some of the basic options out of the box

[PieterjanDeClippel]

@salarenko Careful with extending angular directives/services. I had some unexpected behavior in the past: StackOverflow

Solution was to rather inject the angular directive

[shljsl75891]

#3282