how angular directive works code example

Example: angular directive

//generate Angular Directives
ng generate directive highlight

//it will generate the following component
import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}
// you can use the directive in the template as:
<p appHighlight> highlighted text </p>