Tutorial on Angular Directives In Angular, a directive is a JavaScript or TypeScript-based class. In Angular, you usually specify it as @directive; there are three directives.

The following is a list of our directives:

Angular Component Directives

The main class is made up of component directives. It contains information about how the component should be created, processed, and used at runtime.

Angular Structural Directives

When it comes to structural directives, they're all about manipulating dom elements. Before the directive, there is an asterisk (*) prefix. As examples, we can look at *ngFor and *ngIf.

Angular Attribute Directives

Attribute directives are used to change the behaviour and appearance of the dom element. As seen in the example below, you can create your own directive:

Create Custom Directives in Angular 12

In this section, we'll see a lot more of that. Custom directives are created by the user.

We'll examine what we can do to create a custom directive. The Angular command line tool will be used to accomplish this.

In the Angular command line tool, type the following command to build a custom directive:

ng g directive change-color

Change-color.directive.ts and change-color.directive.spec.ts will be generated by the command above. In the process, the app.module.ts file is also modified.

When the custom directive is built, it appears like this on the Angular command line tool.

ng g directive change-color
# CREATE src/app/change-color.directive.spec.ts (245 bytes)
# CREATE src/app/change-color.directive.ts (151 bytes)
# UPDATE src/app/app.module.ts (406 bytes)

app.module.ts

The custom directive service "ChangeColorDirective" is imported by default by Angular CLI and defined in the declarations array in the app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Custom directive imported here by Angular CLI
import { ChangeColorDirective } from './change-color.directive';

@NgModule({
  declarations: [
    AppComponent,
    ChangeColorDirective  // Custom directive is declared in declartions array by Angular CLI
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example of Custom Angular Directive File

A selector property and a directive are stored in the change-color.directive.ts file. Because we assign the custom directive to the view, the things we define in the selector must match in the view.

import { Directive } from '@angular/core';
@Directive({
  selector: '[appChangeColor]'
})
export class ChangeColorDirective {
  constructor() { }
}

Let?s Create Custom Angular Directive Logic

// Required services for custom directives
import { Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({
  selector: '[appChangeColor]' // Directive selector
})
export class ChangeColorDirective {
  constructor(elem: ElementRef, renderer: Renderer2) {
    renderer.setStyle(elem.nativeElement, 'color', 'blue');
  }
}

As seen below, add the appChangeColor directive to the app.component.html view -

<div style="text-align:center">
  <img width="250" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  <div style="padding-top: 30px">
    // appChangeColor custom Directive
    <h1 appChangeColor>I got colored by Angular Custom Directive</h1>
  </div>
</div>

I hope you will like the content and it will help you to learn Angular 13 Directives ? Component, Structural & Attribute
If you like this content, do share.