Angular is a powerful framework for building web applications, and one of its most compelling features is the ability to create custom directives. Directives allow you to extend HTML’s capabilities by adding your own behavior and functionalities. In this guide, we will walk you through the process of creating custom Angular directives.

What Are Angular Directives?

Directives are classes that add additional behavior to elements in your Angular applications. They can be used to manipulate the DOM, add event listeners, and even create reusable components.

Step 1: Setting Up Your Angular Project

First, ensure you have Angular CLI installed. If not, you can install it using:

npm install -g @angular/cli

Next, create a new Angular project:

ng new custom-directives-demo
cd custom-directives-demo

Step 2: Generating a New Directive

Use Angular CLI to generate a new directive. For this example, we’ll create a directive that changes the background color of an element when it’s hovered over.

ng generate directive highlight

Step 3: Implementing the Directive Logic

Open the newly created directive file highlight.directive.ts and update it as follows:

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

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

  constructor(private el: ElementRef) {}

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

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

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Explanation:

  • @Directive decorator defines the selector for the directive.
  • ElementRef gives direct access to the DOM element the directive is applied to.
  • @HostListener listens to the mouse enter and leave events to change the background color.
  • @Input allows passing a custom color to the directive.

Step 4: Using the Directive in a Component

Now, let’s use our custom directive in a component. Open app.component.html and update it:

<div appHighlight="lightblue">
  Hover over this text to see the highlight effect!
</div>

<div appHighlight>
  Hover over this text to see the default highlight effect!
</div>

Here, appHighlight is the selector for our directive, and we can optionally pass a color.

Step 5: Running Your Application

Finally, run your Angular application to see the custom directive in action:

ng serve

Open your browser and navigate to http://localhost:4200. You should see the background color change when you hover over the elements.

Conclusion

Creating custom directives in Angular allows you to extend the functionality of your applications in powerful ways. This guide demonstrated how to build a simple highlight directive that changes the background color of an element on hover. With this knowledge, you can create more complex directives to suit your application’s needs.

Don’t forget to checkout: Angular 17 Simple CRUD Tutorial with Standalone Components

Categorized in:

Angular,

Last Update: July 7, 2024