docs-bug(component examples): examples for docs/StackBlitz lack `Eager` CD strategy and Zone.js CD provider

[michael-small]

Documentation Feedback

Problem

Documentation examples need Eager change detection and the StackBlitz template needs to provide Zone.js change detection.

Background

I found two related issues when trying to figure out why the "Table retrieving data through HTTP" example was not rendering data and not quitting it's loading spinner:

I gave more detailed notes on this trial and error explanation on Reddit, when someone said they had issues with tables not rendering data: reddit.com/r/angular/comments/1udhis7/comment/othat1k

Proposed Immediate Solution

edit: see my first comment about how I made one PR for zone and another PR for converting one component type to Eager. As well as a temp branch for this issue's reference of both approaches combined on the Table HTTP example.

Most if not all documentation examples I have seen relied on what is now Eager change detection, and on Zone.js. But any examples I have seen were not opted into Eager CD strategy and the StackBlitz starter does not provide provideZoneChangeDetection(). Edit: I admit I was a bit harsh with this broad generalization as I am going through more history while making things compatible. But I still maintain that there is enough exceptions that I am still going through everything 1 by 1 making things compatible, and I thought me opening with updating everything needed was a bit much. Plenty already were built with zoneless/OnPush or had recent updates, but there is enough exceptions to this.

Without fundamentally making all docs examples zoneless and default OnPush ready, two things need to happen

• provideZoneChangeDetection() needs to be provided in the StackBlitz template
• Example files all need changeDetection: ChangeDetectionStrategy.Eager

And if possible, backport this to v21 docs

Proposed Long Term Solution

Convert documentation examples going forward into the new default change detection and zoneless defaults, dropping the providing of Eager and Zone.

---

Links

• Live doc pages
  • Current v22 https://material.angular.dev/components/table/examples#table-http
    • Neither the docs nor the StackBlitz render the data, as both eager/zone are missing
  • v21 docs which resolves to 21.1.0 in the StackBlitz https://v21.material.angular.dev/components/table/examples#table-http
    • The documentation embed works because the docs itself provides zone, but the StackBlitz does not. While change detection was still the old default of eager, zoneless was the default by then, and the StackBlitz stater lacks a specific zone provider.
    • Notice the issue: RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError in the StackBlitz.
  • v20 https://v20.material.angular.dev/components/table/examples#table-http
    • Both the docs and StackBlitz work because v20 predates the defaults for zoneless and OnPush
• Current doc example StackBlitz must be opened from the above v22 doc button to open the StackBlitz window
• Fixed doc example StackBlitz with Eager + Zone.js: https://stackblitz.com/edit/upsjm4jr?file=src%2Fexample%2Ftable-http-example.ts

Affected documentation page

https://material.angular.dev/components/categories

[msmallest]

I opened a PR for providing zone and another PR for adding Eager to Autocomplete examples. I will refrain from more PRs until I get approval, or given whatever strategy would make most sense.

Additionally, here is a branch where I combined the branch for providing zone with a oneoff addition of Eager to my table http example: main...msmallest:components:temp-example-of-zone-and-eager-combined-for-issue

[michael-small]

Ongoing notes going down the line checking off components if all their examples are zoneless+OnPush defaults ready, whether already or with a StackBlitz fork I make. As of posting this comment, I am just doing components fewest and easiest examples. Plenty are just fine as-is, but it is the more featured components with state that concern me. Something like the tables page or a form element are going to be the most interesting.

https://gist.github.com/michael-small/3b04460a8e9bcb114cf0aeb05f447b91