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

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

Custom directives in Angular are reusable components that allow you to extend HTML with new attributes and elements. To create one, you define a directive using the @Directive decorator, specify a selector, and implement the desired behavior in the class.

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

Sure! Here's a simple example: You can create a directive that changes the background color of an element. Use the following code:

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

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

You can then use it in your template like this: <div appHighlight>Highlight me!</div>.

What are the differences between components and directives?

Components are directives with a template. They are used to create UI elements, while directives are used to add behavior to existing elements. Components encapsulate both logic and view, whereas directives only add functionality.

How do I pass data to a custom directive?

You can pass data to a custom directive using input properties. Use the @Input decorator to define a property in your directive class, and bind it in your template like this:

@Input() appHighlightColor: string;

Then, in your template, you can use it like this: <div [appHighlightColor]="'blue'">Highlight me!</div>.