Angular Directives: A Comprehensive Guide

The Code Points March 23, 2025 0

In Angular, directives are powerful tools that allow you to extend HTML functionality and manipulate the DOM (Document Object Model) in a declarative manner. They are one of the core building blocks of Angular applications, enabling you to create dynamic, reusable, and highly maintainable user interfaces.

In this article, we will explore the types of directives in Angular, how to use built-in directives like ngIf and ngFor, and how to create custom directives to suit your application needs.

What Are Angular Directives?

In Angular, a directive is a special kind of class that allows developers to manipulate DOM elements, attributes, and behavior. There are three main types of directives in Angular:

1. Structural Directives: These directives alter the layout of the DOM by adding or removing elements. Examples include *ngIf and *ngFor.
2. Attribute Directives: These directives change the appearance or behavior of an element, component, or directive. Examples include ngClass and ngStyle.
3. Component Directives: These are essentially Angular components but are considered a type of directive in Angular’s architecture.

Types of Directives in Angular

Let’s dive deeper into the two most common types of Angular directives: structural and attribute directives.

1. Structural Directives

Structural directives are used to change the structure of the DOM by adding, removing, or manipulating DOM elements based on certain conditions. These directives are prefixed with an asterisk (*).

ngIf Directive

The ngIf directive is a structural directive that conditionally adds or removes an element from the DOM. It’s commonly used for displaying content only when a specified condition is true.

Example:

<div *ngIf="isVisible">This content is visible if isVisible is true.</div>

In the above example, the content inside the <div> will be rendered only if the value of isVisible is true. If isVisible is false, the entire <div> will be removed from the DOM.

ngFor Directive

The ngFor directive is another structural directive used for looping over a collection (such as an array or list) and rendering content for each item.

Example:

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

This code will iterate over the items array and display each element inside a <li> element.

2. Attribute Directives

Attribute directives are used to modify the appearance or behavior of an element, component, or another directive. Unlike structural directives, they do not change the structure of the DOM but instead alter how elements look or behave.

ngClass Directive

The ngClass directive allows you to dynamically add or remove CSS classes to an element.

Example:

<div [ngClass]="{ 'highlight': isHighlighted }">This div will have the 'highlight' class if isHighlighted is true.</div>

In this example, the ngClass directive binds the class highlight to the <div> element when isHighlighted is true.

ngStyle Directive

The ngStyle directive is used to dynamically change the style of an element.

Example:

<div [ngStyle]="{ 'color': color, 'font-size': fontSize + 'px' }">Styled content</div>

Here, the ngStyle directive applies inline styles to the <div> element based on the component's color and fontSize values.

Creating Custom Directives in Angular

Angular also allows developers to create their own custom directives for specialized functionality. Custom directives can either be attribute or structural directives based on the need.

Creating a Custom Attribute Directive

To create a custom attribute directive, you can use Angular's @Directive decorator. Here’s an example of a directive that changes the background color of an element when the mouse hovers over it.

Example:

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

@Directive({
  selector: '[appHoverEffect]'
})
export class HoverEffectDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeStyle(this.el.nativeElement, 'background-color');
  }
}

In the component template, you can now apply this custom directive as an attribute to an element:

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

In this example:

• @HostListener listens for mouse events like mouseenter and mouseleave to change the background color of the element.
• Renderer2 is used to safely modify the DOM, ensuring compatibility across different environments (such as server-side rendering).

Creating a Custom Structural Directive

To create a custom structural directive, you can use the TemplateRef and ViewContainerRef services. This allows you to control when an element should be added or removed from the DOM.

Example:

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

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}

  set appUnless(condition: boolean) {
    if (!condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

To use this custom structural directive in your component:

<div *appUnless="isVisible">This content will be displayed unless isVisible is true.</div>

In this example, the appUnless directive behaves oppositely to ngIf — it will display the element if the condition is false.

Best Practices for Using Directives in Angular

• Use built-in directives whenever possible: Angular provides a comprehensive set of built-in directives (ngIf, ngFor, ngClass, ngStyle) that can handle most of your UI needs.
• Create reusable custom directives: When you need specialized functionality across different components, creating custom directives will help you maintain a clean and reusable codebase.
• Encapsulate logic: Keep your directive logic simple and focused on one specific task, whether it’s manipulating the DOM, handling events, or modifying element styles.
• Avoid excessive use of structural directives: Structural directives like ngIf and ngFor can affect performance if overused. Be mindful of when and where they are applied, especially in large lists.

Conclusion

Angular directives are powerful tools for extending HTML functionality and creating dynamic, reusable UI components. By mastering the use of structural directives, attribute directives, and custom directives, you can build scalable and maintainable Angular applications with rich, interactive features.

Whether you’re using ngIf to conditionally display elements or creating a custom directive to add behavior to DOM elements, understanding how directives work is key to mastering Angular’s flexibility.

Happy coding with Angular!