Activity 13: Research Angular Pipes

An Angular Pipe is used to change data inside templates. Before data is displayed in the view, pipes take in data as input and convert it into the required output format. They can be used, for instance, to apply custom transformations or format strings, dates, and currencies. With the help of these Angular pipes, you can easily and declaratively format and transform data inside of your HTML templates, enhancing code readability and user experience without changing the data itself.

Here is how pipes used to transform data in templates:
- Date Pipe: Format dates (e.g., {{ today | date:'fullDate' }}).

If today = new Date(), the result might look like this:

Currency Pipe: Format numbers as currencies (e.g., {{ amount | currency:'USD' }}).

If price = 1500, it will output:
Uppercase Pipe: Convert text to uppercase (e.g., {{ name | uppercase }}).

If name = 'Angular Pipes', the result will be:

Number Pipe: Formats numbers with decimals, group separators, or a specific number of decimal places.

If value = 1234.56789, the result will be:

If percentage = 0.2567, the result will be:

Custom Pipes: Custom pipe in Angular is useful when the built-in pipes (like date, number, currency, etc.) don’t meet specific formatting or transformation needs. Custom pipes allow you to define your own transformation logic that can be applied to data in your templates.

Generate the Pipe: Use the Angular CLI command, or construct a pipe class manually. This will update the app module to declare the pipe and generate a pipe class file.
Implement the Pipe Logic: Describe the pipe class's transformation logic. The transform() method, where the actual transformation logic is written, is necessary for pipes to implement the PipeTransform interface.
Use the Pipe in the Template: Once the pipe is created and registered in your module, you can apply it in your templates like any other built-in pipe.

In order to implement unique data transformations, you can also design your own pipelines. For example, reversing a string using a pipe.

Example:

Using Angular CLI (This creates a file reverse-string.pipe.ts with a basic structure.)

In the reverse-string.pipe.ts, implement the logic to reverse a string:

If it’s not already added, make sure to register the pipe in your module (app.module.ts):

Now, you can use the custom pipe in your component's template just like a built-in pipe:

Output: (reversed)

if you want further reading and understanding, you can visit all these sites.

Agarwal, A. (2023, April 19). Introduction to pipes in Angular. Ayush Agarwal Blogs. https://blogs.ayushdev.com/getting-started-with-pipes-in-angular-a-beginners-guide

GeeksforGeeks. (2024, August 20). Pipes in angular. GeeksforGeeks. https://www.geeksforgeeks.org/pipes-in-angular/