Angular host element: what is the easiest way to style on focus

Issue

Try to change styling on focus of the host element. While the following construction works fine in combination with /deep/, it does not work for the host element itself. What's wrong with the CSS code?

:host {
  background-color: white;
  border: 1px solid lightgray;
  padding: 1px 0;
  display: inline-block;
}

:host:focus {
  border: 2px solid lightskyblue;
}

Thanks for any help.

Solution

You could do it programmatically, with a HostListener, Renderer2 and ElementRef:

import { Component, ElementRef, HostListener, Renderer2 } from '@angular/core';

@Component({
  selector: 'button[app-button]',
  template: '<ng-content></ng-content>',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent {

  constructor(
    private el: ElementRef,
    private renderer: Renderer2
  ) {}

  @HostListener('focus', ['$event.target'])
  onFocus() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'red');
  }

  @HostListener('blur', ['$event.target'])
  onBlur() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'buttonface');
  }
}

Or you could just use the :host pseudo selector and wrap the :focus in brackets in your component's stylesheet:

:host(:focus) {
  background-color: red;
}

Here's an example: stackblitz.

Answered By - eMontielG