Basic Example

1)app.component.ts

import { Component} from '@angular/core';
@Component({
    moduleId: module.id,
    selector: 'project-app',
    template: '<ul><li *ngFor="let user of users" highlight>{{user}}</li></ul>'
})
export class AppComponent {
    users;
    constructor() {
        this.users = ["s1","s2","s3"];
     }
}

2)app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from './app.component';
import { HighLightDirective } from './app.directive';
@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent,HighLightDirective],
    bootstrap: [AppComponent]
})
export class AppModule { }

3)app.directive.ts

import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
    selector: '[highlight]'
})
export class HighLightDirective {
    constructor(private element: ElementRef) {
    }
    @HostListener('mouseenter') onMouseEnter() {
        this.setAppearance('#aaaaaa', 'pointer');
    }
    @HostListener('mouseleave') onMouseLeave() {
        this.setAppearance(null, null);
    }
    setAppearance(color: string, cursor: string) {
        let style = this.element.nativeElement.style;
        style.backgroundColor = color;
        style.cursor = cursor;
    }
}