Hello, everyone, and welcome back.
In this lesson, we're going to talk about system change detection, as we have seen before, and Google
provides us with two mechanisms that work out of the box.
We have the default angular change detection mode and we have also on Pushkin's detection that we have
covered in previous lessons.
As we have seen these two modes of change detection work in a very different way.
The default change detection mechanism is going to base itself on the values of the expressions in the
template.
It's going to compare the current value with the previous value to see if a change occurred.
If that's the case, then the component gets marked for rendering.
On the other hand, with on push, we are pushing the data explicitly to the template.
So we are pushing the data either via input properties or via the async pipe into the component.
The component will know then that it needs to shake if some new data is available and decide if the
view should be rendered.
In both cases, if an event occurs because an event can implicitly modify the data in both situations,
we are going to be checking the component to see if it needs to be rendered.
These to change detection models will cover the vast majority of various cases.
But there could be some particular situation where you need to inform Angular manually that change detection
should be executed for a given component that is possible.
Also, let's give here a concrete example where that might come in handy.
Let's switch here to our application component and let's leave it running here using on push change
detection.
Now, what we are going to do is we are going to switch here to our template and we are going to again
remove here the use of the async pipe.
So instead of providing an observable to the template unsubscribing to it using the async pipe, let's
just define here.
A course is synchronous member variable.
So this will be an array of courses.
Now, instead of assigning here to these observable variable, we are going to call the back and we're
going to subscribe to these observable.
We are going to take the courses that we get from the backend and we are going to assign it here to
the courses member variable.
And notice that because we are using here on push change detection, if we try this out, we are going
to see that there is no data on the screen.
And this is because there is no way for this component to know that it needs to be rendered.
We did not pass the data via a pipe to the template and we did not provide the data via a component
input either.
So there is really here no way for this component to know that it needs to be rendered.
However, if we would like to manually inform Angular that whenever some data arrives here from the
backend, that in that case we would like to mark the component for a change detection check, then
in that case we can do so using the component change detector.
So every component in ANGULAR has its own change detector that can be injected using the change the
ref angular injectable.
So this is the change detector of this particular application component and every component has its
own change detector.
So the change detector of our application component is going to be different than the change detector
here that we could inject also in the course Kerith components.
Let's then see how can we use the change detector ref to manually inform Angular that it needs to check
these components.
So we are going to check the API available in our change detector.
We have here several functions and if we scroll down the list, we are going to find this function mark
for shick.
So these will inform Angular that this component should be checked for changes.
Now, if we tried this out, we are going to see that this time around.
Indeed, the data is getting correctly reflected on the screen.