The Issue
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 width and background-color.
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:
The browser ignores these styles
What we’re going to do now is to fix this issue.
The Solution
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 display: block:
Finally, we get an incredible progress bar:
As expected, the browser renders the element correctly
We completed the mission.
