Pipes and Directives in Angular with TypeScript

Angular is a popular web application framework that allows developers to build robust, dynamic, and scalable web applications using TypeScript, a statically typed language that is a superset of JavaScript. In this tutorial, we will explore Pipes and Directives in Angular and learn how to use them to create powerful and dynamic web applications.

Pipes in Angular:

Pipes are a powerful feature in Angular that allow you to transform data before it is displayed in the view. Pipes can be used to format dates, currency, numbers, and much more. Angular comes with many built-in pipes, and you can also create your own custom pipes.

To use a built-in pipe, you simply add the pipe symbol (|) followed by the name of the pipe to the expression in the template. For example, to format a date, you would use the DatePipe as follows:

<p>The current date is {{ currentDate | date }}</p>

This would display the current date in the format specified by the DatePipe.

To create a custom pipe, you need to define a class that implements the PipeTransform interface. This interface requires the implementation of a transform method that takes an input value and returns a transformed value. For example, to create a custom pipe that converts a string to uppercase, you would define a class as follows:

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

@Pipe({name: 'uppercase'})
export class UppercasePipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

Once you have defined your custom pipe, you can use it in your template as follows:

<p>The uppercase value of "hello" is {{ 'hello' | uppercase }}</p>

Directives in Angular:

Directives are another powerful feature in Angular that allow you to extend the behavior of HTML elements or create custom HTML elements. Directives can be used to add or remove elements from the DOM, manipulate the appearance or behavior of existing elements, and much more.

There are two types of directives in Angular: structural directives and attribute directives. Structural directives are used to add or remove elements from the DOM based on a condition, while attribute directives are used to manipulate the appearance or behavior of existing elements.

To create a directive, you need to define a class that implements the Directive interface. This interface requires the implementation of a selector property that defines the name of the directive, as well as any inputs, outputs, or host bindings that the directive requires. For example, to create a directive that changes the background color of an element, you would define a class as follows:

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'background-color', 'yellow');
  }
}

Once you have defined your directive, you can use it in your template as follows:

<p appHighlight>Highlight me!</p>

This would add a yellow background color to the paragraph element.

Conclusion:

Pipes and directives are powerful features in Angular that allow you to create dynamic and interactive web applications. By using pipes, you can transform data before it is displayed in the view, while directives allow you to extend the behavior of HTML elements or create custom HTML elements. With these tools at your disposal, you can create powerful and dynamic web applications that provide an exceptional user experience.