What is a custom directive in Angular?

Angular, a popular framework for building dynamic web applications, offers a powerful feature known as custom directives. These directives extend the functionality of HTML elements, enabling to create reusable components and add behavior to their applications. In this article, we’ll learn about the concept of custom directives in Angular.

What is Custom Directive?

Custom directives in Angular provide a mechanism to create reusable components and add behavior to HTML elements. They help to encapsulate complex functionality, apply dynamic behavior, and enhance the structure of the DOM. Custom directives are defined as TypeScript classes decorated with Angular’s @Directive() decorator.

Features of Custom Directives:

• Encapsulation of Behavior: Custom directives encapsulate specific functionality, provides code reusability and maintainability.
• Dynamic Behavior: They enable the application of dynamic behavior to HTML elements based on user interactions, data changes, or application logic.
• Access to DOM: Directives can access and manipulate the DOM using Angular’s ElementRef service, providing fine-grained control over the presentation layer.
• Reusable Components: Custom directives can be reused across different parts of the application, provides modular development and reducing code duplication.

Uses of Custom Directives:

• Adding Styling: Directives can be used to apply dynamic styles to HTML elements based on application state or user interactions.
• Handling User Input: They enable the creation of custom input controls and validation logic for forms.
• Structural Manipulation: Directives can manipulate the structure of the DOM, conditionally rendering elements or repeating content based on data.
• Integrating Third-party Libraries: Custom directives can integrate with third-party libraries or frameworks, encapsulating their functionality within Angular components.

Creating Custom Attribute

Step 1: Setting Up Angular Project

Install Angular CLI globally (if not already installed)

npm install -g @angular/cli

Create a new Angular project:

ng new custom-attribute-demo

Navigate into the project directory:

cd custom-attribute-demo

Step 2: Create a Custom Attribute Directive

Create a new custom attribute directive:

ng generate directive highlight

Folder Structure:

Folder Structure.

Dependencies:

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.0",
    "@angular/cli": "^17.3.0",
    "@angular/compiler-cli": "^17.3.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }

Example: Add the following codes in the respective files.

HTML

<!-- app.component.html -->

<p appHighlight="cyan">
  AngularJS was developed in 2008-2009 by Misko Hevery and Adam Abrons and is
  now maintained by Google. AngularJS is a Javascript open-source front-end
  framework. It is used to develop single-page web applications (SPAs).<br/> It is a
  continuously growing and expanding framework which provides better ways for
  developing web applications.<br/> In this AngularJS tutorial, we will explore the
  key concepts, features, and steps to kickstart your journey in creating robust
  and interactive web applications.
  <br />
  This AngularJS tutorial is designed for beginners as well as professionals,
  which covers a wide range of important topics, including AngularJS
  Expressions,<br/> AngularJS directives, AngularJS Data Binding, AngularJS
  controllers, AngularJS modules, AngularJS scopes, filters, and more. <br />
  Vehicula ipsum a arcu cursus vitae. Lectus nulla at volutpat diam ut venenatis
  tellus. Malesuada nunc vel risus commodo. Rutrum quisque non tellus orci ac.
  <br />
  AngularJS is an open-source, client-side framework that allows developers to
  build dynamic and responsive web applications. It extends HTML with new
  attributes and binds data to HTML with expressions. <br/>The framework is designed
  to make both the development and testing of such applications more accessible
  by providing a well-defined structure and a set of tools.
  <br />
  Two-Way Data Binding: One of the standout features of AngularJS is its two-way
  data binding. This means that changes in the user interface automatically
  update the underlying data model and vice versa. <br/>This simplifies the
  synchronization of data between the view and the model, reducing the need for
  manual manipulation.
</p>

JavaScript

//highlight.directive.ts

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

@Directive({
    standalone: true,
    selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {
    @Input() appHighlight: string = "";

    constructor(private el: ElementRef) { }

    ngOnInit() {
        this.el.nativeElement.style.backgroundColor = this.appHighlight || 'yellow';
    }
}

JavaScript

//app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HighlightDirective } from './highlight.directive'

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, HighlightDirective],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'custom-attribute-demo';
}

To start the application run the following command.

ng serve

Output:

What is a custom directive in Angular