Angular provides several
built-in pipes that you can use out of the box to transform and format data in your Angular application. Here are some commonly used built-in Angular pipes:
1. DatePipe: Formats a date value according to the specified format.
<p>{{ today | date }}</p>
<p>{{ today | date: 'short' }}</p>
2. UpperCasePipe and LowerCasePipe: Converts a string to uppercase or lowercase.
<p>{{ 'Hello World' | uppercase }}</p>
<p>{{ 'Hello World' | lowercase }}</p>
3. DecimalPipe: Formats a number as a decimal according to the specified precision.
<p>{{ 3.14159 | number: '1.2-3' }}</p>
4. CurrencyPipe: Formats a number as a currency according to the specified currency code.
<p>{{ 1000 | currency: 'USD' }}</p>
5. PercentPipe: Formats a number as a percentage.
<p>{{ 0.75 | percent }}</p>
6. SlicePipe: Returns a portion of a string or array.
<p>{{ 'Hello World' | slice: 0:5 }}</p>
<p>{{ [1, 2, 3, 4, 5] | slice: 0:3 }}</p>
7. AsyncPipe: Handles asynchronous values by subscribing to an observable or promise and updates the view automatically when the value changes.
<p>{{ asyncData$ | async }}</p>
These are just a few examples of the
built-in Angular pipes. Angular provides more pipes, such as `KeyValuePipe`, `JsonPipe`, `PercentPipe`, and more, each serving specific purposes. You can also create your own custom pipes as explained in the previous response.