Angular 14 Tutorial- Component, Structural & Attribute

Angular Directives Tutorial- Directives in Angular are basically a JavaScript or TypeScript-based class. We typically declare it as @directive, there are 3 directives in Angular.

This Angular tutorial is compatible with version 4+ including latest version 12, 11, 10, 9, 8 ,7, 6 & 5.

Here, we will find 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 directive is concerned, it is associated with manipulating the dom elements. We 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, we turn to attribute directives. We can come up with our own directives 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 (CLI) for the same.

Below is the command to create the custom directive in the Angular Command Line Tool:

ng g directive change-color

 

The above-mentioned command will generate 2 files, change-color.directive.ts and change-color.directive.spec.ts and in the process, the 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 the declarations array in the 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>

 

Below-given is the image that we get in the browser:

Custom Directive Sample

 

Conclusion

In this Angular tutorial, we have learned about the Component, Structural & Attribute.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *