1

I need a help on mat dialog render on screen. adding the steps which i followed to perform this action below.

The packages installed in the project is

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@angular/cdk                      6.4.7
@angular/flex-layout              9.0.0-beta.29-7a22fba
@angular/material                 6.4.7
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.41.2

Next created login component

html file

<mat-toolbar color="primary">
        Login 
      <span class="flex-spacer"></span>
      <button mat-button mat-dialog-close>&times;</button>
    </mat-toolbar>

Ts file

import { Component, OnInit } from '@angular/core';
import {MatDialog, MatDialogRef} from '@angular/material';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef<LoginComponent>) { }

  ngOnInit(): void {
  }

}

Then i have included in header component

html code

<a mat-button (click)="openLoginForm()"><span class="fa fa-sign-in fa-lg"></span> Login</a>

Ts code

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material';
import { LoginComponent } from '../login/login.component';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
constructor(public dialog: MatDialog ) { }

  ngOnInit() {
  }

  openLoginForm() {
    this.dialog.open(LoginComponent, {width: '500px', height: '450px'});
  }

}

Called in app module

....
import { MatDialogModule } from '@angular/material/dialog';
import { LoginComponent } from './login/login.component';
....
@NgModule({
  declarations: [
...
  LoginComponent
  ],
imports: [
...
MatDialogModule,
  ],
 entryComponents: [LoginComponent],
  providers: [],
  bootstrap: [AppComponent],

})

The dialog comes as empty at the left corner while clicking

enter image description here

Also the console error is below

ERROR TypeError: Cannot read property 'hasAttached' of undefined
    at MatDialogContainer.attachComponentPortal (dialog.js:170)
    at MatDialog._attachDialogContent (dialog.js:708)
    at MatDialog.open (dialog.js:603)
    at HeaderComponent.openLoginForm (header.component.ts:16)
    at HeaderComponent_Template_a_click_16_listener (header.component.html:8)
    at executeListenerWithErrorHandling (core.js:21693)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:21742)
    at HTMLAnchorElement.<anonymous> (platform-browser.js:934)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41264)

Please some one help on this issue.

Jeya sankar
  • 75
  • 1
  • 7

2 Answers2

1

Add dialog component in the EntryComponents in the app.modules.ts

Proveniebam
  • 47
  • 6
0

It might have to do with compatibility issues with Angular 9+ and older versions of Angular material like 6.4.7. I had the same problem and here is how I solved it.

  1. Open package.json and change the versions of Angular Material, Angular Animations, Angular CDK and also flex-layout to the latest versions. For me, I changed to this:
"@angular/animations": "^10.1.4",
"@angular/cdk": "^10.2.4",
"@angular/material": "^10.2.2",
"@angular/flex-layout": "^10.0.0-beta.32",

  1. Delete node modules folder.

  2. Run npm install in the terminal.

  3. Ensure you placed dialogComponent in entryComponents.

  4. Try again, run ng serve --open.

This worked for me; hope it works for others.

do-ri
  • 7
  • 3