iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
You configure an Angular component’s change detection, whitespace handling and custom element support through the metadata object of the @Component decorator. Angular’s advanced component configuration guide documents three settings for this: changeDetection, preserveWhitespaces and schemas. Its documentation build is Angular v22.2.1, and the guide states that OnPush has been the default change-detection strategy since v22, so the defaults below apply to that version and later.
Configuring change detection
Change detection is the process by which Angular decides whether a component’s DOM needs to be updated. The changeDetection property on @Component selects the strategy for that one component. The guide names two options.
OnPush: the default since v22
According to the guide, ChangeDetectionStrategy.OnPush is the default strategy since v22. You do not need to set it explicitly in v22 or later. To make the choice visible in your code, or to keep a component on the same strategy in a project that targets an earlier version, declare it directly:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
selector: 'app-price-tag',
template: `<span>{{ price | currency }}</span>`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PriceTagComponent {
price = 42;
}Eager/Default: the broader-checking mode
The guide describes the Eager/Default mode as the broader option. Angular checks whether the component’s DOM needs updating whenever application-wide activity may have occurred, including user interaction, network responses and timers. Choose it only when a component depends on state that changes outside the normal input and event paths, and you have not found a cleaner way to signal those changes.
#1 Best Overall
What triggers a check in OnPush
An OnPush component is checked when one of three things happens:
- A template-bound input changes value, because a parent’s template binding passed a new value.
- An event listener inside that component runs, such as a click handler in its own template.
- The component is explicitly marked for check, either by calling
ChangeDetectorRef.markForCheckor through a wrapper such asAsyncPipe, which marks the view when a new value arrives.
This makes the common pattern of an OnPush component fed by observables work without manual calls, as long as the values reach the template through async. Values that you mutate in place on a plain object, outside those paths, will not by themselves trigger a check.
What an OnPush check reaches
The guide says that when Angular checks an OnPush component, it also checks that component’s ancestors. The guide does not say that descendants, or the whole application, are checked unconditionally. Do not assume that an OnPush check refreshes everything below the component; the triggers above determine when the check happens.
Free tools Windows power users keep installed
One-click scans. No signup required.
Choosing between the two modes
| Aspect | Eager/Default | OnPush |
|---|---|---|
| Status in v22 and later | Available as an explicit choice | Default strategy since v22 |
| What starts a check | Possible application-wide activity: user interaction, network responses, timers | Input change from a template binding, an event listener in the component, or an explicit mark for check (including AsyncPipe) |
| Ancestor behaviour | Not described separately in the guide | Checking the component also checks its ancestors |
| Performance effect | Checks more often | Reduces the amount of checking Angular needs to do; the guide gives no numeric measurement |
Preserving template whitespace
By default, Angular removes superfluous whitespace from component templates. This is mostly newlines and indentation between elements, which is why a template you write across many lines does not render extra gaps in the browser. If you need the original whitespace kept, set preserveWhitespaces to true in the component metadata:
Rank #3
@Component({
selector: 'app-poem',
template: `
<pre>
Line one
Line two
</pre>
`,
preserveWhitespaces: true,
})
export class PoemComponent {}Use this setting for a specific component whose layout depends on whitespace, such as preformatted text rendered outside a pre element. Keeping it off is the better default for most components, because it avoids stray spacing between inline elements.
Handling custom elements
Angular throws an error when a template contains an HTML element it does not recognise. This catches typos in component selectors and missing imports early. If you deliberately use a custom element, such as a Web Component defined outside Angular, you must tell Angular to accept it. The guide’s example imports CUSTOM_ELEMENTS_SCHEMA from @angular/core and adds it to the component’s schemas array:
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
selector: 'app-dashboard',
template: `<acme-gauge value="72"></acme-gauge>`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class DashboardComponent {}CUSTOM_ELEMENTS_SCHEMA versus NO_ERRORS_SCHEMA
Angular also provides NO_ERRORS_SCHEMA, and the two are not interchangeable. The guide says NO_ERRORS_SCHEMA allows any element and any property. CUSTOM_ELEMENTS_SCHEMA is intended for custom elements, so it is the narrower choice. Use it when you know which elements are custom, and reserve NO_ERRORS_SCHEMA for cases where you need the broader suppression and accept that Angular will no longer catch unknown elements or properties in that component.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated 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 matchQuick Recap
Version and verification notes
- The change-detection defaults described here come from the guide’s v22.2.1 documentation build. Check the guide for your installed major version if you are on an older release.
- The guide gives no numeric benchmark for OnPush speed, so measure your own component tree before expecting a particular improvement.
- To confirm the mode a component uses, read its
@Componentmetadata directly rather than relying on a project default you have not verified.
“
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.
