In an Angular 22 project, what does the strictTemplates compiler option check, and where is it configured?

## Why templates need their own type checking An Angular template is not TypeScript, so `tsc` alone never sees a mistake such as binding a string to a numeric input or reading a property that does not exist. The Angular compiler closes that gap. For every component it generates a **type-check block (TCB)**: a TypeScript function that is never emitted or executed, but which expresses the template's bindings, variables and directive inputs as ordinary TypeScript statements. TypeScript checks the TCB, and the compiler maps any error back to the line and column in the template. ## Strict versus basic checking | Mode | How it is selected in Angular 22.2 | What it checks | | :-- | :-- | :-- | | Basic | `strictTemplates: false` | Top-level expressions only; embedded views are skipped and pipes, `$event` and `#refs` are mostly `any` | | Strict | `strictTemplates: true`, or unset | Embedded views, pipe return types, and the checks below | Older guides describe a middle **full** mode selected by `fullTemplateTypeCheck`. That flag was deprecated in Angular 13, and the 22.2 compiler no longer reads it: turning `strictTemplates` off drops straight to basic checking, unless individual strictness flags are switched back on. ## What strict mode adds - **Input assignability**: `[count]="expr"` must be assignable to the `count` input's type, for both `input()` and `@Input()`. - **Null safety**: those assignments obey TypeScript's `strictNullChecks`, so `User | null` is not accepted by an input typed `User`. - **Generic inference**: generic components and directives get their type parameters inferred from bindings. - **Template context types**: directives that declare a context type (such as `NgFor`) give `let-` variables real types. - **`$event` types** for component outputs, animation events and DOM events. - **Local reference types**: `<input #box>` makes `box` an `HTMLInputElement`, not `any`. - **Extended diagnostics**: the `NG81xx` family of warnings only emits when strict mode is enabled. ## Where it is configured The option sits beside TypeScript's own settings, in the `angularCompilerOptions` block: ```json { "compilerOptions": { "strict": true }, "angularCompilerOptions": { "strictTemplates": true, "strictInjectionParameters": true, "strictInputAccessModifiers": true } } ``` It is a compiler option, not an `angular.json` builder option, so `ng build`, `ng serve`, the test builders and the Language Service in an editor all apply the same setting. ## How the defaults moved 1. **Angular 13** deprecated `fullTemplateTypeCheck` in favour of the `strictTemplates` family; the 22.2 compiler no longer reads it. 2. **Angular 21** turned on `typeCheckHostBindings` by default, so expressions in a component's `host` object and in `@HostBinding` / `@HostListener` are type-checked too. 3. **Angular 22** made `strictTemplates` default to `true` when a tsconfig does not set it. The `ng update` migration for v22 adds `"strictTemplates": false` to project tsconfigs that did not set it, preserving the old behaviour; a new project created with `--strict false` also writes `false`. The consequence for interviews: "strict templates are opt-in" was true for years and is stale for new Angular 22 projects, while an upgraded project may still carry an explicit `false`. ## What strict mode cannot do - It checks **types at build time**, not data at runtime: an HTTP response that does not match its interface still passes. - It only knows what the types say. If a library's typings omit `null`, or `$event.target` is typed as the generic `EventTarget`, strict mode reports errors that are really typing gaps. - For those cases Angular offers escape hatches of increasing breadth: a non-null assertion (`value!`), the `$any()` cast, an individual strictness flag such as `strictNullInputTypes: false`, and finally `strictTemplates: false`, which falls back to basic checking. ## How errors are reported - For an inline `template`, the error names a **synthetic file** such as `user-page.ts.UserPage.html`, which the compiler never writes to disk; line and column are relative to the template string. - For a `templateUrl`, the error points into the real `.html` file. - The location is the attribute or text node containing the faulty expression, so `[user]="selected()"` is reported at that attribute. - The same diagnostics appear in `ng build`, in `ng serve` rebuilds, and in the editor through the Language Service, so a team sees them before committing. ## Interview framing A strong answer names the location (`angularCompilerOptions`), the mechanism (type-check blocks checked by TypeScript), two or three concrete checks (input assignability with null safety, `$event`, local refs), and the current default with its version.