Angular Directives

Directives are a core feature in Angular that allow you to extend the capabilities of HTML by adding custom behavior to elements in the DOM. This tutorial provides an overview of Angular directives, their types, and how to create and use them effectively.

Types of Angular Directives

Angular directives are categorized into three main types:

Component Directives

Component directives are the most common type of directives. They are used to create reusable components with their own templates, styles, and behavior. Here is an example of a simple component directive:

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

@Component({
  selector: 'app-hello-world',
  template: '<h1>Hello, World!</h1>',
  styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent { }

Structural Directives

Structural directives change the DOM layout by adding or removing elements. They are prefixed with an asterisk (*). Here are some common structural directives:

*ngIf

The *ngIf directive conditionally includes or excludes an element based on the value of an expression:

<div *ngIf="isVisible">This text is visible if isVisible is true.</div>

*ngFor

The *ngFor directive iterates over a collection and creates an instance of the element for each item:

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

*ngSwitch

The *ngSwitch directive conditionally includes elements based on the value of an expression. It works with the *ngSwitchCase and *ngSwitchDefault directives:

<div [ngSwitch]="color">
  <div *ngSwitchCase="'red'">Red</div>
  <div *ngSwitchCase="'blue'">Blue</div>
  <div *ngSwitchDefault>Other</div>
</div>

Attribute Directives

Attribute directives change the appearance or behavior of an element, component, or another directive. Here are some common attribute directives:

ngClass

The ngClass directive adds and removes a set of CSS classes:

<div [ngClass]="{ 'class1': isClass1, 'class2': isClass2 }">This div's classes are dynamically set.</div>

ngStyle

The ngStyle directive adds and removes a set of inline styles:

<div [ngStyle]="{ 'color': color, 'font-size.px': fontSize }">This div's styles are dynamically set.</div>

Custom Attribute Directive

You can create custom attribute directives to encapsulate and reuse common behavior. Here is an example of a custom attribute directive that changes the background color of an element when it is hovered over:

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

@Directive({
  selector: '[appHoverHighlight]'
})
export class HoverHighlightDirective {
  @Input() highlightColor: string;

  constructor(private el: ElementRef) {}

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

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

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

Conclusion

Directives are a powerful feature in Angular that allow you to extend the capabilities of HTML by adding custom behavior to elements in the DOM. By understanding and using component, structural, and attribute directives, you can build dynamic and interactive Angular applications. Happy coding!