how can I close NbDialogModule automatically after executing a function? (not on backdrop click)

4.6k views Asked by At

I'm using Nebular Angular UI Library. I'm trying different ways to find a way to close NbDialogModule but I couldn't get anywhere! Any one can help me here? Here is one of the ways I've tried:

 constructor( private dialogService:NbDialogService, private ref:NbDialogRef<DialogNamePromptComponent>)

And in my class componant:

    close() {
    this.ref.close();
  }

And the error I get:

core.js:6241 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(ViewsModule)[NbDialogRef -> NbDialogRef -> NbDialogRef -> NbDialogRef]: NullInjectorError: No provider for NbDialogRef! NullInjectorError: R3InjectorError(ViewsModule)[NbDialogRef -> NbDialogRef -> NbDialogRef -> NbDialogRef]: NullInjectorError: No provider for NbDialogRef!

1

There are 1 answers

2
Jason White On BEST ANSWER

You can close the dialog using the dialog reference. How you get the dialog reference depends on where you're trying to close the dialog from

From within the component being rendered in the dialog...

If you're trying to close the dialog from within the component that is rendered in the dialog (DialogNamePromptComponent), you can inject the dialog reference in the constructor of the component (DialogNamePromptComponent). You can then use this reference to call close().

export class DialogNamePromptComponent {
  constructor(private dialogRef: NbDialogRef) {}

  public closeDialog(): void {
    this.dialogRef.close();
  }
}

From within the component opening the dialog...

If you wanting to close the dialog from within the component opening the dialog, you will use the dialog reference return from the open(...) method of the dialog service.

export class AppComponent {
  private dialogRef: NbDialogRef;

  constructor(private dialogService: NbDialogService) {}

  public openDialog(): void {
    // Open will return a dialog reference that we can use to close
    // the dialog from elsewhere.
    this.dialogRef = this.dialogService.open(DialogNamePromptComponent, { ... });
  }

  public closeDialog(): void {
    // We can use the dialog ref to close the dialog
    if (this.dialogRef) {
      this.dialogRef.close();
    }
  }
}

https://akveo.github.io/nebular/docs/components/dialog/overview#nbdialogservice