Is there a way for a dialog to open itself?

Question

i have an angular material design dialog component on a route and i'd like to open the dialog when i navigate to that route.

is there a way for the mdDialog to open itself rather than pointing it to a class?

Call the dialog `open` method in `ngAfterViewInit()` lifecycle hook — FAISAL, Aug 30 '17 at 16:00
Yes, it's possible to open a dialog. You'll still need to construct the dialog in the same way as before, but instead of calling a method on click to use `.open()` you'll direct call it within a `ngAfterViewChecked() { }`. — Z. Bagley, Aug 30 '17 at 16:00

score 3 · Accepted Answer · answered Aug 30 '17 at 17:00

3

You can make dialog component to be navigable via routes and it can open itself.

 @Component({
    selector: 'app-dialog-data',
    template: `<ng-template>dialog-data works!</ng-template>`,
    styleUrls: ['./dialog-data.component.scss']
  })
  export class DialogDataComponent implements AfterViewInit {
    @ViewChild(TemplateRef) ref;

    constructor(private dialog: MdDialog) {}

    ngAfterViewInit() {
      setTimeout(() => {this.dialog.open(this.ref);}, 0);
    }
  }

answered Aug 30 '17 at 17:00

Julia Passynkova

17,256
6
33
32

i added my component to the entryComponents but i'm still getting this error: 'No component factory found for undefined. Did you add it to @NgModule.entryComponents' – CurlyFro Aug 30 '17 at 17:21
https://stackblitz.com/edit/angular-tr6fai?embed=1&file=app/app.module.ts – Julia Passynkova Aug 30 '17 at 17:35
next question: i need to navigate somewhere if the user clicks outside the dialog. if i had access to DialogRef, i'd use the afterClosed. any easy way to do this? – CurlyFro Aug 30 '17 at 17:57
got it. using afterAllClosed – CurlyFro Aug 30 '17 at 18:30
1

@CurlyFro Can you explain how you got the "No component factory found for undefined" error resolved? I cannot find the answer for this anywhere – Rastographics Apr 06 '18 at 15:26
@Rastographics did you add your component to your modules entryComponents? – CurlyFro Apr 07 '18 at 19:30

score 1 · Answer 2 · answered Aug 30 '17 at 16:04

From the angular material documentation, you manipulate your dialog component this way :

constructor(public dialog: MdDialog) {}

  openDialog(): void {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal } // random irrelevant data
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;                          // random irrelevant data
    });
  }
}

From your needs, there are several use cases :

Open it on a specific route / component : Simply call the openDialog() method in the ngAfterViewInit() { } event.
Open it after any navigation event : Use the angular router on a top level component (such as AppComponent) and listen to the events (example : Show loading screen when navigating between routes in Angular 2)

Is there a way for a dialog to open itself?

2 Answers2