Activity 12 Research Angular Pipes

1. Research the Definition of Angular Pipes:

What is Angular pipes

Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once.

2. The followings are the types of built-in pipes:

• Date pipe: Formats a date value according to locale rules.

• Uppercase pipe: Transforms text to all upper case.

• Lowercase pipe: Transforms text to all lower case.

• Currency pipe Transforms a number to a currency string, formatted according to locale rules.

• Decimal pipe: Transforms a number into a string with a decimal point, formatted according to locale rules.

• Percent pipe: Transforms a number to a percentage string, formatted according to locale rules.

• Asynch pipe: Subscribe and unsubscribe to an asynchronous source such as an observable.

• Json pipe: Display a component object property to the screen as JSON for debugging.

3. Use Cases of Angular Pipes:

The date pipe comes with many options to format dates. We can use various characters and put them in a string to format date values.

The list of format characters we can use includes.

• Era

• Year

• Week of month

• week of year

• day of a month

• weekday

• period

• locale specific period name

• Hour 1-12

• Hour 0-23

• Minute

• second

• fractional second

• Time zone

{{ currentDate | date : "EEEE YYYY-MM-dd hh:mm:ss.SSS OOOO" }}

4. Search for Code Snippets:

   In creating a custom pipes by implementing a TypeScript class with the @Pipe decorator. A pipe must have two things:

   • A name, specified in the pipe decorator

   • A method named transform that performs the value transformation.

Here is an example of a custom pipe that transforms strings to kebab case:

    // kebab-case.pipe.ts
    import { Pipe, PipeTransform } from '@angular/core';
    @Pipe({  name: 'kebabCase', 
     standalone: true,})
    export class KebabCasePipe implements PipeTransform {
      transform(value: string): string {
        return value.toLowerCase().replace(/ /g, '-');
      }
    }

For references :

https://angular.dev/guide/templates/pipes

https://www.telerik.com/blogs/angular-basics-date-pipe-formats-101-examples