Angular 16 Directives – Component, Structural & Attribute

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.In Angular, a directive is a significant feature that helps you to enhance the functionality of HTML with custom behavior and reusable components.

Directives are very much used to manage the DOM (Document Object Model) and integrate extra functionality to elements or create custom elements.

There are three types of directives in Angular:

Component Directives: Components are the most common type of directive in Angular. They are used to create reusable UI components with their own logic and templates.

Attribute Directives: Attribute directives modify the behavior or appearance of an existing element or component. They are used to change the behavior of elements by adding, removing, or manipulating their attributes or classes.

Structural Directives: Structural directives modify the structure of the DOM by adding or removing elements. They are used to conditionally render elements, repeat elements, or alter the layout of elements.

Structural directives are prefixed with an asterisk (*) and include directives like ngIf, ngFor, and ngSwitch.

Create Custom Directives in Angular

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

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 Code

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

Conclusion

In this tutorial we threw light on Angular component, structural and attribute directives, on top of that we also learned how to create custom directives in angular.

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 can trust on attribute directives.