Mastering Angular: A Complete Guide to Modern Web Development

Chapter 3: Directives and Pipes in Angular

Angular provides a rich set of tools for building dynamic, responsive, and maintainable front-end applications. Two of the most powerful tools in Angular are Directives and Pipes. These enable developers to manipulate the DOM and transform data directly in the template.

1. Understanding Angular Directives

Directives are classes that add behavior to elements in Angular applications. There are three types:

1.1 Structural Directives

Structural directives affect layout by adding or removing elements. Common examples:

a) *ngIf

html

<p *ngIf="isLoggedIn">Welcome back, user!</p>

This renders the paragraph only if isLoggedIn is true.

b) *ngFor

html

<ul>

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

</ul>

Iterates over an array and renders a list item for each.

c) *ngSwitch

html

<div [ngSwitch]="status">

  <p *ngSwitchCase="'online'">Online</p>

  <p *ngSwitchCase="'offline'">Offline</p>

  <p *ngSwitchDefault>Unknown</p>

</div>

1.2 Attribute Directives

These modify the appearance or behavior of an element.

a) ngClass

html

<p [ngClass]="{ 'highlight': isImportant }">Conditional class</p>

b) ngStyle

html

<p [ngStyle]="{ 'color': isImportant ? 'red' : 'black' }">Styled text</p>

1.3 Creating a Custom Attribute Directive

bash

ng generate directive highlight

highlight.directive.ts:

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

  }

  private highlight(color: string) {

    this.el.nativeElement.style.backgroundColor = color;

  }

}

Use it in a component:

html

<p appHighlight>Hover over me!</p>

2. Angular Pipes

Pipes transform data in the template. They are declared with the pipe | symbol.

2.1 Built-in Pipes

Example: Using date and currency

html

<p>Today is {{ today | date:'fullDate' }}</p>

<p>Price: {{ price | currency:'USD':true }}</p>

2.2 Chaining Pipes

You can use multiple pipes together:

html

<p>{{ user.name | uppercase | slice:0:5 }}</p>

2.3 Parameters in Pipes

Most pipes accept optional parameters.

html

<p>{{ total | currency:'EUR':'symbol':'1.2-2' }}</p>

3. Custom Pipes

Custom pipes allow you to encapsulate logic for data transformation.

3.1 Creating a Custom Pipe

bash

ng generate pipe truncate

truncate.pipe.ts:

ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

  name: 'truncate'

})

export class TruncatePipe implements PipeTransform {

  transform(value: string, limit = 20, completeWords = false, ellipsis = '...'): string {

    if (!value) return '';

    if (completeWords) {

      limit = value.substr(0, limit).lastIndexOf(' ');

    }

    return value.length > limit ? value.substr(0, limit) + ellipsis : value;

  }

}

Use in a template:

html

<p>{{ longText | truncate:25:true }}</p>

4. Directives vs Pipes: Key Differences

5. Built-in Structural Directive Best Practices

1. Avoid nesting too many *ngIf and *ngFor – split logic into components.
2. Use trackBy with *ngFor for better performance.

html

<li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>

ts

trackByFn(index: number, item: any): number {

  return item.id;

}

6. Creating a Custom Structural Directive

bash

ng generate directive unless

unless.directive.ts:

ts

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

@Directive({

  selector: '[appUnless]'

})

export class UnlessDirective {

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

  @Input() set appUnless(condition: boolean) {

    if (!condition) {

      this.viewContainer.createEmbeddedView(this.templateRef);

    } else {

      this.viewContainer.clear();

    }

  }

}

Use in HTML:

html

<p *appUnless="isLoggedIn">Please log in to continue.</p>

7. Pure vs Impure Pipes

Default pipes are pure. For impure pipes:

ts

@Pipe({

  name: 'myPipe',

  pure: false

})

8. Combining Pipes and Directives

You can use pipes inside structural directives:

html

<li *ngFor="let name of names | slice:0:5">

  {{ name | titlecase }}

</li>

9. Testing Custom Pipes and Directives

Test cases ensure your custom logic behaves as expected.

Pipe Test Example

ts

it('should truncate text', () => {

  const pipe = new TruncatePipe();

  expect(pipe.transform('Angular is awesome', 7)).toBe('Angular...');

});

Directive Test Example

ts

it('should create an element when condition is false', () => {

  const directive = new UnlessDirective(templateRef, viewContainerRef);

  directive.appUnless = false;

  // expectations

});

10. Summary Table: Common Use Cases