It's sometimes the case that we don't know which component to render before runtime.

Prominent examples are Notification, Advertisment, Dialog or Modal. Dynamic Component let themselves be rendered based on the runtime conditions.

In this article I will walk you briefly through how to render Dynamic Componenent using the ComponentFactoryResolver class which is privided by Angular.

We are going to create a notification, the content of which will be generated in runtime and injected into the ViewChild with #container as reference. For this purpuse create two component and one service:

NotificationContentComponent: contains the content of the notification that we want to display dinamically.

NotificationWrapperComponent: contains the logic to inject the dynamically created component into the DOM.

NotificationService: used to detect when the notification box is closed.

Stackblitz live example

Add file as into entryComponents config inside app.module.ts

entryComponents: [NotificationContentComponent]

TO BE CONTINUED