Angular removes whitespace-only text nodes between elements and collapses runs of whitespace inside ordinary text nodes by default. For one needed space, use &ngsp;; to preserve a particular subtree, add ngPreserveWhitespaces; and use preserveWhitespaces: true only when broader preservation is required. If the app uses hydration, Angular recommends leaving preservation disabled.
What Angular does to template whitespace
Angular templates are compiled, and the compiler simplifies whitespace by default. According to Angular’s Whitespace in templates guide and Component API, the default transformations include:
As an Amazon Associate I earn from qualifying purchases.
- Removing whitespace-only text nodes between elements, such as indentation and line breaks between tags.
- Collapsing a run of whitespace characters inside an ordinary text node to a single space.
- Trimming whitespace at template boundaries.
This is a compile-time behavior; source indentation is not necessarily a text node in the resulting view. The API documentation says these transformations do not affect text nodes inside <pre> or <textarea>, where whitespace is significant.
Choose the narrowest preservation option
| Need | Use | Scope and effect |
|---|---|---|
| One space between text or elements | &ngsp; |
Inserts a single space. Repeated instances still collapse to one space while preserveWhitespaces is false. |
| A sequence of spaces or whitespace in one subtree | ngPreserveWhitespaces |
Preserves whitespace in the selected element’s subtree. |
| Whitespace throughout one component template | preserveWhitespaces: true in @Component |
Preserves potentially superfluous whitespace in that component’s compiled template. |
| Broader preservation through compiler configuration | Set the Angular compiler option preserveWhitespaces: true |
Applies more broadly; Angular’s compiler-options page lists the default as false. |
These scopes and behaviors are documented in Angular’s Component API and compiler options reference.
#1 Best Overall
Preserve only one required space
Use Angular’s &ngsp; entity where the space belongs. For example:
<p>Hello&ngsp;world</p>The compiler turns the entity into one space. It is not a way to preserve a run of multiple spaces: when preserveWhitespaces remains false, repeated &ngsp; instances also collapse to one. For a sequence that must remain intact, preserve the containing subtree with ngPreserveWhitespaces.
Preserve whitespace in a subtree or component
Selected subtree
Add ngPreserveWhitespaces to the element containing the content whose whitespace matters. This limits the change to that subtree rather than preserving whitespace across unrelated templates.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Component template
Set preserveWhitespaces: true in the component metadata when whitespace must be retained throughout that component’s template:
@Component({
selector: 'app-example',
templateUrl: './example.html',
preserveWhitespaces: true
})Angular documents this option in the Component API. Prefer a scoped option if only part of the template needs it.
Compiler configuration
Set the Angular compiler option preserveWhitespaces: true when the requirement applies more broadly than one component. The Angular compiler options reference lists false as the default. A broader setting retains more whitespace than a local fix requires, so use it deliberately.
Rank #4
Hydration: keep configuration consistent
Angular recommends keeping preserveWhitespaces false when using hydration. Its compiler options reference and hydration guide warn that enabling preservation can cause hydration issues and advise consistent configuration between server and browser builds.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchThis is a caution, not a claim that every app with whitespace preservation will fail. If a specific template requires it, keep the server and browser configurations aligned and validate the affected hydrated pages.
Best Value
Why not preserve whitespace everywhere?
Angular’s template guide explains that retaining otherwise unnecessary whitespace creates extra text nodes and increases page-rendering overhead. The Component API also notes potential effects on DOM-node layout. These are qualitative cautions: the cited official documentation does not provide a numeric performance estimate.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
