AppComponent
and AppComponent_ChangeDetector
.AppComponent
and the MovieComponent
, we will have only one instance of the AppComponent_ChangeDetector
and the MovieComponent_ChangeDetector
.AppComponent_ChangeDetector
class might look.AppComponent
we reference three variables (slogan
, title
and actor
), our change detector will have three properties to store the "old" values of these three properties, plus a reference to the AppComponent
instance that it's supposed to "watch". When the change detection process wants to know if our AppComponent
instance has changed, it will run the method detectChanges
passing the current model values to compare with the old ones. If a change was detected, the component gets updated.Disclaimer: This is just a conceptual overview of how change detector classes work; the actual implementation may be different.
changeDetection
of the @Component
decorator.Default
strategy.actor.firstName
and actor.lastName
are updated.AppComponent
, and checks if any of the model properties bound to its template have changed, comparing the old value of each property (before the event was triggered) to the new one (after the models were updated). The AppComponent
template has a reference to three properties, slogan
, title
and actor
, so the comparison made by its corresponding change detector will look like:slogan !== previousSlogan
? No, it's the same.title !== previousTitle
? No, it's the same.actor !== previousActor
? No, it's the same.actor
object, we are always working with the same instance. Because we are doing a shallow comparison, the result of asking if actor !== previousActor
will always be false
even when its internal property values have indeed changed. Even though the change detector was unable to find any change, the default strategy for the change detection is to traverse all the components of the tree even if they do not seem to have been modified.MovieComponent
's template doing a similar comparison:title !== previousTitle
? No, it's the same.actorFirstName !== previousActorFirstName
? Yes, it has changed.actorLastName !== previousActorLastName
? Yes, it has changed.<app-movie>
inside our AppComponent
's template, we have multiple references?actor !== previousActor
?false
. Because of this, change detection is going to have to check every child component to see if any of the properties of that object (firstName
or lastName
) have changed.MovieComponent
depends only on its inputs and that these inputs are immutable? In short, we are trying to guarantee that when we change any of the properties of the actor
object, we end up with a different Actor
instance so the comparison actor !== previousActor
will always return true
. On the other hand, if we did not change any property, we are not going to create a new instance, so the same comparison is going to return false
.MovieComponent
has this result:title !== previousTitle
? No, it's the same.actor !== previousActor
? No, it's the same.