Angular 14 Directives – Component, Structural & Attribute

Last updated on: by Digamber
Angular Directives tutorial, Directives in Angular is basically a JavaScript or TypeScript based class. You typically declare it as @directive, there are 3 directives in Angular.

Here you will find our the list of directives:

Angular Component Directives

Component directives form the main class. It possesses the details about how the component should be instantiated, processed and utilized at runtime.

Angular Structural Directives

As far as a structure directive is concerned, it is associated with manipulating the dom elements. You will find an asterisk (*) prefix before the directive. We can take *ngFor and *ngIf as examples here.

Angular Attribute Directives

When it comes to altering the behavior and look of the dom element, you turn to attribute directives. You can come up with your own directive as shown in the example below:

Create Custom Directives in Angular 12

We are going to see more of that in this section. Custom directives are user-generated.

We are going to see how we can come up with a custom directive. We will be taking the aid of the Angular command line tool for the same.

Here is the command to create the custom directive in the Angular command line tool –

ng g directive change-color

The above command will generate 2 files, change-color.directive.ts and change-color.directive.spec.ts. And in the process, app.module.ts file is updated as well.

It looks like this in the Angular command line tool when the custom directive is generated.

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

Angular CLI imports the custom directive service “ChangeColorDirective” and defined in declarations array in app.module.ts file by default.

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

The change-color.directive.ts file holds a selector property and a directive. The things we define in the selector must match in the view since we assign the custom directive there.

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');
  }
}

Let’s add the appChangeColor directive in the app.component.html view as shown below –

<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>

Now check out the output in the browser as shown below.
Custom Directive Sample

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.