Directives
TypeScript classes to manipulate DOM elements
Operate on existing elements
Don't have a template
Angular provides several directives: ngStyle, ngClass, ngModel
ng generate directive highlight or ng g d highlight
Why not highlight? - To avoid naming conflicts, Angular prepends the application name to the selector to ensure uniqueness.
Adding directive to module - The Angular CLI automatically added our new directive to the nearest parent module, or app.module in this case. If you create the directive manually, you will need to add it to a parent module before using it.
my.component.html<p appHighlight>This is highlighted text</p>
If we wanted to highlight the text only when the user mouses over the element, then we would need to react to user events.
The @HostListener decorator lets you subscribe to events of the DOM element that hosts an attribute directive.
my.component.ts<p appHighlight="red">This is highlighted text</p>
What are directives?
Creating custom directives
Handling user events
Passing inputs to directive
