Hello Kaushik,

Thank you for contacting Infragistics Community!

In order to render dynamically a common component I suggest one of the following approaches:

1. Declarative – using ngIf: You can refer to the following sample I have prepared for you. As you can observe I have created the two-way bindable property opened in order to control the state of the dialog through its parent components.
2. ComponentFactoryResolver: here the most essential part is that the component should be attached to a specific place using a ViewContainerRef. As you can observe I have used the placeholder directive in order to get a reference to such ViewContainerRef within the following sample. As this would be a common component I suggest placing the directive within a component which would exists through the entire lifecycle of you app, for example the app component. The rest is handled within the dialog.service.ts.

Please take your time to investigate both samples and let me know if you have any further questions.

Best Regards,
Martin Evtimov
Associate Software Developer
Infragistics, Inc.

Please take a look at this forum thread where an answer has been already provided.

PS. What I can suggest in order to run the above attached samples is to download them locally and to execute the following commands:

npm install

ng server

In the below attached screenshot you can see how to download the project:

Best Regards,
Martin Evtimov
Software Developer
Infragistics, Inc.