Angular Custom Directives Complete Guide

1. What is an Angular Custom Directive?

Answer: An Angular Custom Directive is a user-defined attribute, element, class, or comment that can manipulate the DOM (Document Object Model). It allows you to extend HTML with custom behavior and functionality. Directives can be created to encapsulate complex logic, make repetitive tasks easier, and maintain clean, reusable code.

2. What are the types of Directives in Angular?

Answer: Angular has three main types of directives:

• Attribute Directives: Change the appearance or behavior of an element, component, or another directive. For example, ngStyle and ngClass.
• Structural Directives: Alter the layout by adding or removing DOM elements. The built-in structural directives include *ngIf, *ngFor, and *ngSwitch.
• Component Directives: Classy directives that define a component. They combine HTML, CSS, and TypeScript to build complex UI controls.

3. How do you create a custom Attribute Directive in Angular?

Answer: To create a custom Attribute Directive, you define a class and use the @Directive decorator from the @angular/core module. Here’s a simple example:

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

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

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string | null) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

4. What does the @HostListener decorator do in Angular Directives?

Answer: The @HostListener decorator in Angular is used to subscribe to events emitted by the host element of the directive. It takes two arguments: the name of the event to listen for (like 'click' or 'mouseenter') and a callback method to trigger when the event is emitted.

5. How can you pass values to a custom Directive?

Answer: Values can be passed into custom Directives using @Input bindings. Here’s an example where the directive accepts a color value:

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

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

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

  ngAfterViewInit() {
    this.highlight(this.highlightColor);
  }

  private highlight(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

In the template, it can be used like this:

<p appHighlight="blue">This text has a blue background!</p>

6. Can you create Structural Directives in Angular?

Answer: Yes, you can create custom Structural Directives. Here’s an example of a Structural Directive that only displays content if the user is an admin:

import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';

@Directive({
  selector: '[appAdminOnly]'
})
export class AdminOnlyDirective {
  private hasView = false;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input()
  set appAdminOnly(condition: boolean) {
    if (!this.hasView && condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (this.hasView && !condition) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

7. What is the difference between ElementRef and Renderer2 in Angular Directives?

Answer:

• ElementRef: Provides direct access to the DOM element that the directive is attached to. Use it to interact with the DOM, but it is generally recommended to use Renderer2 for performance reasons.
• Renderer2: A more secure and performant API for manipulating the DOM. It abstracts away direct DOM interaction, making your directives more testable and closer to the Angular philosophy of maintaining a clean separation between the view and the model.

8. How do you debug Angular Directives?

Answer: Debugging Angular Directives can be done using console logs, the browser's developer tools, and Angular's debugging environment. Here are a few tips:

• Use console.log() to print the state of properties and variables.
• Utilize breakpoints in your code to step through execution.
• Consider leveraging the Angular DevTools in Chrome, which provides insight into the application and its components.

9. What is the significance of the ngOnChanges lifecycle hook in Directives?

Answer: The ngOnChanges lifecycle hook is crucial for responding to changes in input properties. This hook is called before ngOnInit (if the directive is a component) and during every subsequent change detection run, provided the input properties have changed. It receives an object with the previous and current values of the changed properties.

10. Can you provide an example of a Multi-Slot Custom Structural Directive in Angular?

Answer: Creating a structural directive with multiple slots involves using Angular’s TemplateRef and ViewContainerRef along with the *ngTemplateOutlet directive. Here’s an example:

import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';

@Directive({
  selector: '[appTemplateOut]'
})
export class TemplateOutDirective {
  @Input('appTemplateOut') templateInputs: { [key: string]: any };

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input()
  set appTemplateOut(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(
        this.templateRef,
        this.templateInputs || {}
      );
    } else {
      this.viewContainer.clear();
    }
  }
}

Used in the template:

<ng-template #myMultiTemplate let-user="user" let-role="role">
  <div>{{ user }}, {{ role }}</div>
</ng-template>

<div *appTemplateOut="true; appTemplateOut: { user: 'John', role: 'Admin' }"></div>

This directive displays the bound content based on the condition, passing in multiple context variables to the template.