Angular Pipes

Pipes are functions that are used in your UI to transform your data in a simple way. You have the option to create your own pipes to your desired output, and Angular has already built in pipes that you can use.

DatePipe - Formates a date value

UpperCasePipe - Transforms text to uppercase

LowerCasePipe - Transforms text to lowercase

CurrencyPipe - Transform a number to a currency value

PercentPipe - Transforms a number to the percentage string.

DecimalPipe - transforms into a decimal point string

You create your pipes by using the "@Pipe" decorator in your typescript class, your typescript class implements the "PipeTransform" interface to create your transform methods.

You use your pipes, or build-in pipes by using the "|" with your binding variable in your HTML template

<p>{{ 'Your Text Here' | uppercase }}</p>

Pure Pipes

By default when using pipes, they are pure pipes by default. A pure pipe is only called when angular detects changes in a values or parameters to a pipe.

is only called when angular detects change in the value or the parameters passed to a pipe. it only executes only when a Pure change to the input is detected. They are only execute when property has changed. if a objects property has changed, the pipe will no execute because the object reference is still the same. It executed only when the component is loaded

Inpure Pipe

It detects inpure changes. It detects change to composite objects. when adding an element to an existing array, or making changes to objects, that impure pipe will detect those changes to that object. it detects any change. it executes every change with in the component.

The transform method only calls when the angular change detection cycle runs, whether the input data changes.