CODEWITHSUNDEEP
angular
Stefan Falk
Stefan Falk

Reputation: 25447

MatDialog not displayed correctly

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:

enter image description here

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.

enter image description here

Upvotes: 25

Views: 30578

Answers (4)

Shrihari
Shrihari

Reputation: 123

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

Before ngZone run

After Adding ngZone

Upvotes: 9

Jadamae77
Jadamae77

Reputation: 928

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.

Upvotes: 0

Roy Ammerschuber
Roy Ammerschuber

Reputation: 111

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.

Upvotes: 2

flamusdiu
flamusdiu

Reputation: 1742

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?

Upvotes: 58

Related Questions