Get Data From Mat Dialog

We can then get a reference to this data object in coursedialogcomponent by using the mat dialog data injectable.

Get data from mat dialog.

I ve come from ng bootstrap so am more inclined to use the componentinstance to pass in data but am wondering if. Let dialogref this dialog open dialogbodycomponent dialogconfig. In this angular material 9 tutorial we ll discuss how to implement material modal popup using dialog api and pass data between parent and modal dialog. Here is the code you need to add into your app module ts file.

The data could be coming for example from the backend or from a client side cache but that is transparent to the data table. Here is complete code for open material dialog and rest of code you can get it from my last blog post and i have share the link above. Opendialog const dialogconfig new matdialogconfig. Going back to our appcomponent here is how we can pass some input data to the dialog.

You can simply use the mat dialog data injection token and the inject decorator to get dialog data in your component. As we can see the whole data object initially passed as part of the dialog configuration object can now be directly injected into the constructor. Did mat dialog data come before or after the componentinstance. Just looking into dialog and trying to understand why mat dialog data exists when you have the componentinstance to pass in data via inputs of which are type protected.

The data table simply subscribes to an observable provided by the data source. We have also injected something else a reference to the dialog instance named dialogref. When that observable emits a new value it will contain a list of lessons that then get s displayed in the data table. To be able to send or share data with the angular dialog component you can use the data option to pass data.

Dialogconfig data some data. Its element the md dialog content contains the content of the dialog and the md dialog actions is responsible for the dialog actions. We will use it to close the dialog and pass output data. It is the very important part which is used to get the data from the dialog component and can pass it to another component.