Angular2, HostListener, how can I target an element? can I target based on class?

Question

In Angular2, how can I target an element within the HostListener decorator?

@HostListener(\'dragstart\', [\'$event\'])
    onDragStart(ev:Event) {
        co         


        

Answer 1

in component template

    
United States of America (mouseenter)



    
United States of America (mouseout)

in class component

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

@Component({
  selector: 'app-simpleevent',
  templateUrl: './simpleevent.component.html',
  styleUrls: ['./simpleevent.component.css']
})
export class SimpleeventComponent implements OnInit {
  @HostListener("mouseenter", ["$event"]) onMouseEnter(event: Event) {
    console.log(event.type);
  }

  @HostListener("mouseout", ["$event"]) onMouseOut(event: Event) {
    console.log(event.type);
    console.log(event.target)
  }
  constructor() { }

  ngOnInit() {
  }
}