1
00:00:00,120 --> 00:00:07,140
In this section, we are going to start focusing on transforming content, Angular provides two features

2
00:00:07,140 --> 00:00:09,390
for helping us transform content.

3
00:00:09,660 --> 00:00:11,940
We can use pipes or directives.

4
00:00:12,120 --> 00:00:13,650
We will start with pipes.

5
00:00:13,890 --> 00:00:15,420
They're the simplest to learn.

6
00:00:16,020 --> 00:00:20,070
A pipe is a function for transforming a value in the template.

7
00:00:20,340 --> 00:00:21,720
It's as simple as that.

8
00:00:21,960 --> 00:00:24,450
We pass in a value to a pipe function.

9
00:00:24,780 --> 00:00:27,210
The pipe will return a new value.

10
00:00:27,540 --> 00:00:30,030
This value will be rendered in the templates.

11
00:00:30,270 --> 00:00:34,530
You may be thinking, how is this different from defining a method in a class?

12
00:00:34,980 --> 00:00:37,860
Pipes are not bound to a specific component.

13
00:00:38,160 --> 00:00:41,340
We can define a pipe once, use it everywhere.

14
00:00:41,640 --> 00:00:47,070
If we are creating functions for changing a value in the templates, we should use pipes.

15
00:00:47,340 --> 00:00:50,070
It removes clutter from our component class.

16
00:00:50,370 --> 00:00:54,570
This way, our component can focus on handling other logic.

17
00:00:55,050 --> 00:01:00,240
Another feature worth noting about pipes is that they don't change the original value.

18
00:01:00,570 --> 00:01:04,739
The purpose of a pipe is to transform the value for the templates.

19
00:01:05,099 --> 00:01:08,310
The original value will remain the same in the class.

20
00:01:08,640 --> 00:01:12,390
It can be convenient to use a pipe instead of the alternative.

21
00:01:12,900 --> 00:01:16,740
For example, let's say we are storing the price of a product.

22
00:01:17,010 --> 00:01:20,010
We may want to store this value as a number.

23
00:01:20,280 --> 00:01:26,400
However, we may want to prefix the price with a currency symbol in the templates, even though it's

24
00:01:26,400 --> 00:01:27,360
one character.

25
00:01:27,510 --> 00:01:30,750
We would need to change the property type to a string.

26
00:01:31,170 --> 00:01:34,530
Currency symbols are not supported in the number type.

27
00:01:35,190 --> 00:01:39,570
One solution would be to create two properties to store the price.

28
00:01:39,870 --> 00:01:43,230
However, this duplication can clutter our code.

29
00:01:43,620 --> 00:01:50,070
Instead of storing the same property twice, we can create a pipe for adding the currency symbol in

30
00:01:50,070 --> 00:01:50,820
the template.

31
00:01:51,360 --> 00:01:54,360
The property would remain a number in the class.

32
00:01:54,720 --> 00:02:01,080
Pipes are helpful because they help us change the appearance of a value for the template without changing

33
00:02:01,080 --> 00:02:02,370
the original value.

34
00:02:02,670 --> 00:02:06,030
In the next lecture, let's get started with pipes.