Learn How to Create Dynamic Component in Angular

hello everybody welcome to another video from code shots with profundis in this video we will see how to dynamically create a component using angular and we will also see how to create multiple components dynamically based on a configuration file so let's get started i have a small application where we have the widget to 1 and widget 2 and both of them they are are standalone components widget one and also see what we have in widget tool yeah the same here this is a standalone component as well let's see how to dynamically create them into the app component html where currently this is empty i will create an ng container and i will define a template reference variable i will name this container then we have to go into the app component.ts and i will use the view child where i will define the container and i need here to have some options the first one is that i'm going to have the read to be view container f this tells angular that i want the return type of the container to be of a container f and also this is my name container let's close this we no longer need this the type is view container f nice i will now create a method create component and of course i need this method to be invoked by button so what we have to do inside the create component is to use the view container f i will tell angular that you know what i want in this container to create a component and here we have to provide the component type and we currently have two different components the widget one and the widget tool let's try and create first the first one which is the widget one component and as is let's go to the browser to see what we have if i click now the button create we can see here that we have the widget one and we do not have anything into the name we will see this shortly how about if i click once more this button oh we have widget one once more what we have to do is to clear the container before we invoke the create component method and now similar to this line we can do the same for the widget too and again if we go to the browser we will see that if we click create we have the widget one and widget tool this is the first approach of how to dynamically create a component and if you remember into the widget 1 and into the widget 2 will have an input how can we provide the input let's keep the reference here of the create component and i will be like const this is the widget one so widget one ref equals and then i can be like widget one ref into the instance i'm going to provide the name and the name will be profanish and i will do the same for the second component const widget to ref equals this and then into the widget to ref the instance name will be propanised now let's go to the browser to see what we have if i click create we can see that we have here name profanize and name profanize this works just fine but you know what let's go to the widget one component and i will implement the method on changes which we know that the unchanges method trigger whenever we provide a new input and i will just have here a console log changes are happen okay so we expect when we create a component we expect to see this message the changes are happen into the console so let's open the developer tools zoom in a bit and click the create button and we do not see anything here the problem with this approach is that this is the old way of providing the inputs into the component the new one is to use the method set input and here we can be like i want to set the input name and i have the value profanities and of course let's do the same here now again if we click the button create now we can see that here we have the changes are happening nice so this is how we can dynamically create a component can we do the same based on a configuration file let's give it a try i will create a component config json where this will contain an array and each array will have a component and this is going to be a narrow function where we'll return an import where we have to define the path i'm going to have the widget one with the to one component and this is a promise so i want to have the widget one component and we can even give it a try to provide some inputs and this time i will use a key value pair i know that the input is name so i will provide the value for funnies and let's do the same for the other component so this is the widget 2 component and again here widget 2 and widget 2. and we have the same name but you know what let's have a differentiation this is the widget 1 for vanish and this is the widget 2 profiles i will keep this method and i will create another one and the name will be create components based on config what you have to do is to iterate over the configuration file which is the components config file i will use for its method and i know that this is my component config and we know that in the component config we have this component which is a promise we can simply wait for this promise to finish and we need definitely to have an async here and as soon as we have here the component we know that this is our component instance having the component instance we can now use this line so let's copy this and paste it here and replace the component instance in the create component and this is the component ref since our configuration will have also some inputs i guess that we can iterate over the inputs and give these inputs into the component and for this one since this is a key value pair i will use the object entries and this is my component config dot inputs and again using a for it i know that the first argument will be a key and the second one will be a value oops here i do have a comma and now similar to this method i set the input i will copy this we can use the component refset input providing here the key and also providing the value so let's now go to the app component html and replace the method this one and what we expect to happen is that as soon as we click the button we expect to have two different components with the inputs into the template template if i click the create button we can see that we have the widget one and the input is widget to one profanities and here we have the widget tool so this is how we dynamically create components using the create component method and also very important to use the new method set input which is part of angular 14. so that was it thanks for watching please let me know what you think in the comments below and do not forget subscribe and click the link below

Channel: Code Shots With Profanis

Views: 24,101

Keywords: Angular Dynamic Component, angular, angular tutorial, learn angular, angular lesson, angular components, angular dynamic components, dynamic component loading in angular, angular dynamic component loading

Id: n2uXyzqL1lA

Length: 8min 57sec (537 seconds)

Published: Tue Aug 16 2022