Angular Custom Directives

What are custom directives in Angular?

Custom directives in Angular are user-defined directives that extend or modify the behavior of existing DOM elements. While Angular provides many built-in directives, custom directives allow developers to encapsulate reusable logic and apply it to elements. There are two main types of custom directives in Angular: attribute directives (which modify the behavior or appearance of elements) and structural directives (which alter the DOM structure).

How do you create a custom directive in Angular?

To create a custom directive in Angular, you use the @Directive decorator to define the directive, and then implement the desired behavior in the directive's class. Angular CLI can generate a directive using the ng generate directive command.

Steps to create a custom directive:

1. Generate the directive using the CLI: ng generate directive appHighlight.
2. Use the @Directive decorator to configure the directive's selector and class.
3. Implement any logic inside the directive's class to manipulate the element.

Example of a basic custom directive:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

In this example, the appHighlight directive changes the background color of the host element to yellow when applied.

How do you apply a custom directive in a template?

To apply a custom directive in a template, you use the directive's selector as an attribute in the HTML element where you want the directive to take effect.

Example of using a custom directive:

<p appHighlight>This text is highlighted!</p>

In this example, the appHighlight directive is applied to the paragraph, and the background color of the paragraph will be set to yellow as defined in the directive.

What is ElementRef, and how is it used in custom directives?

ElementRef is a service in Angular that provides access to the native DOM element on which the directive is applied. It is often used in custom directives to manipulate the properties of the host element (such as changing its styles or attributes).

Example of using ElementRef in a custom directive:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }
}

In this example, ElementRef is injected into the directive to gain access to the host element and change its background color.

What is the Renderer2 service, and why is it recommended over ElementRef?

Renderer2 is a service in Angular used to safely manipulate DOM elements in a platform-independent way. Unlike ElementRef, which provides direct access to the DOM, Renderer2 is preferred because it abstracts away DOM manipulation and works well in environments where direct DOM access is not possible (e.g., server-side rendering).

Example of using Renderer2:

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

In this example, Renderer2 is used to set the background color of the element in a more secure and platform-agnostic way.

How do you handle events in custom directives?

In custom directives, you can handle events by using the @HostListener decorator to listen for DOM events (such as clicks, mouse movements, or keyboard input) on the host element. This allows you to define custom behaviors based on user interactions.

Example of handling events in a directive:

@Directive({
  selector: '[appHoverHighlight]'
})
export class HoverHighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'white');
  }
}

In this example, the HoverHighlightDirective listens for mouse enter and mouse leave events, and changes the background color accordingly.

How do you bind properties in a custom directive?

You can bind properties in a custom directive by using the @Input decorator. This allows you to pass data from the component to the directive, enabling dynamic behavior based on input values.

Example of binding properties in a custom directive:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @Input() appHighlight: string;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', this.appHighlight || 'yellow');
  }
}

In the template:

<p [appHighlight]="'lightblue'">This text has a light blue background.</p>

In this example, the appHighlight property is passed as an input to the directive, allowing dynamic control over the background color.

What is the @HostBinding decorator, and how is it used in custom directives?

The @HostBinding decorator in Angular is used to bind a property of the host element (such as a style, class, or attribute) to a property in the directive. This allows you to dynamically update the host element's properties from within the directive.

Example of using @HostBinding in a custom directive:

@Directive({
  selector: '[appTextColor]'
})
export class TextColorDirective {
  @HostBinding('style.color') textColor: string;

  constructor() {
    this.textColor = 'blue';
  }
}

In this example, the textColor property of the directive is bound to the color style of the host element. The text color will be dynamically set to blue.

What is the @HostListener decorator, and how is it used in custom directives?

The @HostListener decorator is used to listen for events on the host element. It allows you to define methods in the directive that will be executed when certain events occur on the host element, such as clicks or mouse movements.

Example of using @HostListener in a custom directive:

@Directive({
  selector: '[appClickHighlight]'
})
export class ClickHighlightDirective {
  @HostListener('click') onClick() {
    alert('Element clicked!');
  }
}

In this example, the ClickHighlightDirective listens for click events on the host element, and when the element is clicked, an alert is displayed.

What is a structural directive, and how do you create one?

A structural directive in Angular is a directive that modifies the DOM by adding or removing elements. Structural directives are typically prefixed with *, and they change the layout of the DOM. To create a custom structural directive, you need to use ViewContainerRef and TemplateRef to manage the rendering of templates.

Steps to create a custom structural directive:

1. Create the directive using the CLI: ng generate directive appUnless.
2. Use the @Directive decorator and inject TemplateRef and ViewContainerRef to control the rendering of the element.
3. Implement the logic to add or remove elements based on a condition.

Example of a custom structural directive:

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}

  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

In the template:

<div *appUnless="isVisible">This element is displayed when isVisible is false.</div>

In this example, the custom appUnless directive works similarly to *ngIf, but it renders the element when the condition is false.

What is the difference between attribute and structural directives?

The key difference between attribute and structural directives is in how they manipulate the DOM:

• Attribute Directives: Modify the behavior, appearance, or properties of existing elements without changing the structure of the DOM. Examples include ngClass, ngStyle, and custom attribute directives.
• Structural Directives: Add or remove elements from the DOM, changing its structure. Examples include *ngIf, *ngFor, and custom structural directives like *appUnless.