Post
Ask Question

Creating Custom Attribute Directives in Angular

Angular is a powerful framework for building dynamic web applications with JavaScript, HTML, and CSS. One of the key features of Angular is its ability to create custom directives, which allow developers to extend HTML with new attributes and behaviors. In this tutorial, we'll walk through the process of creating a custom attribute directive in Angular.

What are directives in Angular?

Directives are a way to teach HTML new tricks. They are special tokens in the markup that tell the library to do something to a DOM element. Angular has several types of directives:

  1. Component Directives: These are directives with a template.
  2. Attribute Directives: These are used to change the behavior, appearance, or structure of elements.
  3. Structural Directives: These change the DOM layout by adding or removing elements.
  4. Custom Directives: These are user-defined directives.

Creating a Custom Attribute Directive

For this example, we'll create a custom attribute directive that changes the background color of an element when the user hovers over it.

Step 1. Create the new Angular project

ng new DirectiveInAngular
cd DirectiveInAngular

Step 2. Generating the Directive

Now, let's generate a custom attribute directive using the Angular CLI:

ng generate directive highlight

This command generates a new directive named highlight.

Step 3. Implementing the Directive Logic

Open the highlight.directive.ts file in the src/app directory and implement the directive logic:

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

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

  constructor(private el: ElementRef) { }

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

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

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

In this directive

  • We import Directive, ElementRef, and HostListener from @angular/core.
  • We create a directive named HighlightDirective using the @Directive decorator and specify its selector as [appHighlight].
  • We inject ElementRef into the constructor to access the host element.
  • We use @HostListener decorator to listen to mouseenter and mouseleave events on the host element.
  • When the mouse enters the element, we call highlight a method with 'yellow' as the color parameter.
  • When the mouse leaves the element, we call highlight method null to reset the background color.

Step 4. Using the Directive

Now, let's use this directive in our application. Open the app.component.html file and add the following code:

<div appHighlight>
  Hover over me to see the effect!
</div>

Step 5: Running Your Angular Application

Finally, start the Angular development server to see the directive in action:

ng serve --open

GitHubProject Link: https://github.com/SardarMudassarAliKhan/DirectiveInAngular

Conclusion

In this article, we've learned how to create a custom attribute directive in Angular. Directives are a powerful feature of Angular that allows developers to extend HTML with new behaviors. By creating custom directives, you can make your Angular applications more expressive and dynamic.


Similar Articles