Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →In Angular, three component settings control how a component renders and what its template is allowed to contain: the changeDetection strategy, the preserveWhitespaces flag, and the schemas array. All three are set in the @Component decorator, and their defaults changed or matter in specific ways. In Angular v22 and later, OnPush is the default change-detection strategy, whitespace is collapsed unless you opt out, and unknown HTML elements cause an error unless you allow them through a schema.
Where these settings live
Each option belongs to the component’s metadata, not to a workspace or application-wide config file. That scope matters: a change to one component’s @Component object affects only that component’s template and checking behavior. Angular’s advanced component configuration guide assumes you already understand the basics of components, so the explanations below focus on the choices you make on top of a working component.
As an Amazon Associate I earn from qualifying purchases.
Change detection: Default versus OnPush
The changeDetection property accepts two values that matter in practice: ChangeDetectionStrategy.Default (often called Eager/Default in the guide) and ChangeDetectionStrategy.OnPush.
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 reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteEager/Default
Default checking is the broader mode. Angular checks whether the component’s DOM needs updating whenever application-wide activity may have changed state, including user interaction, network responses, and timers. It is the safest mode when a component reads state that changes outside Angular’s normal input flow, but it does the most work.
#1 Best Overall
OnPush
OnPush is the default strategy since Angular v22, according to the official guide. Under OnPush, Angular checks the component when one of three things happens:
- A template-bound input changes value.
- An event listener inside that component runs.
- The component is explicitly marked for check, either through
ChangeDetectorRef.markForCheck()or through a wrapper such asAsyncPipe, which marks the component when a new value arrives.
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, so do not describe OnPush that way when you explain it to others.
Choosing between them
| Concern | Default | OnPush |
|---|---|---|
| Default status | Available as an explicit option; not the default since v22 | Default since v22 |
| Trigger for checking | Possible application-wide activity: user interaction, network responses, timers | Changed template-bound input, event listener in the component, or explicit marking for check (including AsyncPipe) |
| Ancestor behavior | Not described in the guide as a separate rule | Checking the component also checks its ancestors |
| Work performed | Broader checking on every possible trigger | Reduced checking, per the guide; the guide gives no numeric measurement |
| Typical fit | Components whose state changes outside inputs and events, when you have not made the data flow explicit | Components driven by immutable or observable inputs, where updates arrive through bindings, events, or AsyncPipe |
Setting the strategy explicitly
Because OnPush is the default in v22 and later, you only need to write it out if your project targets an earlier version or if you want the choice to be visible in the code. Setting it explicitly looks like this:
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-profile',
templateUrl: './profile.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProfileComponent {}If a component under OnPush shows stale data after a change made outside its inputs, the usual fix is to call markForCheck() on the injected ChangeDetectorRef at the point where the change happens, rather than switching the whole component back to Default.
Rank #3
Whitespace in templates
By default, Angular removes and collapses superfluous whitespace in templates, especially newlines and indentation between elements. For most layouts this is what you want, because the HTML you write for readability does not add extra gaps to the rendered page.
If a template depends on whitespace text nodes, set preserveWhitespaces to true in the component metadata:
@Component({
selector: 'app-caption',
templateUrl: './caption.html',
preserveWhitespaces: true,
})
export class CaptionComponent {}Preserving whitespace affects only the component that sets the flag. It is worth enabling only when a specific rendering problem requires it, because the output then contains the indentation and newlines from your template source.
Custom elements and schemas
Angular treats an unknown HTML element in a template as an error by default. This catches typos in component selectors and missing module imports. When you intentionally use a custom element, such as a Web Component defined outside Angular, you have to tell the compiler to accept it through the schemas array.
CUSTOM_ELEMENTS_SCHEMA
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',
templateUrl: './dashboard.html',
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class DashboardComponent {}This allows elements whose names contain a hyphen, which is the naming convention for custom elements, and it permits their properties. It is scoped to the component that declares it.
NO_ERRORS_SCHEMA
NO_ERRORS_SCHEMA is a broader setting. According to the guide, it allows any element and any property, so it suppresses checks that would otherwise catch misspelled elements or properties. It is not a substitute for CUSTOM_ELEMENTS_SCHEMA. Use it only when you have a specific reason to disable template validation for that component, and expect to lose the compile-time help that the stricter default provides.
Recommended Free Tools
Which schema to use
| Schema | What it allows | When it fits |
|---|---|---|
| None (default) | Only known Angular elements and properties; unknown elements raise an error | Standard Angular templates |
CUSTOM_ELEMENTS_SCHEMA |
Custom elements, such as hyphenated Web Components, and their properties | Templates that intentionally use custom elements |
NO_ERRORS_SCHEMA |
Any element and any property | Narrow cases where you need to silence template validation for a component |
Version notes
The change-detection default described here is documented in the Angular advanced component configuration guide, whose footer identifies the build as Angular v22.2.1. Because the default changed in v22, code written for earlier versions may behave differently if you upgrade without setting the strategy explicitly. Check the guide for your installed major version before relying on the default.
Quick Recap
Quick checklist
- Confirm your Angular major version before you assume OnPush is the default.
- Use OnPush for components whose data arrives through inputs, events, or
AsyncPipe. - Call
markForCheck()when state changes outside those paths. - Enable
preserveWhitespacesonly when a template needs whitespace text nodes. - Add
CUSTOM_ELEMENTS_SCHEMAfor custom elements rather than reaching forNO_ERRORS_SCHEMA.
“
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.
