Angular 2: How to Style Host Element of the Component

Angular 2: How to style host element of the component?

There was a bug, but it was fixed in the meantime. :host { } works fine now.

Also supported are

• :host(selector) { ... } for selector to match attributes, classes, ... on the host element

• :host-context(selector) { ... } for selector to match elements, classes, ...on parent components

• selector /deep/ selector (alias selector >>> selector doesn't work with SASS) for styles to match across element boundaries

  • UPDATE: SASS is deprecating /deep/.
    
    Angular (TS and Dart) added ::ng-deep as a replacement that's also compatible with SASS.

  • UPDATE2: ::slotted
::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

See also Load external css style into Angular 2 Component

/deep/ and >>> are not affected by the same selector combinators that in Chrome which are deprecated.

Angular emulates (rewrites) them, and therefore doesn't depend on browsers supporting them.

This is also why /deep/ and >>> don't work with ViewEncapsulation.Native which enables native shadow DOM and depends on browser support.

How can I style :host element dynamically based on parameter from @Input?

What you can do is,

Create a custom directive that will accept a style object. and inside that directive, you can get the reference of host element and modify its style.

Here is a Demo

And here is a quick explanation.

Create a directive as which will accept a style object.

import {Directive,TemplateRef,ElementRef,OnChanges,SimpleChanges,OnInit,Renderer2,DoCheck,Input} from "@angular/core";

@Directive({
  selector: "[appSetStyle]"
})
export class SetStyleDirective implements OnInit, OnChanges {
  @Input() appSetStyle: { [key: string]: any } = {};
  constructor(private elementRef: ElementRef<HTMLElement>) {}

  ngOnInit(): void {}

  ngOnChanges(changes: SimpleChanges): void {
    this.applyStyles();
  }

  applyStyles(): void {
    if (this.appSetStyle) {
      for (const key in this.appSetStyle) {
        this.elementRef.nativeElement.style[key] = this.appSetStyle[key];
      }
    }
  }
}

Use that style object with any html element or any other component in your project.

<app-header [appSetStyle]="dynamicStyles"></app-header>

If you don't want to make a directive then you can inject the ElementRef inside the component itself which you want to style.

ElementRef is the what you need to use to get the reference of host.

I hope this will help.

Angular : Style class on component tag

Yes it's possible. and another way is to use :host in your component style:

:host(.customClass) {
  background: blue;
}

Also You can directly add styles to your component like this:

 :host {
      background: blue;
 }

Or in your .ts file:

@Component({
   selector: 'your-component',
   template: 'your-component.html',
   host: {'class': 'customClass'}
})

You can read more about :host here.

how to target component styles from host component angular 2

:host elementA {
  // style here
}

How to dynamically change CSS in :host in angular 2?

Here is a working example.

Use the following HostBinding:

@HostBinding('style.overflow-y') overflowY = 'scroll';

This would give the following component:

@Component({
    selector: 'my-app',
    template: `
          <div>
            <button (click)="addStyle()">Add Style</button>
            <h2>Hello</h2>
          </div>`, styles: [
        `
        :host {
          overflow-x: hidden;
          height: 50px;
          width: 200px;
          display: block;
        }
        `,
    ],
})
export class App {
    name: string;

    @HostBinding('style.overflow-y')
    overflowY = 'scroll';

    constructor() {
    }

    addStyle() {
        this.overflowY = 'hidden';
    }
}

How to apply ngStyle to :host element in component?

There is no way to do this.

What you can do is

@HostBinding('style.width')
width:string = '10px';

or

@HostBinding('style.width.px')
width:number = '10';

The main limitation is that the width part is fixed and can't be used from a variable.

Another way with full flexibility is

constructor(private elRef:ElementRef, private renderer:Renderer) {}

setStyles() {
  this.renderer.setElementStyle(this.elRef.nativeElement, 'width', '10px');
}

---

Related Topics