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

Issue

Usually, I can style the very root of my component by using the :host pseudo style like this.

:host{ border: 1px solid gold; }

But how shold I handle if said style is supposed to be set dynamically, based on the parameters passed to @Input?

The only way I can think of at the moment is to add an auxilliary DIV and style it like so.

<div [ngClass]="styleMeDynamically"> ... </div>

Is there a way to apply a style dynamically directly on the host without the injected DIV?

I've found this suggestion but it requires explicitly stating the classes and connecting them to separate inputs. I'd like to get a config object as passed in parameter and bind the styling using [ngClass] to retail full flexibility.

Solution

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.

Answered By - HirenParekh