Creating custom Attribute Directives

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 ...

Get Expert Angular now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.