Repository: angular
Issue: Unexpected supression (or undetected) ExpressionChangedAfterItHasBeenCheckedError 
Labels: area: core,core: change detection,P3

### Which @angular/* package(s) are the source of the bug?

core

### Is this a regression?

No

### Description

During the development, I've bumped into some change detection case that is somewhat non-trivial and I felt like maybe Angular doesn't do enough to properly flag it. I'm not sure if this a bug or not (perhaps not), maybe it should be just an improvement. That said, I'd still like to understand what's going on, because I've wasted a lot of time looking in a completely wrong place.

In the example provided in the link, when you click the button, a new component appears. The (fabricated for this example) purpose was for it to update the two props above (by pushing a new value into an observable that resides within a shared service between child and parent and parent subscribes to it) - but it doesn't happen. When you click it again, you finally see it (next change detection triggered, obviously).

After a long and arduous process, now **I do know** what's wrong here and how to fix it with regards to change detection cycle, child updating parent's DOM in the same change detection macrotask, etc. What I'm not sure about is: **why the error isn't thrown**, when it's clearly a case of a new value being pushed in the same tick after the parent DOM update (which is clearly demonstrated by the values not updating the first time)?

You can easily influence this by pushing two objects in HelloComponent or by pushing just an empty array into observable in parent, instead of initial object. Then, you would (correctly) see the standard ExpressionChangedAfterItHasBeenCheckedError error, as expected.

It's still an overwrite with a new reference to a new array, so how the comparison works here behind the scenes? Why the expression (*ngFor in this case, in parent) is apparently evaluated to "the same value" and thus not throwing an error, even if it obviously contains a new array with another object filled with props with another values? Is it because *ngFor interpolates to a string at this stage (or uses some other simplification, like only checking array length, comparing by shallow value etc.)?

Seems like the error should be thrown here. It might be "working as intended", but that "intended" is confusing without a warning.

### Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-jkshfv?file=src%2Fapp%2Fhello.component.ts

### Please provide the exception or error you saw

```true
It's one of these unusual cases, where I would actually like to see an error, but I don't see it :)
```


### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI: 12.1.0
Node: 14.17.4
Package Manager: npm 8.1.3
OS: darwin x64

Angular: 12.1.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.0
@angular-devkit/build-angular   12.1.0
@angular-devkit/core            12.1.0
@angular-devkit/schematics      12.1.0
@schematics/angular             12.1.0
rxjs                            6.6.3
typescript                      4.3.4
```


### Anything else?

I do realize that this borderlines on a support request, but, again, the intention here is to improve the framework to throw some kind of warning for these cases, as opposed to doing nothing, as it is right now.