CODEWITHSUNDEEP
angularionic-framework
Damn Vegetables
Damn Vegetables

Reputation: 12464

Angular: How to pass an inline style to component

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?

Upvotes: 19

Views: 77903

Answers (2)

fruitloaf
fruitloaf

Reputation: 2892

You can also use Variable/Prop inside the styling like this:

<button [ngStyle]="{backgroundColor: variableNameOrPropNameHere}">{{text}}</button>

Note, you can also MIX them in the same code:

<button style="padding: 10px" [ngStyle]="{backgroundColor: variableNameOrPropNameHere}">{{text}}</button>

because default inline styling is a bit standard and faster to type and is similar to standard CSS, while ngStyle is more like React inline styling.

Just to have couple of options =)

Upvotes: 0

Andriy
Andriy

Reputation: 15442

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

Upvotes: 31

Related Questions