Highlightable Component angular

import {
  ChangeDetectionStrategy,
  Component,
  HostBinding,
  input,
  ViewEncapsulation,
} from '@angular/core';

@Component({
  selector: `
    highlightable,
    Highlightable,
  `,
  imports: [
  ],
  template: `
    <ng-content></ng-content>
  `,
  styles: [
    `
      :host {
        &[data-highlighted=true] {
          animation: blink 1s infinite;

          @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
          }
        }
      }
    `,
  ],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HighlightableComponent {
  highlighted = input<boolean>(false);
  
  @HostBinding('attr.data-highlighted')
  get _highlightableClass() {
    return this.highlighted();
  }
}