A Comprehensive Guide to Angular Directives: Tutorial with Code Examples

Angular 7 comes with a powerful feature called directives, which allows developers to extend the functionality of HTML elements. Directives are a way to teach HTML new tricks, making your code more expressive and reusable.

In this tutorial, we will explore Angular 7 directives in detail, covering different types of directives and providing code examples for each.

Prerequisites

Before diving into Angular 7 directives, make sure you have the following prerequisites installed:

1. Node.js and npm
2. Angular CLI (Command Line Interface)

Getting Started

Let’s start by creating a new Angular project. Open your terminal and run the following command:

ng new angular-directives-example
cd angular-directives-example

Once the project is created, navigate to the project directory and open it in your preferred code editor.

Types of Directives in Angular 7

Angular 7 provides three types of directives:

1. Component Directives
2. Attribute Directives
3. Structural Directives

1. Component Directives

Component directives are the most common type of directive in Angular. They are used to create reusable UI components. Let’s create a simple component directive called CustomButton.

ng generate component custom-button

Now, let’s implement the CustomButton component:

// custom-button.component.ts

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

@Component({
  selector: 'app-custom-button',
  template: '<button>Click Me</button>',
})
export class CustomButtonComponent {}

2. Attribute Directives

Attribute directives are used to change the behavior or appearance of DOM elements. Let’s create an attribute directive called highlight.

ng generate directive highlight

Now, let’s implement the highlight directive:

// highlight.directive.ts

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string | null) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Now, you can use the appHighlight directive to highlight DOM elements.

3. Structural Directives

Structural directives are used to add or remove DOM elements based on conditions. Let’s create a structural directive called appIf.

// if.directive.ts

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

@Directive({
  selector: '[appIf]'
})
export class IfDirective {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

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

Now, you can use the appIf directive to conditionally render DOM elements.

Conclusion

Congratulations! You have learned about Angular 7 directives and how to use them in your applications. Directives are a powerful feature that can greatly enhance the flexibility and maintainability of your code.

Experiment with different types of directives and explore their capabilities further to become proficient in Angular development. Happy coding!