MatDialog not displayed correctly

Question

I'm trying to use a MatDialog and based on this example I've implemented that dialog as follows:

import {Component, Inject, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {AuthenticationService} from '../../../service/authentication.service';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  constructor(private router: Router, public dialog: MatDialog) { }

  openDialog(): void {
    const dialogRef = this.dialog.open(CreateGroupDialogComponent);
  }    
}

@Component({
  selector: 'app-create-group-dialog',
  template: `
    <span>Hello World!</span>
  `
})
export class CreateGroupDialogComponent {
  constructor(public dialogRef: MatDialogRef<CreateGroupDialogComponent>) {  }
}

However, even though the dialog comes up as I press the according button, what I get it this:

The HTML template gets not displayed and the dimensions of the modal is wrong.

I don't see what the problem is. Why is the modal not correctly drawn?

This is the generated HTML code when opening the modal. As can be seen it's empty.

Answer 1

You need to add it to entryComponents on your @NgModule

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { MatDialogModule, MatButtonModule } from '@angular/material';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent, DialogOverviewExampleDialogComponent } from './home/home.component';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
    DialogOverviewExampleDialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MatDialogModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    DialogOverviewExampleDialogComponent
  ]
})
export class AppModule { }

Dup of Angular2 material dialog has issues - Did you add it to @NgModule.entryComponents?

Answer 2

I had this problem and solved it through ngZone.run() method. I am using Angular 13 so those entryComponents are not needed

So I have a page that opens a dialog (seperate compoenent) on a callback function ( like a feedback form )

But the dialog doesn't render all the angular related components but rendered only Html CSS that are written in refund-popup.component.html and refund-popup.component.css

This is because the callback comes from out of angular zone. So i am just making my dialog box run inside zone.

Solution

import { NgZone} from '@angular/core'
import { MatDialog } from '@angular/material/dialog';
import { RefundPopupComponent } from 'src/app/components/refund-popup/refund-popup.component';



@Component({
selector: 'app-create-profile',
templateUrl: './create-profile.component.html',
styleUrls: ['./create-profile.component.scss'],
})

export class CreateProfileComponent {
   constructor(private zone: NgZone , private dialog: MatDialog) {}
   
   someFunction() {
       this.zone.run(() => this.dialog.open(RefundPopupComponent}))

    }     
}

I have updated before and after images , after including ngZone run method

Answer 3

with the new since 9.0 ivy Compiler the entryComponents field is no longer necessary and has been deprecated.

I simply fixed this issue by restarting my ng serve.

Answer 4

UPDATE - APRIL 2021

With Ivy, the fix for this is no longer to add your component to entryComponents. I had this issue and to make it more confusing, it worked locally running in both dev and production, but didn't work in our deployed environment. It just silently failed. After banging my head against the wall all day I discovered a circular dependency that for some reason hadn't been throwing an error. Once I removed this dependency, everything works as expected.