Angular - Custom Directives

Custom Directives in Angular

A custom directive is a user-defined directive that allows developers to extend the functionality of HTML elements. The attribute and structural built-in directives (covered in previous two chapters) offers very basic and pre-defined functionalities. However, with custom directives, you can add specific behaviors to HTML elements based on project requirements, user interactions, or changes in data.

Features and Uses of Angular Custom Directives

The Angular Custom Directives provides the following features −

• The first and most basic feature of a custom directive is to modify the structure or appearance of DOM elements based on your specific logic.
• It allows you to embed event listeners to the HTML elements so that their behavior can be changed in response to user interaction.
• You can create a reusable and modular piece of code using custom directives.
• The custom directives can also help us add various features to the user interface, such as tooltip, drag and drop, form validation, dynamic styles and much more.

Creating a Custom Directive in Angular

To create a custom directive, run the following command in Angular CLI −

ng generate directive <directive-name>

The above command will create a new directive with the specified name and add the necessary files for it. Among these files, the most important one is TypeScript file. This file has.tsextension.

Example

In this example, we will learn how to create a custom directive in Angular.

Step 1: Use the below command to create customstyle directive −

ng generate directive customstyle

After running this command, Angular CLI will create below files −

CREATE src/app/customstyle.directive.spec.ts (252 bytes)
CREATE src/app/customstyle.directive.ts (182 bytes)

Step 2: Open customstyle.directive.ts file and add the below code −

import { Directive, ElementRef } from '@angular/core';
@Directive({
  selector: '[appCustomstyle]',
  standalone: true
})
export class CustomstyleDirective {
  constructor(el: ElementRef) { 
    el.nativeElement.style.fontSize = '24px';
  }
}

Here, constructor method gets the element using CustomStyleDirective as el. Then, it accesses style of el and sets its font size as 24px using the CSS property.

Step 3: Add the below text and use the selector of custom directive as shown below −

<p appCustomstyle>This text is styled using custom style directive</p>
<router-outlet />

Step 4: Import this custom directive inside app.component.ts file as shown below −

import { Component} from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CustomstyleDirective } from './customstyle.directive';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CustomstyleDirective],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
}

Step 5: Finally, run your application using the below command −

ng serve

Output of the above code is shown below −