Using Inbuilt Pipes, Custom Pipes, Custom Directives, and Observables

Angular Pipes

Pipes were initially referred to as a filter in Angular 1. They are used mainly for data transformation in HTML templates. The purpose of this feature is to reduce the complexity of tasks such as streaming data over a WebSocket, which involves getting data, transforming it, and then displaying it to users. Input data is converted into a desired output through the use of pipes.

For example, if we need a currency output of USD 1,000,000 and we have 1000000 as the data variable, then how do we achieve our output using the inbuilt pipe for currency in Angular?

We can achieve this by using a pipe with the | (pipe character) syntax in the template, as shown in the following snippet:

{{ 1000000 | currency : 'USD' }}

From the preceding code, we can see that the number 1000000 is converted into a currency string to be displayed in the template. The output is USD 1,000,000.

The output is fine-tuned by providing an optional...