Okay that's fine.
But you don't wanna show a fixed progress
But one decided from outside of the progress bar.
Right??
So to do so, what you need is to create a property in your progress baf that is decorated with
the input decorator.
So in progress-bar-component.ts I write this @Input() this is the input the creator...
I create this property progress
type number
Initial value zero. You have to import this input.
So I import it directly, this is from Angular core, so the same way I'm importing the Component decorator
I have to import the input decorator.
So what's the benefit of the input decorator?
Well right now I can access this progress property from outside of my component so from app-component
where I'm using this app-progress-bar, I can set this progress property, so I can pass it here the value of
50 for example This must be a string that will be interpreted as a number.
Because that's how I defined the progress property. So I've got the input, I'm receiving the value from outside
but I am not updating yet
The value of the progress on the view side so I am going to the template
What I'm gonna do is a binding to the width property of the style of this element and using the percentage
So... brackets, because this is a property binding
style.width, and I say: bind it to the progress property but indicating with a percentage that this
will be a percentage value. Nice uh??
Not all the CSS properties allows you to do this kind of binding. But Angular is mapping the main properties
of CSS, so in fact you can do this with a lot of the style properties
In this case the style width, an with a percentage. Here I'm saying...
Ok, please, put inside the result of the progress property, and this progress property is available on the
template used by his own component
Remember this is the input we are using from the outside of the component. So, the results.
Right now we have a 50 percent progress and these value is not defined by the own progress-bar
component, but is decided in the parent component of the progress bar.