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?

Have a look at this article: https://medium.com/the-crazy-coder/how-to-style-child-component-from-parent-in-angular-b829257faba2 — Kamran Taghaddos, Apr 30 '22 at 21:16

score 38 · Accepted Answer · answered Mar 01 '16 at 22:40

38

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" ...>

answered Mar 01 '16 at 22:40

Mark Rajcok

362,217
114
495
492

2

Remember to put the CSS property in a string or camelCase it if it consists of more than one word. – Modular May 10 '17 at 22:33
This approach does not allow to pass styles for pseudo selectors, like e.g. `:hover` – dastrobu Mar 17 '18 at 18:07

score 23 · Answer 2 · edited Feb 27 '20 at 14:26

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">

Günter Zöchbauer · Answer 3 · 2018-09-15T09:06:08.057

update

::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

original

/deep/, ::shadow and >>> are deprecated. ::ng-deep is the best option until all browsers properly support style encapsulation and ViewEncapsulation.Emulated can be removed.

The deprecation is only for the native implementation in Chrome (other browsers never implemented it) but Angular has its own emulation of these CSS combinators in ViewEncapsulation.Emulated (default)

~~/deep/, ::shadow and >>>~~::ng-deep can therefore be used just fine in Angular2.

For more than simple classes or style property settings use ngStyle Angular 2.0 and ng-style

https://bugs.chromium.org/p/chromium/issues/detail?id=498405 Notable render performance optimizations that are now possible with shadow DOM, aren't compatible with these selectors. — Günter Zöchbauer, Mar 01 '16 at 22:46

Simon_Weaver · Answer 4 · 2019-02-05T19:17:01.147

If you want to leave it up to the component to define the actual css you can try one of the following:

Add a property on your component for each 'logical' style setting, for instance headerSize.

@Input('headerSize') headerSize: ('small' | 'large');

Then your component can check its value in one of a few ways to style itself:

Modify the HTML itself by showing or hiding child elements

<h1 *ngIf="headerSize == 'large'">{{ title }}</h1>
<h2 *ngIf="headerSize == 'small'">{{ title }}</h2>

Set a custom class dynamically inside the component somewhere, and style it:

<div [ngClass]="'header-' + headerSize">

.header-small { h1 { font-size: 20px; } }
.header-large { h1 { font-size: 30px; } }

Set a custom class dynamically at the class level. This is the same as #2 and doesn't require a wrapper element. However it's less than trivial to actually enable and disable these classes.
```
@HostBinding('class.header-small') _header_small;
@HostBinding('class.header-large') _header_large;
```

Also note that if you're using ng-content that the styles applied are the styles defined in the containing component and not the component that actually does the content replacement.

score 3 · Answer 5 · answered Jan 25 '19 at 18:18

Another option is use CSS variables. In this case, to style the color and font-size of the child component's label, you could set two variables on the parent component's CSS and make use of them in the child's CSS.

userInfo.component.css

InputEdit {
  --label-color: red;
  --label-font-size: 1.1em;
}

inputEdit.component.css

label {
  color: var(--label-color, #000);
  font-size: var(--label-font-size, 1em);
}

Of course, this means you have to define every property you want to be styled, but if you only need to set a few styles on the child, it works fine.

This approach will probably get a lot wider adoption now that Angular has discontinued support for IE11 - in fact Material may even start to adopt this at some point. — Simon_Weaver, Dec 18 '21 at 04:10

score 0 · Answer 6 · answered Aug 25 '23 at 12:24

There are 2 more possible ways I can think of (and that I don't see in any other answer):

By using the :host-context pseudo-class selector.

@Component({
  selector: 'my-input-edit-button',
  template: `
        <button class="btn btn-theme">My button</button>
  `,
  styles: [`
      :host-context(.red) .btn-theme {
        background: red;
      }
      :host-context(.blue) .btn-theme {
          background: blue;
      }
  `]
})
export class InputEditComponent {}

Then, just add a class on the parent's context:

<div class="blue">
    <my-input-edit-button></my-input-edit-button>
</div>
<div class="red">
    <my-input-edit-button></my-input-edit-button>
</div>

Or directly on the host, adding a selector on an input (here for the size)

@Component({
  selector: 'my-input-edit-button',
  template: `
        <button class="btn btn-theme">My button</button>
  `,
  styles: [`
:host {
  &[size='small'] button {
    height: 30px;
  }

  &[size='big'] button {
    height: 60px;
  }
}  `]
})
export class InputEditComponent {
  @Input()
  size: 'small' | 'big';
}

In which case you can pass the typed size as follows:

    <my-input-edit-button size="big"></my-input-edit-button>
    <my-input-edit-button size="small"></my-input-edit-button>

Best way to pass styling to a component

6 Answers6

Linked