2

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.

Noober
  • 1,516
  • 4
  • 22
  • 48

3 Answers3

10

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.

p4r1
  • 2,490
  • 16
  • 18
2

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

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

here is detailed explanation.

Vadim
  • 633
  • 1
  • 8
  • 17
0

entryComponents is not required for over version 9 of Angular.

My issue was simply the href="#" in my button opening the Dialog. Removed that and the issue was fixed. Props are all due here.

AtLeastTheresToast
  • 327
  • 6
  • 18