Angular - Solving a Styling Issue for Rendered Components

November 24, 2017 1 min read Angular

In case you're familiar with the situation that the browser doesn't render your Angular components correctly - this post is intended for you.

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:

Setting up width and background-color but the browser ignores these styles

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:

The browser renders the element with a width and background-color styles

As expected, the browser renders the element correctly

We completed the mission.