Creating and Using Custom Directives in Angular

1. Introduction

Goal

This tutorial aims to guide you on how to create and use custom directives in Angular.

Learning Outcomes

By the end of this tutorial, you should be able to:
- Understand what custom directives are
- Create your own custom directives
- Use your custom directives in your applications

Prerequisites

To follow this tutorial, you should have a basic understanding of Angular and TypeScript. Familiarity with Angular's built-in directives is an advantage but not necessary.

2. Step-by-Step Guide

What are Custom Directives?

Custom directives are user-defined directives that allow you to manipulate the DOM (Document Object Model). They allow you to encapsulate and reuse code in your application, making it easier to maintain and scale.

Creating a Custom Directive

Here's a basic example of creating a custom directive:

1. First, generate a directive using Angular CLI with the command ng g directive myCustomDirective. This will create a myCustomDirective.directive.ts file.
2. Open the myCustomDirective.directive.ts file and you'll see something like this:

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

@Directive({
  selector: '[appMyCustomDirective]'
})
export class MyCustomDirectiveDirective {

  constructor() { }

}

The @Directive decorator tells Angular that this class is a directive. The selector 'appMyCustomDirective' is used to apply the directive to an element in the template.

3. Code Examples

Example 1: Simple Custom Directive

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

@Directive({
  selector: '[appMyCustomDirective]'
})
export class MyCustomDirectiveDirective {

  constructor(private el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }

}

In the above code, ElementRef is a service that grants direct access to the host DOM element through its nativeElement property. The directive sets the background color of the host element to yellow.

To use this directive, simply add it to an element in your template:

<div appMyCustomDirective>
  This div's background color is yellow.
</div>

Example 2: Custom Directive with Input

Directives can also have inputs that allow data to flow from the binding expression into the directive. Here's an example:

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

@Directive({
  selector: '[appMyCustomDirective]'
})
export class MyCustomDirectiveDirective {

  @Input('appMyCustomDirective') backgroundColor: string;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.el.nativeElement.style.backgroundColor = this.backgroundColor;
  }

}

In this example, the directive takes an input backgroundColor and applies it as the background color of the host element. Usage:

<div [appMyCustomDirective]="'red'">
  This div's background color is red.
</div>

4. Summary

In this tutorial, you learned about custom directives, how to create them, and how to use them in your Angular applications. Directives provide a way to manipulate the DOM and encapsulate and reuse code, making your applications easier to maintain and scale.

5. Practice Exercises

Exercise 1: Create a custom directive that changes the text color of the host element.

Solution:

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

@Directive({
  selector: '[appMyCustomDirective]'
})
export class MyCustomDirectiveDirective {

  constructor(private el: ElementRef) {
    el.nativeElement.style.color = 'blue';
  }

}

Usage:

<p appMyCustomDirective>
  This paragraph's text color is blue.
</p>

Exercise 2: Create a custom directive that takes an input and applies it as the font size of the host element.

Solution:

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

@Directive({
  selector: '[appMyCustomDirective]'
})
export class MyCustomDirectiveDirective {

  @Input('appMyCustomDirective') fontSize: string;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.el.nativeElement.style.fontSize = this.fontSize;
  }

}

Usage:

<p [appMyCustomDirective]="'20px'">
  The font size of this paragraph is 20px.
</p>

I'd recommend that you practice creating more custom directives for various use cases to fully understand the concept. Happy coding!