I have created the campaign that be in a dynamic way, but I need the inputs to pass from outside the
title unless it fails the demonstration here.
So I go to app components.
Remember that the reference to the dynamic component is restored in the simple Oletta property, whose
tab is Cameron Draugr?
And one of the component features is that I can get the instance of the dynamic component, so I will
set the title on message through the component, the instance created on runtime.
I'm off to the after content init method where I create the component and I set the kind of here.
There's that simple order, that instance.
The title equals dimer and that.
And there's that simple alert, that instance, that message equals your countdown has finished.
I want to cancel also the content of the instance, so cancel like this, that simple alert, that instance,
I save this and I go to my brother to see the results.
I click play to study, calm down.
And when it completes, I can see now the title and message content I have just said.
Let me show you one thing.
If you see the console output where I'm logging, the simulator will come on and you can see those two
inputs.
But also the visible properties are to false.
This is something trusting in the simple view I've got here.
There are two inputs, but I'm creating the component dynamically so it's not written in the template
and thus I'm not binding a staff to those inputs using the angular templating syntax.
What I mean is that using dynamic components to modify the component properties, I only need them to
be public, but I don't need them to be decorated with the input decorator as I won't be doing any property
binding on the template.
So I should be able to remove this at input and my code will work fine as well.
But of course it is recommended to use it so the component can be built, be both dynamic and classical
ways.
And what about outputs?
Well, let's create one and see what happens.
I want to create an output here in order to meet an event every time a simple electrical component is
closed up.
Output on this means this is of type event and meet the demands.
What event?
And this equals a new event.
The media also returning a type void.
I want my event and I have to use it here into this method after the visible force, this, that and
this means that I need in order to meet the event, I can see this into the browser.
Now, the console output shows the on this property of the type even to me to remember that these outputs
in the template, you wrap the output with parentheses in order to bind to them.
This is where you subscribe to the output events.
Now as you're creating the components from code, that option is not available.
What you can do is to simply subscribe to the event meter because and even the meter inherits from the
observable class.
If you inspect this employer to be a component on this means have a prototype and inside we can find
the subscribe method.
OK, so to do some kind of event binding to the dynamic component, I need to go to my app components
and inside after content in it.
I'm going to subscribe to this absorbable this that symbol alert, that instance that and this means
that subscribe and inside a person are a function just to cancel out something like this.
MTT OK, back to the browser.
If I click play, I can wait until the countdown ends and the annotation.
And when I close it, I can see how the dismissed X is written into the console luck.
So the event has been fired, in fact, like input the usage of the output, the creator is not necessary
at all.
And this is scenario because as the component is built dynamically, does not imply to bind.
And I could go to simple I'd be a component and remove this output.
The Creator and they got good work.
Fine.
However, it is more convenient to use the creator so you can use the component in both dynamic and
classical ways.
Let me summarize this a little bit.
As you can see, I can access the public properties of the component no matter if they use input or
output decorator's because they are available on the instance returned by my dynamic components reference.
This way I can set the title message and even subscribe to the event.
The meter on this mess did some stuff when even this fired.