This is an Angular directive that links an instance of the current injector to its DOM node.

angular-dom-injector.ts

import { Directive, ElementRef, EventEmitter, HostListener, Injector, OnDestroy, OnInit, Output, Renderer2 } from '@angular/core';
import { SketchMSLayer } from './../../state/ui.state';
import { SketchLayerComponent } from './sketch-layer.component';

@Directive({
  selector: '[sketchSelectedLayer]'
})
export class SketchSelectedLayerDirective implements OnInit, OnDestroy {
  @Output('selectedLayer') selectedLayer = new EventEmitter<SketchMSLayer>();

  constructor(
    private element: ElementRef<HTMLElement>,
    private renderer: Renderer2,
    private injector: Injector
  ) {}

  ngOnInit() {
    this.renderer.setProperty(this.element.nativeElement, '__angular_injector__', this.injector as Injector);
  }

  @HostListener('click', ['$event'])
  onclick(event: MouseEvent) {
    const path = (event as any).path as Array<HTMLElement>;
    let element: HTMLElement = null;
    for (let i = 0; i < path.length; i++) {
      element = path[i];
      if (element && element.nodeName === this.element.nativeElement.nodeName) {
        this.unselectSelectedLayer();
        event.stopPropagation();
        const layerComponent = (element as any).__angular_injector__.get(SketchLayerComponent) as SketchLayerComponent;
        layerComponent.selected = true;
        layerComponent.nativeElement.classList.add('isCurrentLayer');
        this.selectedLayer.emit(layerComponent.layer);
        break;
      }
    }
  }

  private unselectSelectedLayer() {
    const element = document.querySelector('sketch-layer.isCurrentLayer');
    if (element) {
      const layerComponent = (element as any).__angular_injector__.get(SketchLayerComponent) as SketchLayerComponent;
      layerComponent.selected = false;
      layerComponent.nativeElement.classList.remove('isCurrentLayer');
    }
  }

  ngOnDestroy() {
    // gc
    this.renderer.setProperty(this.element.nativeElement, '__angular_injector__', null);
  }
}