How to correctly configure MatDialog?

Question

Trying to show MatDialog in my Angular page when the user inputs wrong username and password combination, instead I get one that shows my login page itself. See Image below: Dialog

Here is what I have tired in the LoginComponent:

     login() : void {
              const dialogConfig = new MatDialogConfig();
  this.utilisateurService.getLogin(this.username,this.password).subscribe((util: UtilisateurModel) => {
              this.utilisateur = util;
              if(util)
              {
                this.router.navigate(["home"]);
              }
              else
              {
                dialogConfig.disableClose = true;
                dialogConfig.autoFocus = true;
                dialogConfig.data = {
                  id: 1,
                  title: 'Désolé, nom d\'utilisateur ou mot de passe non reconnu.'
              };
          this.dialog.open(LoginComponent, dialogConfig);
              }
            });

          }

I tried this answer by adding entryComponents in the @NgModule of app.module.ts but with no changes:

     providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    LoginComponent
  ]

Thank you in advance

What is the problem then? Got any error? – Prashant Pimpale Feb 23 '19 at 13:04 — Prashant Pimpale, Feb 23 '19 at 13:04

Amir Arbabian · Accepted Answer · 2019-02-23T12:48:06.067

0

At this line:

this.dialog.open(LoginComponent, dialogConfig);

you should pass your another component that says something wrong with credentials instead of LoginComponent. So you need to define new component specificly to display that error message, pass it to open() and don't forget to register it in entryComponents. Hope that helps.

edited Feb 23 '19 at 12:48

answered Feb 23 '19 at 12:46

Amir Arbabian

3,419
1
6
12

So do I have to design that as well? – SourceCode Feb 23 '19 at 12:47
Yeah, just new component, with simple html template of what you want to display, and that is it – Amir Arbabian Feb 23 '19 at 12:49
Remember to add the new `NewComponent` to your entry components of the module. You can remove `LoginComponent` from entry components. To pass data to the new component you need to add whatever data you need using the `data` object of `MatDialogConfig`. You can consume that data inside the new component by using an injection token `[MAT_DIALOG_DATA][1]` in its constructor. [1]: https://material.angular.io/components/dialog/api#MAT_DIALOG_DATA – Johan Swanepoel Feb 23 '19 at 13:32

How to correctly configure MatDialog?

1 Answers1