12

It is crazy but the following code:

import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MatDialogConfig, MAT_DIALOG_DATA } from '@angular/material';

@Component({
    selector: 'decline',
    templateUrl: './decline.component.html',
    styleUrls: ['../../../styles/main.css']
})
    
export class DeclineComponent {

    animal: string;
    name: string;
    config: MatDialogConfig = {
        disableClose: false,
        hasBackdrop: true,
        backdropClass: '',
        width: '250px',
        height: '',
        position: {
            top: '',
            bottom: '',
            left: '',
            right: ''
        }
    };
    constructor(public dialog: MatDialog) { }

    openDialog(): void {
        let dialogRef = this.dialog.open(DialogOverviewExampleDialog, this.config);
    }

}

@Component({
    selector: 'dialog-overview-example-dialog',
    template: `
        This is nothing
          `
})
export class DialogOverviewExampleDialog {

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

}

does not center (horizontally and vertically) the modal window whereas in all examples I have seen so far, it is nicely centered. I cannot find the problem... I have to say that I am using '~@angular/material/prebuilt-themes/indigo-pink.css". Apart from that, I tried to center it manually by adjusting the position object inside config. However it does not accept something like left: '50%-125px'. Any good ideas, please?

2
  • We need to look at a reproduction to find and fix the problem. Can you setup minimal example?
    – yurzui
    Nov 23, 2017 at 18:01
  • What does your dialog look like?
    – Edric
    Nov 24, 2017 at 7:04

6 Answers 6

16

You are missing the configuration for entryComponent. I was facing the same issue. Adding the Component name to entryComponent in AppModule solved my problem.

Because MatDialog instantiates components at run-time, the Angular compiler needs extra information to create the necessary ComponentFactory for your dialog content component.

For any component loaded into a dialog, you must include your component class in the list of entryComponents in your NgModule definition so that the Angular compiler knows to create the ComponentFactory for it

Add below line of code to the app.module.ts file

entryComponents: [DialogOverviewExampleDialog]

And you don't really need to pass the empty position configuration for the MatDialog, unless you are setting something. This will be the second thing to try after the entryComponent solution, if it doesn't resolve the issue!

1
  • Thanks. I'd like to add that it doesn't need to be app.module, just the module that houses where you're using the dialog (e.g. homepage.module.ts)
    – Steve
    Jan 4, 2019 at 19:07
15

Step 4 of Angular Material getting started.

// Add this line to style.css of your app.
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Step 4

Be sure that you made all steps before.

Angular Material - Getting started

P.S. It's helped me.

0
7

You have to configure your dialog content via entryComponents in your app.module.ts file.

You can read about this in the docs: https://material.angular.io/components/dialog/overview#configuring-dialog-content-via-code-entrycomponents-code-

ts:

@NgModule({
  imports: [
    // ...
    MatDialogModule
  ],

  declarations: [
    AppComponent,
    ExampleDialogComponent
  ],

  entryComponents: [
    ExampleDialogComponent
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule() {} 

I hope that solves your problem

1
  • The AppModule doesn't need braces (aka. ())
    – Edric
    Nov 24, 2017 at 7:04
3

For me, adding align-items: center to .cdk-overlay-pane worked.

::ng-deep .cdk-overlay-pane {
  align-items: center;
}
2

I was having the same type of issue, my modal was showing up on the very bottom left of my page, and would not honor the height/width, etc that I was passing into the dialog.open function, nor was it showing any background, etc.

I just added

../node_modules/@angular/material/prebuilt-themes/indigo-pink.css

to the styles line of my angular-cli.json file, and it now works perfect.

2

Define your config as follows:

config: MatDialogConfig = {
    disableClose: false,
    hasBackdrop: true,
    backdropClass: '',
    width: '250px',
    height: '',
    position: {
        top: '50vh',
        left: '50vw'
    },
    panelClass:'makeItMiddle', //Class Name that can be defined in styles.css as follows:
};

In styles.css file:

.makeItMiddle{
     transform: translate(-50%, -50%);
 }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.