What are custom Angular directives and how do I create one?

What are custom Angular directives and how do I create one?

Custom Angular directives are reusable components that extend HTML with new behavior. To create one, you define a directive using the @Directive decorator.

Can you give me an example of a simple custom directive?

Sure! Here's a simple example: a directive that changes the background color of an element. You can create it like this:

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'backgroundColor', 'yellow');
  }
}

How do I use this directive in my template?

You can use the directive in your template by adding the appHighlight attribute to any HTML element. For example:

<p appHighlight>This paragraph will have a yellow background.</p>

What are some best practices for creating custom directives?

Some best practices include keeping directives focused on a single responsibility, using inputs and outputs for data binding, and ensuring they are reusable across different components.