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)


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

  declarations: [
    ChangeColorDirective  // Custom directive is declared in declartions array by Angular CLI
  imports: [
  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';
  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';
  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>

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.

Recommended Posts

View All

Building Professional UI Components using Angular Material Design

Learn how to build professional UI components using Angular Material Design in this comprehensive tutorial. Elevate your UI game today!

What are the key components of Angular?

Angular is a powerful JavaScript framework for building web applications. Discover its key components and how they work together in this guide.

Angular 13 Firebase Send Mail Example

Learn how to send a verification email to a new user in Angular, as well as how to prohibit users from accessing their accounts until the email has be...

Different Types of Data Binding in Angular

Explore the various techniques of data binding in Angular - one-way, two-way, event, and interpolation binding - to optimize your app's performance.

Best Strategies for Building Enterprise Applications with Angular

Learn the best strategies for building enterprise applications with Angular. Discover tips and tricks to create scalable and maintainable apps.