Angular - Styles not being applied to my custom components from parent

3
votes

I don't understand why my margin isn't being applied in this example. Seems strait forward enough.

App Template:

<my-component class="my-class">Test</my-component>
<div>Some Conent</div>

App Styles:

.my-class { margin-bottom: 30px;  } 
div { background-color: red; }

Component Template:

<div><ng-content></ng-content></div>

The div gets red background, but there is no margin between the two;

Plunker: https://plnkr.co/edit/oUczApNhhPrAOKy5Iclp

1
angular

1 Answers

5
votes

Because the component selectors from angular aren't "real" html elements, therefore they have no default styling. Because of that the browser doesn't know how to display them and doesn't apply any styles which have an impact on the css layout around the component (e.g. margin or height).

To fix this you need to apply the css display property with any value except none to your component.

For example:

.my-class {
  display: block;
  margin-bottom: 30px;
}