Angular errors that kick in my nuts - ExpressionChangedAfterItHasBeenCheckedError

Take notes of some angular errors which kicked good in my nuts

ExpressionChangedAfterItHasBeenCheckedError: "Expression has changed after it was checked"

TL;DR solution: Wrapping anything suspicious in Angular life cycle hook functions, such as ngOnInit(), ngAfterViewInit(), ngOnChanges() ...etc.  with setTimeout()

Happens mostly when...

Something changes in view rendering process, which in turn changes the view-depending data, which in turn changes the view, in the middle of its own rendering process.

This is very confusing I know, but in my view... that's just why the error looks so dangerous, because you can't get about "What a big deal with it?". Try to think it as "Something triggers itself", now it looks a bit more threatening, yeah~? That's how Skynet rose, ok I'm bullshitting but hope you get me.

If Angular allow kind of this operation in its change detections, either its life cycle process being brought into an infinite loop, or not able to determine what value to render because the value won't reach finalised and stable.

There is a good example of how it happen.
And there is a most simple case to reproduce the error.