Native event'leri yerel event handler'lara bağlama

Bir custom component hazırlıyorsunuz. Bileşenin üzerine tıklayınca mevcut javascript'in mouseenter ve mouseleave event'lerini handle etmek istiyorsunuz. Angularcı amcalar bu iş için host decorator özelliği sunmuşlar.

my-component.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-component',
    template: 'Benim üzerime fare"yi getir!',
    host: {
        '(mouseenter)': 'onMouseEnter($event)',
        '(mouseleave)': 'onMouseLeave($event)'    }
})
export class MyComponent {
    onMouseEnter(event:MouseEvent) {
        console.info("mouse enter");
    }

    onMouseLeave(event:MouseEvent) {
        console.info("mouse leave");
    }
}

Plunker'da bırkalamak için

https://plnkr.co/edit/14KCCdKSJpRWEoemHH7N?p=preview