Angular Attribute Directives Tutorial 🎯

Welcome back to CodeYourCraft! Today, we're diving into Attribute Directives, a powerful feature in Angular that allows you to dynamically modify the attributes of HTML elements. Let's get started!

What are Attribute Directives? 📝

Attribute Directives are used to change the behavior of existing HTML elements. They let you attach new attributes and properties to HTML tags and modify their appearance and functionality based on user-defined logic.

Why use Attribute Directives? 💡

Attribute Directives are useful when you want to:

Customize the behavior of built-in HTML elements
Create reusable components with custom properties
Implement conditional behavior based on user input or data

Creating a Simple Attribute Directive 🎯

Let's create a simple Attribute Directive that changes the color of an HTML element based on user input.

typescript

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

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

  constructor() { }

  ngDoCheck() {
    if (this.highlightColor) {
      this.element.style.backgroundColor = this.highlightColor;
    }
  }
}

In the code above, we've defined a Directive named HighlightDirective that can be used on any HTML element using the appHighlight attribute. The @Input decorator tells Angular to bind the appHighlight attribute to the highlightColor property of the Directive.

The ngDoCheck lifecycle hook allows us to check and update the property whenever the component's state changes.

Now, let's see how to use this Directive in an HTML template:

html

<div appHighlight="red">This div will have a red background</div>

In this example, we've applied the HighlightDirective to a div element and passed the red color as an attribute value. When the page loads, the div will have a red background.

Advance Attribute Directive with Event Binding 🎯

Attribute Directives can also handle user events using Event Binding. Let's create a Directive that adds a custom click event to an HTML element.

typescript

import { Directive, EventEmitter, Input, Output } from '@angular/core';

@Directive({
  selector: '[appMyClick]'
})
export class MyClickDirective {
  @Output() onClick = new EventEmitter();

  constructor() { }

  onClickHandler(event: Event) {
    this.onClick.emit(event);
  }

  ngDoCheck() {
    const element = this.element.nativeElement;
    if (element.addEventListener) {
      element.addEventListener('click', this.onClickHandler.bind(this));
    }
  }

  ngOnDestroy() {
    const element = this.element.nativeElement;
    if (element.removeEventListener) {
      element.removeEventListener('click', this.onClickHandler.bind(this));
    }
  }
}

In this Directive, we've defined an onClick event that emits a Event object when the HTML element is clicked. The Directive uses the addEventListener method to attach a click event handler to the element in the ngDoCheck lifecycle hook.

To use this Directive in an HTML template, you can do the following:

html

<div appMyClick (click)="handleClick($event)">Click me</div>

In the example above, we've applied the MyClickDirective to a div element and bound the click event to the handleClick method. When the div is clicked, the handleClick method will receive the Event object emitted by the Directive.

That's it for Attribute Directives! You now have a good understanding of how to create and use Attribute Directives in Angular. In the next lessons, we'll explore other Directive types and Angular's powerful component-based architecture.