In this section, we are going to start focusing on transforming content, Angular provides two features
for helping us transform content.
We can use pipes or directives.
We will start with pipes.
They're the simplest to learn.
A pipe is a function for transforming a value in the template.
It's as simple as that.
We pass in a value to a pipe function.
The pipe will return a new value.
This value will be rendered in the templates.
You may be thinking, how is this different from defining a method in a class?
Pipes are not bound to a specific component.
We can define a pipe once, use it everywhere.
If we are creating functions for changing a value in the templates, we should use pipes.
It removes clutter from our component class.
This way, our component can focus on handling other logic.
Another feature worth noting about pipes is that they don't change the original value.
The purpose of a pipe is to transform the value for the templates.
The original value will remain the same in the class.
It can be convenient to use a pipe instead of the alternative.
For example, let's say we are storing the price of a product.
We may want to store this value as a number.
However, we may want to prefix the price with a currency symbol in the templates, even though it's
one character.
We would need to change the property type to a string.
Currency symbols are not supported in the number type.
One solution would be to create two properties to store the price.
However, this duplication can clutter our code.
Instead of storing the same property twice, we can create a pipe for adding the currency symbol in
the template.
The property would remain a number in the class.
Pipes are helpful because they help us change the appearance of a value for the template without changing
the original value.
In the next lecture, let's get started with pipes.