angular/table-tbody

Why

When the server sends <table><tr>, the browser's parser adds a <tbody> the template does not know about. During hydration Angular finds a different DOM than it rendered and reports a mismatch; the component is then rendered again on the client, which costs time and can flash or shift the table.

Fix

Wrap rows in <tbody> (and header rows in <thead>) in the template itself. It is valid HTML either way and also keeps the table structure clear for assistive technology.

Examples

<!-- bad -->
<table>
  @for (order of orders(); track order.id) { <tr><td>{{ order.number }}</td></tr> }
</table>
<!-- good -->
<table>
  <tbody>
    @for (order of orders(); track order.id) { <tr><td>{{ order.number }}</td></tr> }
  </tbody>
</table>

Sources

• Angular, Hydration (valid HTML structure)

Read it in the terminal

npx github:dawidolko/frontend-skills explain angular/table-tbody