CODEWITHSUNDEEP
angulardialogangular-materialfactory
Magda
Magda

Reputation: 55

How to create an Angular Material Dialog factory?

I have a few dialogs in one component. They all look pretty much the same so I would like to make a function that would call different dialogs with different messages. This is what I have already come up with: current dialog call:

 deActivate(user: UsersList) {
     const dialog = this.dialog.open(DeactivateUserDialogComponent, {
         height: '20%',
         width: '50%',
         data: {
             dialogMessage: user
         }
     });
     dialog.componentInstance.onChange.subscribe(() => this.getUsers());
 }

So my idea is to make a universal Dialog:

openDialog(dialogName, message) {
     const dialog = this.dialog.open(dialogName, {
         data: {
             dialogMessage: message
         }
     });
     dialog.componentInstance.onChange.subscribe(() => {
         this.getUsers(), dialog.close();
     });
 }

And call the method:

openDialog(userDeleted: UsersList) {
    this.openDialog(DeactivateUserDialogComponent, user);
}

but the problem is with the dialog.componentInstance "it cannot exist on type {}". I need the componentInstance to make an update in the parent component (this is the only way it works without refresh). So what can I do make the factory and not worry about the refresh?

Upvotes: 1

Views: 229

Answers (1)

Magda
Magda

Reputation: 55

Ok, it wasn't so hard :) Actually, I don't need the componentInstance. Instead I need to close the dialog in the dialog component and afterClose in parent component. Works just fine

Upvotes: 1

Related Questions