fix(cdk/table): support hydration #28356
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
crisbeto
added
P2
crisbeto
requested review from
andrewseguin,
devversion and
josephperrott
as code owners
crisbeto
commented
Jan 3, 2024
| } | ||
|
|
||
| /** Renders the table if its state has changed. */ | ||
| private _render(): void { |
There was a problem hiding this comment.
This is a big diff, but I basically just moved the code from ngAfterContentChecked into a separate method.
crisbeto
force-pushed
the
table-hydration-exploration
branch
from
9b72bb3 to
ed8e3c0
Compare
Reworks the table so that it can support hydration. There were a few issues that broke hydration: 1. There wasn't a catch-all `ng-content` slot which meant that the comment nodes representing the table content were dropped, causing an error. 2. The table needs to conditionally wrap some content with native table sections (`thead`, `tbody` etc.) which was done with direct DOM manipulation. This breaks hydration because Angular won't know about those elements. The first issue is easily resolved by adding an `ng-content` element. It shouldn't affect existing tables, since all the projected content is composed of comment nodes. The second issue is a bit trickier, because we were using content queries to resolve the individual table outlets. Wrapping them in a conditional breaks the query so we have to use something else to resolve them. I've worked around it by using DI which doesn't have the exact same timing, but it appears to be close enough. Fixes angular#28355.
crisbeto
force-pushed
the
table-hydration-exploration
branch
from
ed8e3c0 to
3035d33
Compare
wagnermaciel
approved these changes
Jan 3, 2024
crisbeto
added
action: merge
crisbeto
added a commit
to crisbeto/material2
that referenced
this pull request
Jan 9, 2024
Fixes that after angular#28356 the table rows were measured too early which caused multiple sticky rows not to work as expected.
crisbeto
added a commit
to crisbeto/material2
that referenced
this pull request
Jan 9, 2024
Fixes that after angular#28356 the table rows were measured too early which caused multiple sticky rows not to work as expected.
1 task
crisbeto
added a commit
that referenced
this pull request
Jan 10, 2024
Fixes that after #28356 the table rows were measured too early which caused multiple sticky rows not to work as expected.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Reworks the table so that it can support hydration. There were a few issues that broke hydration:
ng-contentslot which meant that the comment nodes representing the table content were dropped, causing an error.thead,tbodyetc.) which was done with direct DOM manipulation. This breaks hydration because Angular won't know about those elements.The first issue is easily resolved by adding an
ng-contentelement. It shouldn't affect existing tables, since all the projected content is composed of comment nodes.The second issue is a bit trickier, because we were using content queries to resolve the individual table outlets. Wrapping them in a conditional breaks the query so we have to use something else to resolve them. I've worked around it by using DI which doesn't have the exact same timing, but it appears to be close enough.
Fixes #28355.