I wanna convert this component in a progress bar. An easy way to achieve this is
by having a DIV with a certain width, and another DIV inside
.
whose width is proportional with the progress.
So I open the progress-bar and remove content.
So I get this empty DIV inside the progress-bar component, so in fact I have a DIV inside another DIV, or
in this case inside a component, that acts as a container
And because the DIV is empty, I have to give some width to the progress-bar component itself, and some border
to display something. I will achieve this with the pseudo attribute :host, so in the stylesheet... ":host" and
inside here, I define certain properties. For example, this display:block,
Also certain high: 20px for example
Also certain width. you can always override this from the outside
but this is to make sure the component has some aspect by itself
So 8 pixels margins, some border that will be one pixel.
solid, and finally a background-colour white so the background of my progress-bar is white. OK, if you go to see
the results
You have this. But we're missing to display something in the inside DIV.
So you have to add some styles of hight and color for this element
So we're gonna start talking about our DIV
This is SaSS so you can nest components. Inside this :host there's this DIV
.
and I can define Inside this background color. for example.
This one that is
dark gray
Some height, the 100% of the available space (the space of the container element, of the :host)
And finally we're going give a width of for example, 30%
Okay.
Back to the results.
You can see now that this progress is the 30% of the bar. You can also play with this width
from the inspector in order to change the
progress
For example if I set 50, or I set 80, or even 100 you can see how the progress changes.
We've got a component very easy, very simple
And you can even give styles to it from the outside
I can come here to the app.component.scss and use the selector app-progress-bar with a width of
90%
And this with is going to override those 300 pixels that I gave it initially
so this bar now occupies the 90% of the space I am giving to it So you can give the initial styles
with the :host selector and then you can change its styles from the outside of the component.