Angular: How to pass an inline style to component

Issue

I have created a custom component. The component's HTML scaffolding contains very simple HTML.

<!-- Generated template for the MyComponent component -->
<div>
  {{text}}
</div>

But adding a style like this did not work.

<my-component style="height:300px; background:gray;"></my-component>

I think I need to pass that style to the <div>. But how?

Solution

try (as already mentioned by @1.618)

<my-component [ngStyle]="{height:'300px', background:'gray', display: 'block'}">
</my-component>

applying only style (with display: block or inline-block) will also work:

<hello style="color: green; height:200px; background:yellow; display: block;" 
       name="Another name"></hello>

STACKBLITZ: https://stackblitz.com/edit/angular-hy6xpc?file=app%2Fapp.component.html

Answered By - Andriy