1
00:00:03,580 --> 00:00:09,820
Hello, everyone, and welcome back in this lesson, we're going to talk about pure pipes versus imperial

2
00:00:09,820 --> 00:00:15,110
pipes and we're going to discuss how the pipe mechanism relates to change detection.

3
00:00:15,280 --> 00:00:20,150
Let's take, for example, the filter by category pipe that we have just defined here.

4
00:00:20,290 --> 00:00:27,440
So this pipe is going to trigger a change here in the template whenever a new input value gets received.

5
00:00:27,460 --> 00:00:33,490
So if you receive here a new value of the courses array, this is going to get passed on to the pipe

6
00:00:33,700 --> 00:00:40,630
and the pipe is going to report to ANGULAR that the template needs to be rendered because the pipe received

7
00:00:40,630 --> 00:00:42,120
here a new value.

8
00:00:42,130 --> 00:00:48,700
But the problem is updating the template can be an expensive operation and ANGULAR is going to update

9
00:00:48,700 --> 00:00:51,880
the template only if it's absolutely necessary.

10
00:00:52,060 --> 00:00:54,840
Otherwise, the application performance might suffer.

11
00:00:55,090 --> 00:01:00,610
So ANGULAR is only going to apply the template if indeed a new value here gets received.

12
00:01:00,790 --> 00:01:02,290
Let's see what happens, though.

13
00:01:02,290 --> 00:01:06,520
If we update a value here on the courses array directly.

14
00:01:06,520 --> 00:01:13,150
Let's say, for example, that we access here the first course here of the beginner category, which

15
00:01:13,150 --> 00:01:18,630
after reloading the application, we can see that is going to be the case in practice course.

16
00:01:18,640 --> 00:01:24,610
If we open here our data file containing the data that is getting displayed, we're going to see that

17
00:01:24,610 --> 00:01:28,220
this is the second course here in the courses array.

18
00:01:28,240 --> 00:01:34,330
So here, whenever we click here, the added course button, let's modify this course and see if the

19
00:01:34,330 --> 00:01:36,780
template will get updated correctly.

20
00:01:36,820 --> 00:01:40,160
We are going to modify here the implementation of this method.

21
00:01:40,180 --> 00:01:45,400
We are going to clear here any previous implementation that you might have and we are going to access

22
00:01:45,400 --> 00:01:47,160
here the courses array.

23
00:01:47,250 --> 00:01:53,770
We are going to access the second position of the array and we are going to change the category of the

24
00:01:53,770 --> 00:01:56,770
course and we are going to change it to advanced.

25
00:01:56,770 --> 00:02:02,710
For example, let's try this out to see if these will indeed trigger an update of the template.

26
00:02:02,740 --> 00:02:08,949
So if we click here on the edit button, we are going to notice the beginner tag is going to switch

27
00:02:08,949 --> 00:02:09,580
to advanced.

28
00:02:09,580 --> 00:02:10,270
Take a look.

29
00:02:10,300 --> 00:02:13,780
So, as you can see, the advanced tag is now applied.

30
00:02:13,930 --> 00:02:17,920
And these, if you remember, is not the result that we want.

31
00:02:18,010 --> 00:02:23,950
But we would like to do is for the filter by category pipe to be triggered again and for this advanced

32
00:02:23,950 --> 00:02:27,470
course to be removed from the beginning, of course, list.

33
00:02:27,490 --> 00:02:31,910
So the first course of the list should now be this one instead of the R.

34
00:02:32,350 --> 00:02:35,410
S in practice course, which is now marked this advanced.

35
00:02:35,560 --> 00:02:41,590
So what it looks like that it happened here is that the change detection mechanism of angular updated

36
00:02:41,590 --> 00:02:46,630
here, the template, but it did not trigger here again the filter by category pipe.

37
00:02:46,630 --> 00:02:53,480
So we did not get a new list of courses and now our view is inconsistent with our data.

38
00:02:53,740 --> 00:02:57,550
This course should not be here in this list of beginner courses.

39
00:02:57,700 --> 00:03:04,180
Let's confirm that this is indeed being caused because the filter by category pipe is not getting called

40
00:03:04,180 --> 00:03:05,030
a second time.

41
00:03:05,200 --> 00:03:10,630
We are going to switch here to our pipe implementation and let's just add here some logging so that

42
00:03:10,630 --> 00:03:12,310
we can see what is going on.

43
00:03:12,340 --> 00:03:17,530
We are going to log here simply to the console called Transform and we're going to see what we have

44
00:03:17,530 --> 00:03:17,880
here.

45
00:03:17,920 --> 00:03:19,860
We are going to reload the application.

46
00:03:19,870 --> 00:03:25,810
Let's inspect the console and we're going to see that gold transform was called here was as we would

47
00:03:25,810 --> 00:03:26,370
expect.

48
00:03:26,380 --> 00:03:29,470
And so we have here the least of beginner courses.

49
00:03:29,470 --> 00:03:35,490
But now if we clear here the console and we click on the edit course button, which will trigger these

50
00:03:35,500 --> 00:03:42,430
Hendler here on a little course, we are going to see that no logging occurred here and the course was

51
00:03:42,430 --> 00:03:44,860
switched here to the advanced day.

52
00:03:45,100 --> 00:03:50,480
So this confirms that the filter by the pipe was only called once.

53
00:03:50,680 --> 00:03:58,180
This means that mutating the input data of the pipe directly will not cause this type of pipe to be

54
00:03:58,290 --> 00:04:01,360
retriever's on every change detection cycle.

55
00:04:01,480 --> 00:04:03,740
Angular does this as an optimization.

56
00:04:03,760 --> 00:04:09,490
This is because the calculation of a pipe is potentially an expensive operation and angular.

57
00:04:09,490 --> 00:04:13,560
It will perform this operation a minimal number of times.

58
00:04:13,600 --> 00:04:20,880
So what ANGULAR will do by default is to call a pipe only if the input of the pipe changes.

59
00:04:20,890 --> 00:04:28,010
And in this case, in our application component, we did not provide here to the pipe a new course,

60
00:04:28,010 --> 00:04:28,800
this array.

61
00:04:28,810 --> 00:04:32,930
Instead, we have mutated directly the existing array.

62
00:04:32,980 --> 00:04:39,250
So there was no way for the pipe to know that its input has changed and there was no way for Engelhard

63
00:04:39,250 --> 00:04:42,900
to know that the transform function needs to be called again.

64
00:04:43,060 --> 00:04:49,570
This type of pipe that gets called only if the input data changes is called a pure pipe.

65
00:04:49,750 --> 00:04:52,000
Pipes are pure by default.

66
00:04:52,000 --> 00:04:56,180
Most of the pipes that we have covered in this course are all pure.

67
00:04:56,230 --> 00:05:00,340
These are the built-In angular pipes, such as, for example, the pipe used to.

68
00:05:00,550 --> 00:05:07,390
Format a date, and they are made pure in order to prevent the occurrence of performance issues in applications

69
00:05:07,390 --> 00:05:08,350
that use them.

70
00:05:08,510 --> 00:05:14,140
Now, if we would like to make this by pier, the filter by category pipe compatible with this type

71
00:05:14,140 --> 00:05:18,220
of direct data mutation, then we will need to make it impure.

72
00:05:18,460 --> 00:05:23,420
An impure pipe is going to get called in every angular change the election cycle.

73
00:05:23,560 --> 00:05:25,030
Let's see, how can we do that?

74
00:05:25,040 --> 00:05:31,450
We are going to specify here in the pure property that this is a pure pipe by setting this property

75
00:05:31,450 --> 00:05:32,640
to false.

76
00:05:32,650 --> 00:05:37,420
And if we now try this out, we are going to reload the application and notice what happens.

77
00:05:37,420 --> 00:05:43,750
Now, if we click here on edit course, the pipe was called the second time and the filtering occurred

78
00:05:43,750 --> 00:05:45,670
and now they are just in practice.

79
00:05:45,670 --> 00:05:49,140
Korth is no longer here in the least of beginner courses.

80
00:05:49,330 --> 00:05:56,350
Let's inspect here the council so we can see ANGULAR is calling the terms for multiple times once per

81
00:05:56,350 --> 00:05:57,700
each change detection.

82
00:05:57,700 --> 00:06:02,890
Execution, as you can see, is very important that the logic that we implement here in the transfer

83
00:06:02,890 --> 00:06:09,130
method to be very lightweight in order to prevent any performance issues if possible, it's better to

84
00:06:09,130 --> 00:06:15,800
always make our pipes pure and only resort to impure pipes if we absolutely need to.

85
00:06:15,910 --> 00:06:22,270
The problem with impure pipes is that if we do hear some sort of expensive computation that might cause

86
00:06:22,270 --> 00:06:28,050
the whole user experience to degrade as the user interface becomes very slow.

87
00:06:28,300 --> 00:06:31,620
And with this, we have reached the end of the pipe section.

88
00:06:31,660 --> 00:06:34,720
Let's not talk about angular internationalization.

89
00:06:34,720 --> 00:06:38,950
We are going to learn how to build multi-language, angular applications.