We will start by creating custom Attribute Directives. We will continue with the example highlightDirective we created in the preceding section.
As the name suggests, we will use this directive to highlight the changed text color of elements attached to this attribute.
It's time to define the functionality and behavior of our directive, highlightDirective.
In the highlight-directive.ts file, add the following lines of the code:
import { Directive, ElementRef } from '@angular/core';@Directive({ selector: '[appHighlightDirective]'})export class HighlightDirectiveDirective{ constructor(private elRef: ElementRef) { this.elRef.nativeElement.style.color = 'orange'; }}
Let's analyze the preceding code snippet ...