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:

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.

To start the application run the following command.

ng serve

Output: