In Angular hydration, what does the ngSkipHydration attribute do, where may you place it, and what does using it cost?

## What ngSkipHydration does `ngSkipHydration` is a special attribute that tells Angular's hydration to **leave one component subtree out**. On the client, that component and all of its children behave as if hydration were not enabled: the server-rendered DOM for that subtree is removed and the component renders itself again from scratch. The rest of the page still hydrates normally. It is meant for components that break hydration, typically because they (or a library they wrap) change the DOM with native APIs, and that cannot be fixed yet. ## Where it can go There are exactly two supported ways to put it on a **component host element**: ```html <app-chart ngSkipHydration /> ``` ```ts @Component({ selector: 'app-chart', template: `<div #canvas></div>`, host: { ngSkipHydration: 'true' }, }) export class Chart {} ``` Placement rules: - Only component host nodes qualify. On a plain element such as `<div ngSkipHydration>`, or through a directive's `host` metadata on a non-component element, Angular throws **NG0504**. - It is read as a **static attribute**, and only its name is checked. `ngSkipHydration="false"` still skips hydration; to stop skipping, remove the attribute. - Putting it on the root component effectively disables hydration for the whole application. ## What it costs | Aspect | Hydrated component | Component with `ngSkipHydration` | | --- | --- | --- | | Server HTML | Rendered and kept | Rendered, then replaced on the client | | Client work | Match and reuse DOM | Destroy and re-create DOM | | Visual effect | Stable | Possible flicker or layout shift in that area | | Mismatch errors inside it | Reported | Avoided, because nothing is matched | So the attribute trades hydration's benefits, in that one subtree, for correctness. A skipped subtree near the top of the page, or one that wraps most of the content, gives back most of what hydration was bought for. ## When to reach for it 1. **First, fix the component.** Replace native DOM calls with template constructs, or move DOM work that only makes sense in the browser until after rendering. 2. **If a third-party library needs to own its DOM**, and you cannot change it, wrap it in a small component and put `ngSkipHydration` on that wrapper only. 3. **Track it as debt.** Each attribute marks a component that does not hydrate; list them so they are removed once the underlying code is fixed. ## A worked example A dashboard embeds a charting library that builds its own SVG inside the component. Hydration fails with NG0500 inside the chart. The team: 1. confirms in development mode that the error points at the chart component; 2. wraps the library in a small `Chart` component whose template holds only the mount point; 3. adds `host: { ngSkipHydration: 'true' }` to that wrapper, not to the dashboard; 4. files a follow-up to render the chart after hydration or replace the library. The dashboard's headings, filters and tables still hydrate; only the chart area is rebuilt on the client. ## Common misunderstandings - It does **not** stop the component from rendering on the server; the server output is still produced and then replaced. - It does **not** make the mismatch go away elsewhere: a component that changes DOM outside its own host can still break its neighbours. - It is **not** an incremental-hydration trigger; it switches hydration off for the subtree rather than postponing it. ## Summary `ngSkipHydration` is a last-resort switch on a component host, with a name-only check and a real rendering cost. Interviewers ask about it to see whether a candidate treats it as a workaround with a price, rather than as the standard fix for every NG0500-family error.