One of the key features of Angular is directives. Angular directives are a way for you to add behavior to DOM elements. Angular provides a variety of built-in directives, and you can also create custom directives in this robust framework.

What Are Directives?

Directives are custom codes that Angular uses to modify the behavior or appearance of an HTML element. You can use directives to add event listeners, change the DOM, or show or hide elements.

There are two types of built-in directives in Angular, structural and attribute. Structural directives change the structure of the DOM, while attribute directives change the appearance or behavior of an element. Directives are a powerful way to extend the functionality of Angular components.

Benefits of Directives

Here are some of the benefits of using directives in Angular:

• Reusability: You can use directives in multiple components, saving you time and effort.
• Extensibility: You can extend directives to add new functionality, making your components more powerful.
• Flexibility: Using directives, you can modify the behavior or appearance of an element in various ways, giving you a lot of flexibility when building your applications.

Setting Up Your Angular Application

To set up an Angular application, install the Angular CLI by running the following code in your terminal:

 npm install -g @angular/cli
 

After installing the Angular CLI, create an Angular project by running the following command:

 ng new custom-directives-app
 

Running the command above will create an Angular project named custom-directives-app.

Creating a Custom Directive

Now you have an Angular project and can begin creating your custom directives. Create a TypeScript file and define a class decorated with the @Directive decorator.

The @Directive decorator is a TypeScript decorator used to create custom directives. Now create a highlight.directive.ts file in the src/app directory. In this file, you will create the custom directive highlight.

For example:

 import { Directive } from "@angular/core";

@Directive({
  selector: "[myHighlight]",
})
export class HighlightDirective {
  constructor() {}
}
 

The code block above imports the Directive decorator from the @angular/core module. The @Directive decorator decorates the HighlightDirective class. It takes an object as an argument with a selector property.

In this case, you set the selector property to [myHighlight] meaning you can apply this directive to your templates by adding the myHighlight attribute to an element.

Here is an example of how to use the directive in your templates:

 <main>
 <p myHighlight>Some text</p>
</main>
 

Adding Behavior to the Directive

Now you have successfully created a directive. The next step is to add a behavior to the directive so it can manipulate the DOM. You will need the ElementRef from @angular/core to add a behavior to a directive.

You will inject ElementRef into the directive's constructor. ElementRef is a wrapper around a native element inside a view.

Here's an example of how you add a behavior to a directive:

 import { Directive, ElementRef } from "@angular/core";

@Directive({
    selector: "[myHighlight]"
})
export class HighlightDirective {
    constructor(private element: ElementRef) {
        this.element.nativeElement.style.backgroundColor = 'lightblue';
    }
}
 

In this example, the constructor of the HighlightDirective class takes an ElementRef parameter, which Angular automatically injects. The ElementRef provides access to the underlying DOM element.

Using this.element.nativeElement property, you access the native DOM element of the element parameter. You then set the component’s background color to lightblue using the style property. This means that whatever element you apply the myHighlight directive to will have a light-blue background.

To make the directive functional, ensure you import and declare it in the app.module.ts file.

For example:

 import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

Now you can apply the myHighlight directive to the elements in your Angular components.

 <main>
 <p myHighlight>Some text</p>
</main>
 

Run your application on the development server to test if the directive is functional. You can do this by running the following command in your terminal:

 ng serve
 

After running the command, navigate to http://localhost:4200/ on your web browser, and you will see an interface that looks like the image below.

Angular built-in directives accept values to change element appearance, but the custom directive myHighlight does not. You can configure the directive to accept a value it will use to dynamically set the template's background color.

To do this, replace the code in the highlight.directive.ts file with this:

 import { Directive, ElementRef, Input } from "@angular/core";

@Directive({
    selector: "[myHighlight]"
})

export class HighlightDirective {
    @Input() set myHighlight(color: string) {
        this.element.nativeElement.style.backgroundColor = color;
    }

    constructor(private element: ElementRef) { 
    }
}
 

In the code block above, the HighlightDirective class contains a setter method called myHighlight. This method takes a color parameter of the type string. You decorate the setter method with the @Input decorator, allowing you to pass the color value into the directive from the parent component.

Now you can determine the background color by passing a value to the myHighlight directive.

For example:

 <main>
 <p myHighlight='pink'>Some text</p>
</main>
 

Creating a Custom Structural Directive

In the previous sections, you have learned how to create, add behaviors, and apply custom attribute directives to your template. Attribute directives change the appearance of DOM elements, while structural directives add, remove, or move elements in DOM.

Angular provides two structural directives, ngFor and ngIf. The ngFor directive renders a template for each item in a collection (array), while the ngIf handles conditional rendering.

In this section, you will create a custom structural directive that functions like the ngIf directive. To do this, create a condition.directive.ts file.

In the condition.directive.ts file, write this code:

 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'

@Directive({
    selector: "[condition]"
})

export class ConditionDirective {

    @Input() set condition(arg: boolean) {
        if(arg) {
            this.viewContainer.createEmbeddedView(this.template)
        } else {
            this.viewContainer.clear();
        }
    }

    constructor(
 private template: TemplateRef<unknown>, 
 private viewContainer: ViewContainerRef 
 ) {}
}
 

This code block allows you to conditionally render elements by applying the condition directive to an element and passing a boolean value from the parent component.

In the constructor of the ConditionDirective class, you inject an instance of TemplateRef and ViewContainerRef. The TemplateRef represents the template associated with the directive, and the ViewContainerRef represents the container where the application renders the views.

The ConditionDirective class setter method uses an if else statement to check the arg parameter. The directive creates an embedded view using the provided template if the parameter is true. The createEmbeddedView method of the ViewContainerRef class creates and renders the view in the DOM.

If the parameter is false, the directive clears the view container using the clear method of the ViewContainerRef class. This removes any previously rendered views from the DOM.

After creating the directive, register it in your project by importing and declaring it in the app.module.ts file. After doing this, you can start using the directive in your templates.

Here is an example of how to use it in your templates:

 <main>
 <p *condition="true">Hello There!!!</p>
</main>
 

Now You Can Create Custom Directives

Custom directives in Angular provide a powerful way to manipulate the DOM and add dynamic behavior to your templates. You have learned how to create and apply custom attributes and structural directives in your Angular applications. By understanding how to create and use custom directives, you can take full advantage of the capabilities of Angular.