Migrating from Tangram Tabs

This page documents what's different if you're adopting tg2-tabs on a new page. If the page still uses the old Tangram design, set theme="tg-light" so the tabs match the surrounding styles.

Structure

tg2-tab replaces the tg-tab / tg-tab-heading / tg-tab-content triple with a single element — label is now an input rather than separately projected heading content.

<!-- Before: three elements per tab -->
<tg-tabs [(selected)]="selectedIndex">
    <tg-tab>
        <tg-tab-heading>Details</tg-tab-heading>
        <tg-tab-content>Panel content</tg-tab-content>
    </tg-tab>
</tg-tabs>

<!-- After: one element per tab, content projected directly -->
<tg2-tabs [(selected)]="selectedIndex">
    <tg2-tab label="Details">Panel content</tg2-tab>
</tg2-tabs>

Server-rendered panel content

tg-tabs only ever instantiates the active tab's pane, so inactive panes never reach server-rendered HTML. tg2-tabs renders every pane eagerly, so the content of every tab is in the server response and indexable, and any workaround a page carries to expose inactive content to crawlers can be removed once it migrates.

<!-- Before: only the active pane ever reaches server-rendered HTML -->
<!-- After: every pane renders eagerly and is indexable, hidden behind [inert] when inactive -->