HostBinding và HostListener Angular 2+

HostBinding và HostListener

app.component.html

Angular 2+

<h2 class="high-light">Hello color host binding</h2>

<input hostTest type="text"/>

host-color.directive.ts

Angular 2+

import {
    Directive,
    HostBinding,
    HostListener
} from '@angular/core';

@Directive({
    selector: '.high-light'
})
export class HostColorDirective {

    @HostBinding('style.color') colorKey = 'yellow';
    @HostBinding('style.backgroundColor') bgColorKey = 'olive';

    @HostListener('mouseenter') onEnter() {
        this.colorKey = 'white';
        this.bgColorKey = 'blue';
    }

    @HostListener('mouseleave') onLeave() {
        this.colorKey = 'yellow';
        this.bgColorKey = 'red';
    }

}

host.directive.ts

Angular 2+

import {
    Directive,
    HostBinding,
    HostListener
} from '@angular/core';

@Directive({
    selector: "[hostTest]"
})
export class HostDirective {

    @HostBinding('value') textTest: string = '';

    @HostListener("mouseenter") addTxt() {
        this.textTest = 'Hello value host binding';
    }
    @HostListener("mouseleave") removeTxt() {
        this.textTest = '';
    }

}