You have sensible ways to modify dynamically your component with your child, your content and so on,
in all those cases, those components should already exist in your videos.
However, for some scenarios, it could be really interesting to create the components in a completely
dynamic way in runtime.
This is what I'm going to show you to show you how to create dynamic components and want to use, again,
the simple answer to be a component.
But in this case, I'm going to build it on runtime.
Let me remove first some unnecessary stuff from this view.
I can remove all those energy containers, this one from here also, and so do I, with the other three
that is shown on Diemen that this is the one I want to build dynamically.
So it only remains the attachment alert view.
Of course, I have to remove also some stuff on the component side.
I don't need anymore these children, the creator as well as the these that allowed that for it, including
also they change the texture graph from here.
I can remove it also from the constructor and I can also remove the quirkiest BU children and change
that like the ref imports.
So, uh, finally in the show in Time Out, I'm going to commander's lamp from here and here is where
at some point I will show the alad that I am going to be able dynamically.
If you take the results, everything should work fine, but no alad will be shown on time around because
that's what I have just committed out.
And this is the hour I want to create a grand time before displaying it.
First of all, when you want to create a dynamic component, you need to specify to your model that
this component is going to be generated in runtime.
This way I will announce that I'd have to compile the component, despite it is not explicitly included
in any template.
We will do this in that module, bypassing the component to the entry components, property of the module
metadata.
This expects an array and inside we include the simple ILOVEYOU component.
This way we are saying that the component will be needed in random.
So Angler knows it must be compiled.
The next step is to define a dumb element.
What I'm going to do all this component in a dynamic way.
So here, after about you, I want to create an empty DB and I set the template reference Bible called
out this way I'll be able to find from code the element where I want to include my component.
My template is okay now, but I need the reference to this element from app components the same way
I have a motel to get this time input element.
I create the new child for the plot.
I was created on my template.
This property will be called out container and it will be of Taibu container ref.
Of course I have to import this glass.
We haven't talked yet about the bio container, but its main goal, it's to dynamically create components
inside it.
There's also another detail Butow returns by default, an element ref.
So if you want to receive a big container ref, you need to explicitly defined this.
Under the greater the bottle, the greater accepts another parameter.
So I can pass an object with a red property where I can set the type of the element I want to receive
like blue container ref.
Now I have a reference to an element of the template of Type B, a container ref, and this is the place
where I will create my dynamic component, but I need some tools to achieve this.
The next step is to include the service component, factory resolver.
This is the class that allows to build any component at runtime.
So in the constructor I create a private resolver.
Tab is going to be Campden factory resolver.
And as always, I have to import the declaration, what I'm going to do now is to create a factory of
simple Olympio components that will allow me to instantiate those elements inside the elements referenced
by container.
I want to manipulate the content of the injected components right after inserting them into the bill.
So the lifecycle even to do so is the energy of the content in it.
We have used in previous videos, but in case you forget, remember we added this interface to the class.
So we have to implement the method in first place I the factory with out of the factory and assigning
the value of this resolver so that I have the resolve component factory method and here I have to pass
the component.
I want it to build simple allow to be a component.
Now I have a factory that allows me to create this component.
However, I want a reference to the dynamic component, so I will save this.
In a new property called Single Alad, I ride my ideas that simple allow property.
This does not exist yet.
And I saying here, does that contain the element where I'm going to paint it of Bill Clinton Şeref?
That has several methods.
And I use the method to create a component where I have to specify a component factory.
So I use Alad Factory.
That is the factory it will use to create any component.
So I have a factory and they have an element of my view.
What I'm going to create a new component based on this factory, and I will set the result in the simple
art property that I haven't created yet.
Pay attention to the create component in return to me a component raff of type simple I to be a component.
This is exactly how I need to declare this property.
So above all, I grade the public simple alad of type components for f simple allow to be a component
set Dónal.
Of course I have to import the component ref now.
The code is not complaining because simple alot is well referenced.
So at this point I have the element created.
Maybe you have a reference to it.
And finally in the show End-Time method, would I have to do instead of this comment is to display this
runtime component using this that symbol on it.
This is a common Andreev.
I can see there's different properties like tens.
The dictograph commands have destroyed Husby injector incents location undestroyed instance is what
irritates me, a simple to be a component.
So using an instance of a component, I can call the show method the same way I purposely did with this
that allowed that first that show I can remove now this old command and finally back to the browser.
I can see the results again.
I click play and on component's it shows me a simple Uloth view.
In this case, it displays an empty cup, of course, because I have not specified any title or method
yet.
I'll show you how to do this on the next videos.
But let me summarize first this lesson as it's pretty complex.
First, I have created an entity on my bill.
I have created also a template reference variable on this element.
So from the Democrat side, I can access the element using bew child.
At this point I reference that element without containing a property.
In this case of Taibu contain Şeref.
I have to clarify this with the RIT property BU Child Agreements.
I include also component factor resolved using dependency injection and I've used any of the content
in it to create a factory of simple and other components.
And then I've used the element referenced on my HDMI, the container rêve in order to create a component
based on my factory.
I have the reference to the newly created component so later I can use it to get the instance and use
their methods like that show.
Remember also I had to update at Moltz to tell Angella that simple alabi component is going to be created
somewhere and runtime.