Overview

• Used as attributes of elements
• Change the appearance or behavior of an element, component or other directive

Sample

Write a highlight directive that will change background color of the element if the mouse is hover on it https://angular.io/generated/live-examples/attribute-directives/eplnkr.html

• Create directive
• Declare input parameter
• Use HostListener to define element's event handlers, ex: mouseenter, mouseleave

@Directive

Decorate a class as directive

ElementRef

The object is injected to directive's constructor so we can access the DOM element