1. Introduction

In this tutorial, we are going to explore the use of Directives and Pipes in Angular. Angular Directives are used to manipulate the DOM (Document Object Model), while Pipes are used to format data. By the end of this tutorial, you will understand how to use built-in Angular directives and pipes, and also create your own.

What you will learn:
1. Understand what Directives and Pipes are
2. Use built-in Angular Directives and Pipes
3. Create custom Directives and Pipes

Prerequisites:
Basic understanding of Angular and TypeScript is required.

2. Step-by-Step Guide

Directives:
Angular directives are classes with a @Directive decorator. There are three kinds of directives in Angular:

1. Components: These are directives with a template.
2. Attribute directives: Change the appearance or behavior of an element, component, or another directive.
3. Structural directives: Change the DOM layout by adding and removing DOM elements.

Pipes:
A pipe takes in data as input and transforms it to a desired output. Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, etc. You can also create your own custom pipes.

3. Code Examples

Example 1 - Using built-in Directives:

//app.component.html
<div *ngIf="showDiv">Hello, I am a div.</div>
<button (click)="toggleDiv()">Toggle Div</button>

//app.component.ts
export class AppComponent {
  showDiv = true;

  toggleDiv() {
    this.showDiv = !this.showDiv;
  }
}

In the above example, *ngIf is a built-in Angular structural directive that adds or removes an HTML element. The div will only be displayed if showDiv is true.

Example 2 - Using built-in Pipes:

//app.component.html
<div>{{ today | date:'MM/dd/yyyy' }}</div>

//app.component.ts
export class AppComponent {
  today = Date.now();
}

In this example, date is a built-in pipe that formats a date value according to locale rules.

Example 3 - Creating custom Directive:

//highlight.directive.ts
import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

This custom directive will change the background color of any HTML element it is applied to.

Example 4 - Creating custom Pipe:

//exclaim.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'exclaim'
})
export class ExclaimPipe implements PipeTransform {
  transform(value: any): any {
    return value + '!!!';
  }
}

This custom pipe will add three exclamation marks to any value it is applied to.

4. Summary

We've learned about Angular Directives and Pipes, including how to use the built-in ones and create our own. Directives and Pipes are powerful tools that allow us to manipulate the DOM and format data in Angular.

Next Steps:

• Try creating more complex custom directives and pipes.
• Learn more about the different types of built-in Angular pipes and directives.

Additional resources:

• Angular Official Documentation

5. Practice Exercises

Exercise 1: Create an Angular component and use the *ngIf directive to show or hide an element based on a button click.

Exercise 2: Create a custom pipe that converts a string to camelCase.

Solutions:

1. Similar to Example 1.
2. Create a pipe that splits the string by spaces, then transforms the first letter of each word to uppercase and the rest to lowercase, and finally joins them with no spaces.

Tips for further practice:

• Try combining multiple built-in pipes.
• Explore how to pass arguments to your custom pipes.