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

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()

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