fix(material/tabs): enable hydration

[crisbeto]

Adds a workaround that allows us to enable hydration in the tab group component.

[devversion]

why is this needed? I don't follow and would like to understand more. Why isn't this needed with CSR?

[crisbeto]

The nodes that were projected have to match the nodes that are rendered out or the runtime will throw a hydration error. For the tabs specifically without the ng-content we'll end up dropping the <mat-tab> node and the anchor comment inside of it which are necessary for hydration. This workaround keeps the nodes around during SSR and then drops them once hydration is done.

[devversion]

Ohh, I see what you're saying. I would have expected the mat-tab to be resolved as well and have it's content SSR-ed as well. That seems like a surprising requirement for projection?

[crisbeto]

It is a bit weird, but it's kinda expected. If the mat-tab doesn't get projected, when the HTML makes it to the browser, it won't know that it existed when it was created on the server.

[devversion]

It feels surprising to me that component authors would need to take care of that. It almost sounds like a bug to me that it works in CSR like that (talking about ContentChildren matching without a ng-content`).

The change makes sense, but would love the comment to capture this as well, but no need to re-push. Also cc. @AndrewKushnir as some user-facing feedback on hydration potentially

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}