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
Angular checks template expressions and bindings during ahead-of-time (AOT) compilation, using TypeScript’s type checker to catch problems such as an incompatible component input or a possibly undefined value. Set strictTemplates in the Angular app’s angularCompilerOptions to enable the fuller set of checks; before changing it, inspect the configuration the app actually uses and confirm its Angular version.
What Angular template type checking does
Template type checking validates expressions and bindings in Angular templates at compile time. During AOT compilation, Angular uses TypeScript to check those values and reports template errors much like errors in a TypeScript file. That means a diagnostic can point to a mismatch before the affected view runs.
The checks depend on the template-checking mode. Basic mode verifies some expression properties, but strict mode checks more of the types and relationships that determine whether a template binding is valid.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →What strictTemplates changes
Angular’s current compiler-options reference lists strictTemplates as defaulting to true. The effective setting can still differ in a project that inherits or overrides configuration, so inspect the TypeScript configuration used by the application rather than assuming the root file controls it.
#1 Best Overall
With strictTemplates: false, Angular calls the behavior basic mode. Strict mode adds checks for embedded views and verifies that values are assignable to component or directive inputs. It also improves inference for pipes, local references, events, template contexts, and component or directive generics. For input bindings, it applies TypeScript null checking when strictNullChecks is enabled.
| Area | Basic mode (strictTemplates: false) |
Strict mode (strictTemplates: true) |
|---|---|---|
| Embedded views | Not checked with the same strict coverage. | Checks embedded views, including those created by structural directives. |
| Input assignability | Does not verify that the final expression is assignable to the input. | Checks whether a binding’s value can be assigned to an input. |
| Nullability | Does not provide strict input null checking. | Follows strictNullChecks for inputs. |
| Pipes, references, events, and generics | Leaves several of these types uninferred or less specifically checked. | Infers pipe and local-reference types, event types, template contexts, and component or directive generics. |
| Type information | Provides less template type coverage. | Retains more type information and reports more potential mismatches. |
How to enable strict template checking
-
Open the TypeScript configuration used to build the Angular application. Check the app-level configuration as well as any configuration it extends.
-
Under
angularCompilerOptions, setstrictTemplatestotrue:Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.{ "angularCompilerOptions": { "strictTemplates": true } } -
Run the project’s normal Angular compilation or build. Review the resulting template diagnostics and address the underlying type issues where possible.
Because the compiler reference currently documents true as the default, an explicit setting is useful for clarity but may not change a project that already inherits that default. Conversely, a parent or app-specific configuration can affect what the build actually uses.
How to troubleshoot an Angular template type error
Read the expression and expected type
Start with the expression named in the diagnostic and the type expected by the destination. For example, if a child component input requires a non-null value but the parent expression may be null, strict checking is identifying a real contract mismatch unless the declaration or library typing is inaccurate.
Narrow nullable values where they are used
When a value is only available under a condition, express that condition in the template so the checker can narrow its type. Angular documents this behavior for NgIf; verify the syntax and narrowing behavior for the control-flow construct used by the project’s Angular version.
Free tools Windows power users keep installed
One-click scans. No signup required.
For example, place a binding that needs user inside a branch that first checks that user exists. This communicates the condition to both the checker and readers of the template, rather than suppressing the warning.
Rank #3
Check library declarations and event types
A diagnostic can reflect a library declaration that is incomplete, uses non-strict null typings, or declares an input more narrowly than the runtime contract. Inspect the relevant declaration before weakening checks across the application.
For DOM events, $event.target can have a broad type because events may bubble from different elements. If the handler needs a particular element type, verify the event and target rather than assuming every event originates from the element where the listener appears.
Choose the narrowest justified escape hatch
Angular provides controls for specific strictness checks, including strictInputTypes, strictNullInputTypes, strictAttributeTypes, strictSafeNavigationTypes, strictDomLocalRefTypes, strictOutputEventTypes, strictDomEventTypes, strictContextGenerics, and strictLiteralTypes. Use a flag only when its particular check is the source of a known, justified incompatibility.
-
$any(expression)casts one expression toany, suppressing type checking for that expression. -
strictNullInputTypes: falserelaxes null checks for input bindings across the application, rather than for just one expression. -
A non-null assertion tells the checker a value is not null or undefined. Use it only when the runtime condition genuinely guarantees that.
-
strictTemplates: falseturns off the broader strict coverage for templates and should not be the first response to one diagnostic.Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
If the declaration is sound, the expression is safe, and the diagnostic still appears after applying the documented guidance, the template checker may have a bug. Report the reproducible case rather than discarding strict checks project-wide.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use editor diagnostics while you work
The Angular Language Service provides template completions, diagnostics, quick information, and navigation for inline and external templates. Enable it in the editor and keep strict template checking on to see type feedback while editing, rather than waiting for a build to reveal the issue.
Angular version matters for template optional chaining
Angular’s current expression-syntax guide says that since Angular 22, template optional chaining follows standard JavaScript behavior: if the left side is null or undefined, the result is undefined. During migration, Angular added $safeNavigationMigration to existing expressions to preserve the older null-returning behavior. The guide describes that migration aid as temporary and recommends not relying on a distinction between null and undefined. Check the project’s Angular version before applying advice about optional-chain results.
What NG8107 means
Angular’s extended diagnostics are emitted when strictTemplates is enabled. NG8107 warns that optional chaining is being used on a receiver whose declared type excludes both null and undefined, so the chain has no effect. Check whether the declaration is missing a real nullable case; if it is not, remove the redundant optional chain.
Outdated 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 matchPC 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 & 11Quick Recap
Official Angular references
- Template type checking
- Angular compiler options
- Ahead-of-time (AOT) compilation
- Angular Language Service
- Expression syntax
- Extended Diagnostics overview
- NG8107: Optional chain not nullable
- NgIf API reference
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.
