Angular 18 Create Custom Directive Example

This article will provide an example of angular 18 create directive example. This post will give you a simple example of angular 18 create custom directive example. you will learn how to create custom directive in angular 18. This tutorial will give you a simple example of how to create directive in angular 18. Alright, let’s dive into the details.

To create a custom directive in Angular 18, use the `@Directive` decorator. Define your directive class, specifying its selector and any necessary logic within the `@Directive` metadata. Bind it to the HTML element using its selector. Directives allow you to extend HTML functionality by encapsulating DOM manipulation and event handling. Custom directives enhance code reusability and maintainability by promoting modularization within Angular applications.

In this example we will create the appBtn custom directive in angular 18. We will use the ng generate directive {name} command to Create instructions for the button . We will set the default button color to red and when we hover over it it changes to blue. So, let’s play that.

So, let's follow the following steps:

Step for How to Create Custom Directive in Angular 18?

• Step 1: Create Angular 18 Project
• Step 2: Create Directive
• Step 3: Update Ts File
• Step 4: Update HTML File
• Run Angular App

Let's follow the steps:

Step 1: Create Angular 18 Project

You can easily create your angular app using below command:

ng new my-new-app

Step 2: Create Directive

we will run following command to create user interface.

ng generate directive btn

now, simply update user interface as like the below:

src/app/btn.directive.ts

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';
  
@Directive({
  selector: '[appBtn]',
  standalone: true
})
export class BtnDirective {
  
  constructor(
    private elementRef: ElementRef, 
    private renderer: Renderer2
    ) {
        this.setFontColor('red')
  }
    
  setFontColor(color: string) {
    this.renderer.setStyle(
      this.elementRef.nativeElement,
      'color',
      color
    )
  }
    
  @HostListener('mouseenter') onMouseEnter() {
    this.setFontColor('blue')
  }
    
  @HostListener('mouseleave') onMouseLeave() {
    this.setFontColor('red')
  }
  
}

Step 3: Update Ts File

here, we need to update ts file as like bellow with lat and long variable:

src/app/app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
  
import { BtnDirective } from './btn.directive';
  
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, BtnDirective],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    
}

Step 4: Update HTML File

here, we need to update html file as like bellow code:

src/app/app.component.html

<div class="container">
  
    <h1>How to Create Custom Directive Angular 18? - ItSolutionStuff.com</h1>
  
    <button appBtn>My Button</button>
  
</div>

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

Preview:

now you can check it.

I hope it can help you...