A few days back I got some task related to acknowledging messages there was nothing new for any angular developer. But this time I thought why to follow the old approach let’s use some of the features offered by angular already. Then I came across three terms ViewChild, ComponentRef, and ViewContainerRef. These are three close friends you can assume, which help each other to create dynamic component work.
ViewChild can be defined as 👇
Property decorator that configures a view query. The change detector looks for the first element or the directive matching the selector in the view DOM. If the view DOM changes, and a new child matches the selector, the property is updated.
ViewContainerRef can be defined as 👇
It Represents a container where one or more views can be attached to a component.
ComponentRef can be defined as 👇
Represents a component created by a
[ComponentFactory](https://angular.io/api/core/ComponentFactory). Provides access to the component instance and related objects, and provides the means of destroying the instance.
Now Let’s see how can we use them to write our first dynamic component.
let’s first create a new angular project
ng new dynamic-component
Once it is done you can clean the app.component.html file.
We will add two buttons in the app component. One to create that dynamic component and one to hide that component.
And for the dynamic component, we can take the notification card component which comes mostly in use for any developer. We will create that component using
ng g c notification
Assuming you are following up here, we can go ahead with writing our code. If in case you don't want to follow up you can clone my repo and just scroll through the article 😌.
[GitHub - dixitayush5085/dynamic-component: Introduction to Dynamic component
This project was generated with Angular CLI version 14.0.2. Run ng serve for a dev server. Navigate to…github.com](https://github.com/dixitayush5085/dynamic-component "github.com/dixitayush5085/dynamic-component")
We will start with app component.
If you notice, we wrote two functions, one to show the component and one to hide the element. In showNotification function, we are creating a component and along with it, we are also passing a value that will be inside the component(SPOILER ALERT !!! 😈). So yeah in our notification component we are having one field with the name notificationText.
Here we have added two buttons to call the show and hide functions.
Here I added basic styling not mandatory. : )
Now let's write out the notification component which will become our first dynamic component
Please notice this component contains nothing special, it is just a normal component we create in our daily work routine. 😛
that's it
So, if you have followed up till here, thank yourself cause you learned some more stuff.
There is more you can add to this project, like auto destroying notification using ng destroy, and different positions for different inputs. I wanted to make this article short which is why I have not added all those cases. But if you need them just let me know. I update my git code base.
github.com/dixitayush5085/dynamic-component
Conclusion:
In conclusion, I would say, if this story has helped you in some way please consider clapping 😄.
Reference: Angular Official Website