**Course Title:** Mastering Angular: Building Scalable Web Applications **Section Title:** Pipes and Observables **Topic:** Using built-in pipes and creating custom pipes. **Introduction:** In Angular, pipes are a powerful feature that allows you to transform and format data in your templates. They are a key component of the Angular framework and play a crucial role in making your applications more efficient, scalable, and maintainable. In this topic, we will explore the built-in pipes provided by Angular and learn how to create custom pipes to meet our specific requirements. **Built-in Pipes:** Angular provides a set of built-in pipes that can be used to perform common data transformations, such as formatting dates, converting strings to uppercase or lowercase, and performing mathematical operations. Some of the most commonly used built-in pipes include: * **DatePipe:** Formats dates according to a given format. * **UpperCasePipe:** Converts a string to uppercase. * **LowerCasePipe:** Converts a string to lowercase. * **CurrencyPipe:** Formats a number as a currency. * **NumberPipe:** Formats a number according to a given format. * **PercentPipe:** Formats a number as a percentage. * **SlicePipe:** Extracts a subset of elements from an array. Here is an example of how you can use the built-in pipes in your templates: ```html <!-- Using the DatePipe to format a date --> <p>Today's date is {{ today | date }}</p> <!-- Using the UpperCasePipe to convert a string to uppercase --> <p>{{ 'hello world' | uppercase }}</p> <!-- Using the CurrencyPipe to format a number as a currency --> <p>The price is {{ 100 | currency }}</p> ``` **Creating Custom Pipes:** While the built-in pipes provided by Angular cover many common use cases, there may be situations where you need to perform a custom data transformation that is not supported by the built-in pipes. In such cases, you can create your own custom pipes. To create a custom pipe, you need to create a new class that implements the `PipeTransform` interface and decorate it with the `@Pipe` decorator. Here is an example of a simple custom pipe that converts a string to uppercase: ```typescript import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'customUppercase' }) export class CustomUppercasePipe implements PipeTransform { transform(value: string): string { return value.toUpperCase(); } } ``` You can then use this custom pipe in your templates just like the built-in pipes: ```html <p>{{ 'hello world' | customUppercase }}</p> ``` **Best Practices for Creating Custom Pipes:** * Use a meaningful and descriptive name for your custom pipe. * Keep your custom pipe simple and focused on a single transformation. * Test your custom pipe thoroughly to ensure it works correctly. * Use the `@Pipe` decorator to register your custom pipe with Angular. **Pure and Impure Pipes:** Angular distinguishes between two types of pipes: pure and impure pipes. * **Pure Pipes:** These are pipes that always return the same output given the same input and are only executed when the input changes. Pure pipes are more efficient and should be used whenever possible. * **Impure Pipes:** These are pipes that may return different outputs given the same input and are executed every time the template is updated. Impure pipes are less efficient and should be used only when necessary. To make a pipe pure or impure, you can use the `pure` property of the `@Pipe` decorator. Here is an example of a pure pipe: ```typescript import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'customUppercase', pure: true }) export class CustomUppercasePipe implements PipeTransform { transform(value: string): string { return value.toUpperCase(); } } ``` **Conclusion:** In this topic, we explored the built-in pipes provided by Angular and learned how to create custom pipes to meet our specific requirements. We also covered the best practices for creating custom pipes and the difference between pure and impure pipes. By mastering pipes, you can write more efficient and scalable Angular applications. **What's Next:** In the next topic, we will explore the world of observables and the RxJS library. **Do you have any questions about pipes or want help with creating a custom pipe? Leave a comment below.** **Recommended Reading:** * Angular Pipes Documentation: <https://angular.io/guide/pipes> * Custom Pipes in Angular: <https://angular.io/guide/pipes#custom-pipes> * RxJS Library Documentation: <https://rxjs-dev.firebaseapp.com/> **External Links:** * Angular Official Website: <https://angular.io/> * RxJS Official Website: <https://rxjs-dev.firebaseapp.com/>