Best way to pass styling to a component

Question

So I have this component called InputEdit (basically a Label that can be edited when you click on it... simple enough) and this component has its own shadowed DOM CSS styling. But of course each hosting component will want to set its own font size and color for the input component...

So what would be the best way? Can you just pass in a styling class and apply the entire CSS to the component? Or would it be better to pass each value manually as in:

     <InputEdit [color]="'red'"/> 

Which would seem a lot of work, but again since we are using the shadow or emulated DOM, we can't just control the CSS externally.

I am also aware that you can splice open the shadow and target direct elements via:

/* styles.css */ UserInfo /deep/ InputEdit label {     color: red;     font-size: 1.1em; } 

Which will basically allow you to enter into a custom component named UserInfo / deep (any level ) / custom component InputEdit and target label with color red...

But again, I am wondering what is the best approach specifically for ng2 like passing a class config into a directive maybe?

Answer 1

I would just use a styles input property on InputEdit, and pass in an object with the desired styles:

<InputEdit [styles]="stylesObj">                 // in host component's template  stylesObj = {font-size: '1.1em', color: 'red'};  // in host component class  <input [ngStyle]="stylesObj" ...>                // in InputEdit component's template 

If you have multiple DOM elements you want to style, pass in a more complex object:

<InputEdit [styles]="stylesObj">  stylesObj = {   input: {font-size: '1.1em', color: 'red'}   label: { ... }  };  <label [ngStyle]="styles.label" ...> <input [ngStyle]="styles.input" ...> 

Answer 2

Mark Rajcok's answer is good for a group of styles, but if you're only going to allow the font-size and color to be changed, you may want to use a more direct approach like you started with (in this example, also enforcing only pixels instead of a more flexible string for demonstration purposes):

For Individual Style Properties:

Component:
<InputEdit [color]="'red'" [fontSize]="16">

component.ts:
Input() color: string = 'black';
Input() fontSize: number = 18;

component.template:
<input type="text" [style.color]="color" [style.fontSize.px]="fontSize">

---

If Allowing a Group of Styles:

Component:
<InputEdit [styles]="{backgroundColor: 'blue', 'font-size': '16px'}"> NOTE: Make sure the CSS properties are camelCased or in a string if there is more than one word.

component.ts:
@Input() styles: any = {};

component.template:
<input type="text" [ngStyle]="styles">