Component event delegation

import {ElementRef, Renderer, ViewChild, Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor (private renderer: Renderer){ }
  @ViewChild('ulEl') ulEl: ElementRef;

  ngOnInit() {
    this.tmpListener = this.renderer.listen(this.ulEl.nativeElement, 'click', this.logElement);
  }

  // Shorthand to get event.target
  logElement({target}) {
  	if(target && target.nodeName == "LI") {
      console.log('Target id: ', target.id);
      // Add Business Logic here
    }
  }
  
  ngOnDestroy() {
    this.tmpListener();
  }
}