How to create dynamic components in Angular

When I’ve started to learn Angular, every time I was facing the topics about dynamic components, I thought to myself, no no no It’s not right time for that I’ll read it in the future, that’s because of all those kinds of stuff like ViewContainerRef, ComponentResolveFactory, ComponentRef, etc.they were too complex for me and I thought, that It’s not as easy as Angular itself. fortunately, I was wrong and the dynamic component is not really a hard thing when you understand the key concepts once. In this article, I’ll try to explain how we can create dynamic components in Angular and not to be afraid of them. okay let’s dive in

ViewContainerRef

everything starts with ViewContainerRef, you can think about it as the creator of a component, so when you add some component inside your Angular application

ViewContainerRef is automatically attached to that component, so every component has its own ViewContainerRef, you can access it either dependency injection or from a view child.

ViewContainerRef helps you to add a component programmatically ( not from view). you can add as many components as you want.