Angular 2 attribute directives

In the previous article of the series Learning Angular 2 step by step, we learned about Angular 2 Component. Now it's time to learn about Angular 2 Directive.

Before reading this article, I would recommend reading my previous tutorial where I have explained about Angular 2 component.  

In the tutorial about Angular 2 directives, We will know about different types of Angular 2 directives, how to use them and then we will see how to create a custom directive in Angular 2.

Learn Angular 2 step by step
Angular 2 attribute directives
import {Directive, HostListener, HostBinding} from '@angular/core'
@Directive({
    selector:'[myVisibility]'
})
export class MyVisibilityDirective{
    @HostBinding("class.myvisibility")
    IsFocused:boolean = false;
    @HostListener('mouseenter')
    OnFocus():void{
        this.IsFocused = true;
    }
    @HostListener('mouseleave')
    OnFocusOut():void{
        this.IsFocused = false;
    }
}
Posted By :