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

Question

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.

Answer 1

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.

Answer 2

Instead of using the renderer, you can just use hostlistener and hostbinding.
#HostBinding('class.focus') public focus: boolean = false;
#HostListener('focus', ['$event.target']) public onFocus(): void {
this.focus = true;
}
#HostListener('blur', ['$event.target']) public onBlur(): void {
this.focus = false;
}