Angular component host element width and height are 0

Question

When I inspect my component element, sometimes its width and height are 0 even though if I inspect inside, the elements the component include have

Answer 1

From what I can see by inspecting a rendered Angular component in the browser, the host element has the attribute display: inline by default. As mentioned in a few questions (1, 2), the size of inline elements cannot be changed with CSS styles.

In order for the width and height style attributes to be effective, you should set the display attribute of the host element to block or inline-block:

display: block;
display: inline-block;

You can see an example in this stackblitz, where the following CSS is used:

:host {
    display: inline-block;
    width: 300px;
    height: 200px;
    background-color: orange;
}