Hello, everyone, and welcome back in this lesson, we're going to talk about pure pipes versus imperial
pipes and we're going to discuss how the pipe mechanism relates to change detection.
Let's take, for example, the filter by category pipe that we have just defined here.
So this pipe is going to trigger a change here in the template whenever a new input value gets received.
So if you receive here a new value of the courses array, this is going to get passed on to the pipe
and the pipe is going to report to ANGULAR that the template needs to be rendered because the pipe received
here a new value.
But the problem is updating the template can be an expensive operation and ANGULAR is going to update
the template only if it's absolutely necessary.
Otherwise, the application performance might suffer.
So ANGULAR is only going to apply the template if indeed a new value here gets received.
Let's see what happens, though.
If we update a value here on the courses array directly.
Let's say, for example, that we access here the first course here of the beginner category, which
after reloading the application, we can see that is going to be the case in practice course.
If we open here our data file containing the data that is getting displayed, we're going to see that
this is the second course here in the courses array.
So here, whenever we click here, the added course button, let's modify this course and see if the
template will get updated correctly.
We are going to modify here the implementation of this method.
We are going to clear here any previous implementation that you might have and we are going to access
here the courses array.
We are going to access the second position of the array and we are going to change the category of the
course and we are going to change it to advanced.
For example, let's try this out to see if these will indeed trigger an update of the template.
So if we click here on the edit button, we are going to notice the beginner tag is going to switch
to advanced.
Take a look.
So, as you can see, the advanced tag is now applied.
And these, if you remember, is not the result that we want.
But we would like to do is for the filter by category pipe to be triggered again and for this advanced
course to be removed from the beginning, of course, list.
So the first course of the list should now be this one instead of the R.
S in practice course, which is now marked this advanced.
So what it looks like that it happened here is that the change detection mechanism of angular updated
here, the template, but it did not trigger here again the filter by category pipe.
So we did not get a new list of courses and now our view is inconsistent with our data.
This course should not be here in this list of beginner courses.
Let's confirm that this is indeed being caused because the filter by category pipe is not getting called
a second time.
We are going to switch here to our pipe implementation and let's just add here some logging so that
we can see what is going on.
We are going to log here simply to the console called Transform and we're going to see what we have
here.
We are going to reload the application.
Let's inspect the console and we're going to see that gold transform was called here was as we would
expect.
And so we have here the least of beginner courses.
But now if we clear here the console and we click on the edit course button, which will trigger these
Hendler here on a little course, we are going to see that no logging occurred here and the course was
switched here to the advanced day.
So this confirms that the filter by the pipe was only called once.
This means that mutating the input data of the pipe directly will not cause this type of pipe to be
retriever's on every change detection cycle.
Angular does this as an optimization.
This is because the calculation of a pipe is potentially an expensive operation and angular.
It will perform this operation a minimal number of times.
So what ANGULAR will do by default is to call a pipe only if the input of the pipe changes.
And in this case, in our application component, we did not provide here to the pipe a new course,
this array.
Instead, we have mutated directly the existing array.
So there was no way for the pipe to know that its input has changed and there was no way for Engelhard
to know that the transform function needs to be called again.
This type of pipe that gets called only if the input data changes is called a pure pipe.
Pipes are pure by default.
Most of the pipes that we have covered in this course are all pure.
These are the built-In angular pipes, such as, for example, the pipe used to.
Format a date, and they are made pure in order to prevent the occurrence of performance issues in applications
that use them.
Now, if we would like to make this by pier, the filter by category pipe compatible with this type
of direct data mutation, then we will need to make it impure.
An impure pipe is going to get called in every angular change the election cycle.
Let's see, how can we do that?
We are going to specify here in the pure property that this is a pure pipe by setting this property
to false.
And if we now try this out, we are going to reload the application and notice what happens.
Now, if we click here on edit course, the pipe was called the second time and the filtering occurred
and now they are just in practice.
Korth is no longer here in the least of beginner courses.
Let's inspect here the council so we can see ANGULAR is calling the terms for multiple times once per
each change detection.
Execution, as you can see, is very important that the logic that we implement here in the transfer
method to be very lightweight in order to prevent any performance issues if possible, it's better to
always make our pipes pure and only resort to impure pipes if we absolutely need to.
The problem with impure pipes is that if we do hear some sort of expensive computation that might cause
the whole user experience to degrade as the user interface becomes very slow.
And with this, we have reached the end of the pipe section.
Let's not talk about angular internationalization.
We are going to learn how to build multi-language, angular applications.