Dialog not working in angular material

Question

I am trying to use dialog from the angular material. I am trying to implement the 1st example given at the page: Angular Material Dialog URL Here is the Stackblitz URL of the example given at the above page: Example Mentioned on Angular material website

The only modification I have done is I have moved the dialog component in a separate folder. But the dialog is not opening properly and no data is displayed. Here is the Stackblitz link to my work: My Implementation

I think somehow data is not getting passed in the dialog component. But I am not able to figure out why. Any help would be highly appreciated.

Answer 1

In your Stackblitz, the console displays a helpful error message after the button is clicked:

ERROR
Error: No component factory found for DialogComponentComponent. Did you add it 
to @NgModule.entryComponents?

To fix this, you need to add the component that is displayed in the dialog to the entryComponents collection in app.module.ts (or the main.ts file in Stackblitz):

entryComponents: [DialogOverviewExample, DialogComponentComponent],

This is needed because the components displayed in the dialog are not referenced in a template via a component's selector. Since Material's dialog component references the displayed component by type, Angular needs to know that this component still needs to be loaded and not tree-shaken away during compile. Angular docs go into some additional detail on entryComponents if you're interested.

Answer 2

declare it with the enrtyComponents as well in your main.ts:

...
entryComponents: [DialogOverviewExample, DialogComponentComponent],
...

here is detailed explanation.