Activity 12 Research Angular Pipes

Understanding Angular Pipes

Definition and Purpose

Angular Pipes are a feature in Angular used to transform data in templates. They allow you to format data before it is displayed to the user. Pipes can transform data such as dates, numbers, and strings into a more user-friendly format directly within your HTML templates.

Key Points:

• Pipes are used in Angular templates with the pipe symbol (|).

• They are typically used to format or transform data for presentation.

• Pipes can be used for both built-in transformations and custom transformations.

Built-in Angular Pipes

Angular provides several built-in pipes that allow you to transform data directly in your templates. These pipes are built into Angular and can be used without needing to create custom ones. Here’s an overview of some commonly used built-in pipes:

1. DatePipe

Purpose: Formats dates according to a specified format.

Key Features:

• Formats date objects or date strings.

• Allows various format options like shortDate, fullDate, medium, longDate, etc.

Usage Example:

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

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  today = new Date();
}

2. CurrencyPipe

Purpose: Formats numbers as currency.

Key Features:

• Formats numbers with currency symbols and options.

• Allows you to specify currency code, display format (symbol or code), and number of decimal places.

Usage Example:

<p>{{ amount | currency:'USD':'symbol':'1.2-2' }}</p>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  amount = 1234.56;
}

3. DecimalPipe

Purpose: Formats numbers with decimal points.

Key Features:

• Allows specification of minimum and maximum decimal places.

• Formats numbers to display a fixed number of decimal places.

Usage Example:

<p>{{ value | number:'1.1-2' }}</p>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  value = 1234.5678;
}

4. PercentPipe

Purpose: Formats numbers as percentages.

Key Features:

• Converts numbers to percentages and formats them.

• Allows specification of minimum and maximum decimal places.

Usage Example:

<p>{{ value | percent:'1.0-1' }}</p>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  value = 0.1234; // 12.34% when formatted
}

5. UpperCasePipe and LowerCasePipe

Purpose: Transforms text to uppercase or lowercase.

Key Features:

• UpperCasePipe converts all characters to uppercase.

• LowerCasePipe converts all characters to lowercase.

Usage Example:

<p>{{ text | uppercase }}</p>
<p>{{ text | lowercase }}</p>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  text = 'Hello Angular';
}

6. SlicePipe

Purpose: Extracts a portion of a string or array.

Key Features:

• Allows slicing a string or array from a start index to an end index.

Usage Example:

<p>{{ text | slice:0:5 }}</p>
<ul>
  <li *ngFor="let item of items | slice:1:3">{{ item }}</li>
</ul>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  text = 'Angular Pipes';
  items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
}

7. JsonPipe

Purpose: Converts an object to a JSON-formatted string.

Key Features:

• Useful for debugging or displaying complex objects.

Usage Example:

<p>{{ data | json }}</p>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data = { name: 'Angular', version: '15.0' };
}

Summary

• DatePipe: Formats dates.

• CurrencyPipe: Formats numbers as currency.

• DecimalPipe: Formats numbers with decimal places.

• PercentPipe: Formats numbers as percentages.

• UpperCasePipe: Converts text to uppercase.

• LowerCasePipe: Converts text to lowercase.

• SlicePipe: Extracts portions of strings or arrays.

• JsonPipe: Converts objects to JSON strings.

These built-in pipes provide a wide range of functionality to transform and format data for display in Angular applications.

Creating custom pipes in Angular allows you to define your own data transformation logic when built-in pipes do not meet your specific needs. Custom pipes can be used to encapsulate reusable logic that can be applied directly within your Angular templates.

How to Create a Custom Pipe

1. Generate the Pipe

Use Angular CLI to generate a new pipe. This creates a file with the basic boilerplate code.

ng generate pipe customPipeName

For example, if you want to create a pipe that formats phone numbers, you might run:

ng generate pipe phoneNumber

2. Implement the Pipe

After generating the pipe, you will have a file with a class that implements the PipeTransform interface. Here’s how you can implement your custom pipe.

Example: A pipe that formats a phone number.

1. Define The Pipe:

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

@Pipe({
  name: 'phoneNumber'
})
export class PhoneNumberPipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return '';
    // Simple phone number formatting logic
    return value.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
  }
}

Explanation:

• @Pipe decorator: Defines the name of the pipe and its metadata.

• transform method: Contains the logic to transform the input value.

2. Register the Pipe:

Ensure that the pipe is declared in the declarations array of your Angular module.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { PhoneNumberPipe } from './phone-number.pipe'; // Import your pipe

@NgModule({
  declarations: [
    AppComponent,
    PhoneNumberPipe // Declare your pipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Use the Pipe in a Template:

Apply your custom pipe in your HTML template to format data as needed.

<!-- app.component.html -->
<p>{{ phoneNumber | phoneNumber }}</p>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  phoneNumber = '1234567890';
}

Additional Considerations

Pipe Arguments

You can make your custom pipe more versatile by allowing it to accept arguments.

Example: A pipe that formats text based on a given case (upper or lower).

1. Define the Pipe with Arguments:

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

@Pipe({
  name: 'caseFormat'
})
export class CaseFormatPipe implements PipeTransform {
  transform(value: string, caseType: string): string {
    if (!value) return '';
    switch (caseType) {
      case 'upper':
        return value.toUpperCase();
      case 'lower':
        return value.toLowerCase();
      default:
        return value;
    }
  }
}

2. Use the Pipe with Arguments:

<!-- app.component.html -->
<p>{{ text | caseFormat:'upper' }}</p>
<p>{{ text | caseFormat:'lower' }}</p>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  text = 'Angular Pipes';
}

Summary

• Generate Pipe: Use Angular CLI to create the pipe skeleton.

• Implement Pipe: Write the transformation logic in the transform method.

• Register Pipe: Declare the pipe in your module.

• Use Pipe: Apply the pipe in your templates to transform data.

Custom pipes provide flexibility to handle specific data transformation needs that go beyond what built-in pipes offer. They can be tailored to meet the unique requirements of your application.

Reference Link:

Understanding Pipes

What Are Angular Pipes? How Are They Implemented?

Angular Pipes: Complete Guide

Implementing search using custom pipe in angular