Have you styled a component but the browser ignored and rendered that incorrectly? Well, this is a common issue which typically occurs for Angular beginners. Perhaps that you don’t have any idea how to handle it.
To simulate the issue, let’s assume we’ve a component for progress bar:
Well, it’s reasonable we’d like to style the progress bar element. For instance, changing its
So, let’s append these styles on the host element (which is the progress-bar itself):
Unfortunately, it seems that the element isn’t affected by the styles. Notice its actual width:
What we’re going to do now is to fix this issue.
The reason for this issue is concealed in the way a browser interprets the host element, which doesn’t know it’s an HTML element at all and so the browser sets the default
display value (inline) for the host element.
In order to solve - we should adjust
display to the defined styles. Because of the fact that we used
width, we’ll attach
Finally, we get an incredible progress bar:
We completed the mission.