Hello, everyone, and welcome back.
In this new section of the course, we're going to talk about the angular change detection mechanism.
We are going to cover the standard angles to change the detection mechanism, which is on by default
and that we have been using implicitly so far.
And we will also cover on Pushtuns detection and even custom change detection.
Let's start with standard change detection, which is active by default.
Let's talk about what is exactly change detection.
Let's first prepare here our playground.
We are going to head over here to our template and we're going to remove the highlighted directive as
we won't be needing it here in this example.
And also here at this example, we had a loading here, some data from the back end.
We are going to come back to that later on in this section.
But right now, let's head over here to our application component and let's replace the data that we
are getting from the backend, from these hardcoded value courses that we have here available in this
file, the data we can remove here, this console log, and we can remove here the lowering of the data
from the back end.
If we try this out, we are going to see that now.
We have here a list of courses that we are iterating through.
But this time around, the data is coming here from this file and not from the back end.
Let's also take a moment to remove here this provider's declaration as we won't be needing it.
Our curtseys service is being injected via a tree shaquill injector.
So we won't be needing here another provider.
Now that we have this in place, let's talk about standard change detection.
Change detection is the built in angular mechanism that ANGULAR provides us out of the box in a transparent
way that automatically rebuilds the view whenever the model gets changed.
Let's give here a quick example.
Let's switch over here to the Coast Guard component.
This Kosaka component has here an added title field where we had everything here, the course description.
Let's say that now we would like to implement the following functionality.
We would like to update automatically here the title of the course as we are typing here on our edit
title book.
So we don't want to necessarily save it to the backend immediately, but we want the UI to immediately
reflect the new value that we are typing here.
So in order to do that, we will have over here to our input field and we will have here an event handler.
We are going to detect the key event.
Then we're going to call here an event handler.
We are going to call it on title changed and to these new event handler that we are about.
Right.
We are going to pass in the value of the new title that we are typing here.
So we are going to access here our e-mail input using this template reference, and we are going to
access the value property.
So this expression here is going to give us at any moment in time the latest value type in our input
works.
Notice that if it would be the key down event, we would not get the latest value because it's the Kiip
event.
We are sure that we have here the latest value typed by the user.
Now let's implement this event handler in the following way.
We are going to head over to the Coast Guard component and we are going to create here a new method
on title changed and we are going to have here a property new title.
Are we going to define it as being of type string?
What we're going to do here is we are going to access the course object that we receive this input directly
and we're going to mutate this object directly.
So we are going to assign here to the description of the course the new title value.
Let's try this out to see how these works with this new version of our program.
If we now start typing here and we modify this value to, for example, angular core course, we are
going to see that indeed as we type, the latest value that we get here in our input box is getting
immediately reflected here in the title.
So how does this work?
This is the angular change detection mechanism in action.
So the question now is what is going on here and how does this work?
Exactly?
The way that this works is that Angular is going to try to update the view and reflect the latest changes
to the model in this case, the course in the most optimal way.
What happens here is that after each event that is getting handled by Angular in this case, for example,
the Kiip event or the button click event in the case of this component, ANGULAR is going to go over
all the expressions of the template that it has analyzed whenever the template was first compiled.
And Angular is going to see if, for example, the course description is changed or if the kind of index
is changed or even if this other value here, which is also, of course, description changed or even
if the course category is changed.
So ANGULAR is going to go over all the inputs of the template that can be found here via this input.
Expression's and Angouleme is then going to decide if something has changed from last time, if any
of the values of these expressions have changed since less time than Angela knows, that the view needs
to be updated.
So what Engler will do with Angular will update the part of the view that has changed accordingly.
On the other hand, if none of these template expressions have changed since the last time that we evaluated
them, then Angela knows that the component view does not need to be updated.
So angular in these defaults change detection mode because we can mutate objects directly, such as
we have done here with our coarse object.
We've added here a new title by modifying the value here on the array instead of creating a new object,
because this can happen because old JavaScript objects by default are mutable.
We can change any property without replacing the object.
Angular will have to go through all the components of the application, including here.
The course component is going to check for each component, the value of each expression, and compare
to the values of the same expressions before the event took place.
So these, in summary, is how default change detection works.
Angular is going to scan through the whole componentry.
It's going to check for each component if the expressions have changed and if so, it's going to update
the component.
ANGULAR is going to do this complete check of the whole componentry after each event, such as, for
example, the click event or the Kirp event.
Angular will also perform a shake in case if a custom event such as, for example, the course change,
the event gets imitative.
The check for changes in the component template expressions will also be made in response to certain
events such as, for example, and Ajax or Request Angular will also trigger this check in response
to, for example, a set timeout or a set interval event.
Instead of knowing by heart all the situations when the change detection mechanism will be triggered.
It's better to understand this in the following way.
Angular is trying to display data from mutable JavaScript objects on the screen.
If anything happens at the browser, such as one example, a native dom click event, a timeout, etc.,
and that asynchronous event can potentially modify the data.
The only way that ANGULAR has to be sure that the view always correctly reflects the data is to run
all these checks again and the components whenever necessary.
The default mechanism that ANGULAR uses to handle change detection, which is based on the values of
template input expressions, is very safe and reliable.
This way, Angular can be sure that the view is always correct and it correctly reflects the latest
data.
But there is a slight downside to it, which is that checking all the expressions of all the componentry
every time that there is an event in our application might be a bit expensive in terms of performance
for larger applications.
Notice, however, that the vast majority of applications will never run into performance problems using
the default standard change detection mechanism.
So I would recommend for you to use this default change detection mechanism, which is already active
out of the box.
And in the vast majority of situations it just works and it transparently keeps the view in sync with
the data.
However, in certain situations where you need to do a performance optimization, you can also use the
ANGULAR on push change detection mechanism.
We are going to learn how on push change detection works in the next lesson.