Understanding Angular Directives

Angular directives are a powerful tool that allow developers to modify the behavior, appearance, and structure of elements in an Angular application. If you’ve been working with Angular for a while, you’ve likely already used directives, even if you didn’t realize it at first. In this blog, we will break down what directives are, the different types of directives, and how to create your own.

What Are Angular Directives?

At their core, Angular directives are classes that can change the structure or behavior of your DOM elements. A directive can be thought of as a decorator for an element in the HTML template, which extends its capabilities by adding extra functionality.

Types of Directives

There are three main types of directives in Angular:

1. Component Directives

The most common type of directive is a component directive. In fact, every Angular component is essentially a directive with a template. Component directives are used to build UI elements and define how your app looks.

				
					@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  // component logic here
}

2. Structural Directives

Structural directives change the layout of the DOM by adding or removing elements based on specific conditions. You can spot them easily because they use an asterisk (*) before their names.

Common examples are *ngIf, *ngFor, and *ngSwitch.

				
					<div *ngIf="isLoggedIn">
  Welcome, User!
</div>

Here, *ngIf checks if isLoggedIn is true, and only then will it render the div. If it’s false, the element is removed from the DOM..

3. Attribute Directives

Attribute directives are used to change the appearance or behavior of elements, components, or other directives. They are applied as attributes on elements and don’t change the layout of the DOM.

Example: Angular’s built-in ngClass and ngStyle are attribute directives.

				
					<button [ngClass]="{'active': isActive}">Click Me</button>

This example applies the active class to the button based on the value of the isActive property.

4. Creating Custom Directives

While Angular provides many useful directives out of the box, you can create custom directives to suit your specific needs.

Steps to Create a Custom Directive:

Generate the Directive Use Angular CLI to generate a new directive:

				
					ng generate directive highlight

Define the Directive After generating the directive, you will find a new TypeScript file in your project with the directive code. In this example, we’ll create a highlight directive that changes the background color of an element when you hover over it.

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

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

  constructor(private el: ElementRef) { }

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

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

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

Using the Directive Once your directive is defined, you can use it in any template like so:

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

Explanation:

@Directive: This decorator marks the class as a directive.
selector: '[appHighlight]': This defines how to apply the directive. In this case, it is applied as an attribute (appHighlight).
ElementRef: A service that grants direct access to the DOM element.
@HostListener: Allows you to listen to events on the host element, such as mouseenter or mouseleave, to trigger the directive’s functionality.
@Input(): This allows passing a value to the directive, making it customizable.

Common Use Cases for Directives:

Dynamic Styling: Attribute directives like ngStyle and ngClass are often used to dynamically apply styles or classes based on application logic.
Conditional Rendering: Using structural directives like ngIf and ngFor allows developers to show or hide elements or iterate over data sets dynamically.
Event Handling: Custom directives can be used to handle user interactions like clicks, mouseovers, or form validation behaviors.

Understanding Angular Directives

Table of Contents