Creating and Using Custom Directives – Angular

What You’ll Learn 📚

• Understanding what directives are in Angular
• Creating your first custom directive
• Exploring different types of directives
• Troubleshooting common issues

Introduction to Directives

In Angular, directives are classes that add additional behavior to elements in your Angular applications. They are one of the core building blocks of Angular and allow you to create reusable components that can manipulate the DOM. Think of directives as special instructions you give to Angular to do something specific with your HTML elements.

Key Terminology

• Directive: A class that can modify the structure or behavior of DOM elements.
• Attribute Directive: A directive that changes the appearance or behavior of an element, component, or another directive.
• Structural Directive: A directive that changes the DOM layout by adding or removing elements.

Creating Your First Custom Directive

Let’s start with the simplest possible example of creating a custom directive. Don’t worry if this seems complex at first; we’ll break it down step by step! 😊

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);
  }
}

How to Use It

To use this directive, simply add the appHighlight attribute to any HTML element in your template:

<p appHighlight>Hover over this text to see the magic!</p>

Progressively Complex Examples

Example 2: Structural Directive

Let’s create a structural directive that conditionally adds or removes an element from the DOM.

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

@Directive({
  selector: '[appIf]'
})
export class IfDirective {
  constructor(private templateRef: TemplateRef, private viewContainer: ViewContainerRef) {}

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

How to Use It

Use the directive in your template like this:

<div *appIf="isVisible">This content is conditionally visible.</div>

Example 3: Attribute Directive with Input

Now, let’s enhance our highlight directive to accept a custom color as input.

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

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

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

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

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

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

How to Use It

Specify the color directly in the template:

<p [appHighlight]="'lightblue'">Hover over me to see a light blue background!</p>

Common Questions and Answers

1. What is a directive in Angular?
   Directives are classes that add additional behavior to elements in your Angular applications.
2. How do structural directives differ from attribute directives?
   Structural directives change the DOM layout by adding/removing elements, while attribute directives change the appearance or behavior of an element.
3. Can I use multiple directives on a single element?
   Yes, you can apply multiple directives to a single element.
4. How do I troubleshoot a directive not working?
   Check for typos in the selector, ensure the directive is declared in a module, and verify the logic inside the directive.

Troubleshooting Common Issues

If your directive isn’t working, make sure it’s declared in an Angular module. Also, check for typos in the directive’s selector.

Remember, practice makes perfect! Try creating your own directives to reinforce what you’ve learned. 💪

Practice Exercises

• Create a directive that changes the text color of an element on click.
• Build a structural directive that displays content based on user roles.
• Experiment with combining multiple directives on a single element.

For more information, check out the Angular documentation on attribute directives.