@angular/core 20.0.0-next.2 → 20.0.0-next.4

package/schematics/bundles/{checker-DF8ZaFW5.js → checker-k591b6WQ.js}

@@ -1,6 +1,6 @@
 'use strict';
 /**
- * @license Angular v20.0.0-next.2
+ * @license Angular v20.0.0-next.4
  * (c) 2010-2025 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -2773,6 +2773,11 @@ class Identifiers {
         name: 'ɵɵdeferEnableTimerScheduling',
         moduleName: CORE,
     };
+    static conditionalCreate = { name: 'ɵɵconditionalCreate', moduleName: CORE };
+    static conditionalBranchCreate = {
+        name: 'ɵɵconditionalBranchCreate',
+        moduleName: CORE,
+    };
     static conditional = { name: 'ɵɵconditional', moduleName: CORE };
     static repeater = { name: 'ɵɵrepeater', moduleName: CORE };
     static repeaterCreate = { name: 'ɵɵrepeaterCreate', moduleName: CORE };
@@ -5350,6 +5355,28 @@ let Icu$1 = class Icu {
         return visitor.visitIcu(this);
     }
 };
+/**
+ * AST node that represents the host element of a directive.
+ * This node is used only for type checking purposes and cannot be produced from a user's template.
+ */
+class HostElement {
+    tagNames;
+    bindings;
+    listeners;
+    sourceSpan;
+    constructor(tagNames, bindings, listeners, sourceSpan) {
+        this.tagNames = tagNames;
+        this.bindings = bindings;
+        this.listeners = listeners;
+        this.sourceSpan = sourceSpan;
+        if (tagNames.length === 0) {
+            throw new Error('HostElement must have at least one tag name.');
+        }
+    }
+    visit() {
+        throw new Error(`HostElement cannot be visited`);
+    }
+}
 let RecursiveVisitor$1 = class RecursiveVisitor {
     visitElement(element) {
         visitAll$1(this, element.attributes);
@@ -8581,167 +8608,175 @@ var OpKind;
      * node.
      */
     OpKind[OpKind["DisableBindings"] = 10] = "DisableBindings";
+    /**
+     * Create a conditional creation instruction op.
+     */
+    OpKind[OpKind["ConditionalCreate"] = 11] = "ConditionalCreate";
+    /**
+     * Create a conditional branch creation instruction op.
+     */
+    OpKind[OpKind["ConditionalBranchCreate"] = 12] = "ConditionalBranchCreate";
     /**
      * An op to conditionally render a template.
      */
-    OpKind[OpKind["Conditional"] = 11] = "Conditional";
+    OpKind[OpKind["Conditional"] = 13] = "Conditional";
     /**
      * An operation to re-enable binding, after it was previously disabled.
      */
-    OpKind[OpKind["EnableBindings"] = 12] = "EnableBindings";
+    OpKind[OpKind["EnableBindings"] = 14] = "EnableBindings";
     /**
      * An operation to render a text node.
      */
-    OpKind[OpKind["Text"] = 13] = "Text";
+    OpKind[OpKind["Text"] = 15] = "Text";
     /**
      * An operation declaring an event listener for an element.
      */
-    OpKind[OpKind["Listener"] = 14] = "Listener";
+    OpKind[OpKind["Listener"] = 16] = "Listener";
     /**
      * An operation to interpolate text into a text node.
      */
-    OpKind[OpKind["InterpolateText"] = 15] = "InterpolateText";
+    OpKind[OpKind["InterpolateText"] = 17] = "InterpolateText";
     /**
      * An intermediate binding op, that has not yet been processed into an individual property,
      * attribute, style, etc.
      */
-    OpKind[OpKind["Binding"] = 16] = "Binding";
+    OpKind[OpKind["Binding"] = 18] = "Binding";
     /**
      * An operation to bind an expression to a property of an element.
      */
-    OpKind[OpKind["Property"] = 17] = "Property";
+    OpKind[OpKind["Property"] = 19] = "Property";
     /**
      * An operation to bind an expression to a style property of an element.
      */
-    OpKind[OpKind["StyleProp"] = 18] = "StyleProp";
+    OpKind[OpKind["StyleProp"] = 20] = "StyleProp";
     /**
      * An operation to bind an expression to a class property of an element.
      */
-    OpKind[OpKind["ClassProp"] = 19] = "ClassProp";
+    OpKind[OpKind["ClassProp"] = 21] = "ClassProp";
     /**
      * An operation to bind an expression to the styles of an element.
      */
-    OpKind[OpKind["StyleMap"] = 20] = "StyleMap";
+    OpKind[OpKind["StyleMap"] = 22] = "StyleMap";
     /**
      * An operation to bind an expression to the classes of an element.
      */
-    OpKind[OpKind["ClassMap"] = 21] = "ClassMap";
+    OpKind[OpKind["ClassMap"] = 23] = "ClassMap";
     /**
      * An operation to advance the runtime's implicit slot context during the update phase of a view.
      */
-    OpKind[OpKind["Advance"] = 22] = "Advance";
+    OpKind[OpKind["Advance"] = 24] = "Advance";
     /**
      * An operation to instantiate a pipe.
      */
-    OpKind[OpKind["Pipe"] = 23] = "Pipe";
+    OpKind[OpKind["Pipe"] = 25] = "Pipe";
     /**
      * An operation to associate an attribute with an element.
      */
-    OpKind[OpKind["Attribute"] = 24] = "Attribute";
+    OpKind[OpKind["Attribute"] = 26] = "Attribute";
     /**
      * An attribute that has been extracted for inclusion in the consts array.
      */
-    OpKind[OpKind["ExtractedAttribute"] = 25] = "ExtractedAttribute";
+    OpKind[OpKind["ExtractedAttribute"] = 27] = "ExtractedAttribute";
     /**
      * An operation that configures a `@defer` block.
      */
-    OpKind[OpKind["Defer"] = 26] = "Defer";
+    OpKind[OpKind["Defer"] = 28] = "Defer";
     /**
      * An operation that controls when a `@defer` loads.
      */
-    OpKind[OpKind["DeferOn"] = 27] = "DeferOn";
+    OpKind[OpKind["DeferOn"] = 29] = "DeferOn";
     /**
      * An operation that controls when a `@defer` loads, using a custom expression as the condition.
      */
-    OpKind[OpKind["DeferWhen"] = 28] = "DeferWhen";
+    OpKind[OpKind["DeferWhen"] = 30] = "DeferWhen";
     /**
      * An i18n message that has been extracted for inclusion in the consts array.
      */
-    OpKind[OpKind["I18nMessage"] = 29] = "I18nMessage";
+    OpKind[OpKind["I18nMessage"] = 31] = "I18nMessage";
     /**
      * A host binding property.
      */
-    OpKind[OpKind["HostProperty"] = 30] = "HostProperty";
+    OpKind[OpKind["HostProperty"] = 32] = "HostProperty";
     /**
      * A namespace change, which causes the subsequent elements to be processed as either HTML or SVG.
      */
-    OpKind[OpKind["Namespace"] = 31] = "Namespace";
+    OpKind[OpKind["Namespace"] = 33] = "Namespace";
     /**
      * Configure a content projeciton definition for the view.
      */
-    OpKind[OpKind["ProjectionDef"] = 32] = "ProjectionDef";
+    OpKind[OpKind["ProjectionDef"] = 34] = "ProjectionDef";
     /**
      * Create a content projection slot.
      */
-    OpKind[OpKind["Projection"] = 33] = "Projection";
+    OpKind[OpKind["Projection"] = 35] = "Projection";
     /**
      * Create a repeater creation instruction op.
      */
-    OpKind[OpKind["RepeaterCreate"] = 34] = "RepeaterCreate";
+    OpKind[OpKind["RepeaterCreate"] = 36] = "RepeaterCreate";
     /**
      * An update up for a repeater.
      */
-    OpKind[OpKind["Repeater"] = 35] = "Repeater";
+    OpKind[OpKind["Repeater"] = 37] = "Repeater";
     /**
      * An operation to bind an expression to the property side of a two-way binding.
      */
-    OpKind[OpKind["TwoWayProperty"] = 36] = "TwoWayProperty";
+    OpKind[OpKind["TwoWayProperty"] = 38] = "TwoWayProperty";
     /**
      * An operation declaring the event side of a two-way binding.
      */
-    OpKind[OpKind["TwoWayListener"] = 37] = "TwoWayListener";
+    OpKind[OpKind["TwoWayListener"] = 39] = "TwoWayListener";
     /**
      * A creation-time operation that initializes the slot for a `@let` declaration.
      */
-    OpKind[OpKind["DeclareLet"] = 38] = "DeclareLet";
+    OpKind[OpKind["DeclareLet"] = 40] = "DeclareLet";
     /**
      * An update-time operation that stores the current value of a `@let` declaration.
      */
-    OpKind[OpKind["StoreLet"] = 39] = "StoreLet";
+    OpKind[OpKind["StoreLet"] = 41] = "StoreLet";
     /**
      * The start of an i18n block.
      */
-    OpKind[OpKind["I18nStart"] = 40] = "I18nStart";
+    OpKind[OpKind["I18nStart"] = 42] = "I18nStart";
     /**
      * A self-closing i18n on a single element.
      */
-    OpKind[OpKind["I18n"] = 41] = "I18n";
+    OpKind[OpKind["I18n"] = 43] = "I18n";
     /**
      * The end of an i18n block.
      */
-    OpKind[OpKind["I18nEnd"] = 42] = "I18nEnd";
+    OpKind[OpKind["I18nEnd"] = 44] = "I18nEnd";
     /**
      * An expression in an i18n message.
      */
-    OpKind[OpKind["I18nExpression"] = 43] = "I18nExpression";
+    OpKind[OpKind["I18nExpression"] = 45] = "I18nExpression";
     /**
      * An instruction that applies a set of i18n expressions.
      */
-    OpKind[OpKind["I18nApply"] = 44] = "I18nApply";
+    OpKind[OpKind["I18nApply"] = 46] = "I18nApply";
     /**
      * An instruction to create an ICU expression.
      */
-    OpKind[OpKind["IcuStart"] = 45] = "IcuStart";
+    OpKind[OpKind["IcuStart"] = 47] = "IcuStart";
     /**
      * An instruction to update an ICU expression.
      */
-    OpKind[OpKind["IcuEnd"] = 46] = "IcuEnd";
+    OpKind[OpKind["IcuEnd"] = 48] = "IcuEnd";
     /**
      * An instruction representing a placeholder in an ICU expression.
      */
-    OpKind[OpKind["IcuPlaceholder"] = 47] = "IcuPlaceholder";
+    OpKind[OpKind["IcuPlaceholder"] = 49] = "IcuPlaceholder";
     /**
      * An i18n context containing information needed to generate an i18n message.
      */
-    OpKind[OpKind["I18nContext"] = 48] = "I18nContext";
+    OpKind[OpKind["I18nContext"] = 50] = "I18nContext";
     /**
      * A creation op that corresponds to i18n attributes on an element.
      */
-    OpKind[OpKind["I18nAttributes"] = 49] = "I18nAttributes";
+    OpKind[OpKind["I18nAttributes"] = 51] = "I18nAttributes";
     /**
      * Creation op that attaches the location at which an element was defined in a template to it.
      */
-    OpKind[OpKind["SourceLocation"] = 50] = "SourceLocation";
+    OpKind[OpKind["SourceLocation"] = 52] = "SourceLocation";
 })(OpKind || (OpKind = {}));
 /**
  * Distinguishes different kinds of IR expressions.
@@ -10291,6 +10326,8 @@ function transformExpressionsInOp(op, transform, flags) {
         case OpKind.IcuPlaceholder:
         case OpKind.DeclareLet:
         case OpKind.SourceLocation:
+        case OpKind.ConditionalCreate:
+        case OpKind.ConditionalBranchCreate:
             // These operations contain no expressions.
             break;
         default:
@@ -10706,6 +10743,8 @@ const elementContainerOpKinds = new Set([
     OpKind.ContainerStart,
     OpKind.Template,
     OpKind.RepeaterCreate,
+    OpKind.ConditionalCreate,
+    OpKind.ConditionalBranchCreate,
 ]);
 /**
  * Checks whether the given operation represents the creation of an element or container.
@@ -10757,6 +10796,48 @@ function createTemplateOp(xref, templateKind, tag, functionNameSuffix, namespace
         ...NEW_OP,
     };
 }
+function createConditionalCreateOp(xref, templateKind, tag, functionNameSuffix, namespace, i18nPlaceholder, startSourceSpan, wholeSourceSpan) {
+    return {
+        kind: OpKind.ConditionalCreate,
+        xref,
+        templateKind,
+        attributes: null,
+        tag,
+        handle: new SlotHandle(),
+        functionNameSuffix,
+        decls: null,
+        vars: null,
+        localRefs: [],
+        nonBindable: false,
+        namespace,
+        i18nPlaceholder,
+        startSourceSpan,
+        wholeSourceSpan,
+        ...TRAIT_CONSUMES_SLOT,
+        ...NEW_OP,
+    };
+}
+function createConditionalBranchCreateOp(xref, templateKind, tag, functionNameSuffix, namespace, i18nPlaceholder, startSourceSpan, wholeSourceSpan) {
+    return {
+        kind: OpKind.ConditionalBranchCreate,
+        xref,
+        templateKind,
+        attributes: null,
+        tag,
+        handle: new SlotHandle(),
+        functionNameSuffix,
+        decls: null,
+        vars: null,
+        localRefs: [],
+        nonBindable: false,
+        namespace,
+        i18nPlaceholder,
+        startSourceSpan,
+        wholeSourceSpan,
+        ...TRAIT_CONSUMES_SLOT,
+        ...NEW_OP,
+    };
+}
 function createRepeaterCreateOp(primaryView, emptyView, tag, track, varNames, emptyTag, i18nPlaceholder, emptyI18nPlaceholder, startSourceSpan, wholeSourceSpan) {
     return {
         kind: OpKind.RepeaterCreate,
@@ -11704,36 +11785,38 @@ function specializeBindings(job) {
     }
 }
 
-const CHAINABLE = new Set([
-    Identifiers.attribute,
-    Identifiers.classProp,
-    Identifiers.element,
-    Identifiers.elementContainer,
-    Identifiers.elementContainerEnd,
-    Identifiers.elementContainerStart,
-    Identifiers.elementEnd,
-    Identifiers.elementStart,
-    Identifiers.hostProperty,
-    Identifiers.i18nExp,
-    Identifiers.listener,
-    Identifiers.listener,
-    Identifiers.property,
-    Identifiers.styleProp,
-    Identifiers.stylePropInterpolate1,
-    Identifiers.stylePropInterpolate2,
-    Identifiers.stylePropInterpolate3,
-    Identifiers.stylePropInterpolate4,
-    Identifiers.stylePropInterpolate5,
-    Identifiers.stylePropInterpolate6,
-    Identifiers.stylePropInterpolate7,
-    Identifiers.stylePropInterpolate8,
-    Identifiers.stylePropInterpolateV,
-    Identifiers.syntheticHostListener,
-    Identifiers.syntheticHostProperty,
-    Identifiers.templateCreate,
-    Identifiers.twoWayProperty,
-    Identifiers.twoWayListener,
-    Identifiers.declareLet,
+const CHAIN_COMPATIBILITY = new Map([
+    [Identifiers.attribute, Identifiers.attribute],
+    [Identifiers.classProp, Identifiers.classProp],
+    [Identifiers.element, Identifiers.element],
+    [Identifiers.elementContainer, Identifiers.elementContainer],
+    [Identifiers.elementContainerEnd, Identifiers.elementContainerEnd],
+    [Identifiers.elementContainerStart, Identifiers.elementContainerStart],
+    [Identifiers.elementEnd, Identifiers.elementEnd],
+    [Identifiers.elementStart, Identifiers.elementStart],
+    [Identifiers.hostProperty, Identifiers.hostProperty],
+    [Identifiers.i18nExp, Identifiers.i18nExp],
+    [Identifiers.listener, Identifiers.listener],
+    [Identifiers.listener, Identifiers.listener],
+    [Identifiers.property, Identifiers.property],
+    [Identifiers.styleProp, Identifiers.styleProp],
+    [Identifiers.stylePropInterpolate1, Identifiers.stylePropInterpolate1],
+    [Identifiers.stylePropInterpolate2, Identifiers.stylePropInterpolate2],
+    [Identifiers.stylePropInterpolate3, Identifiers.stylePropInterpolate3],
+    [Identifiers.stylePropInterpolate4, Identifiers.stylePropInterpolate4],
+    [Identifiers.stylePropInterpolate5, Identifiers.stylePropInterpolate5],
+    [Identifiers.stylePropInterpolate6, Identifiers.stylePropInterpolate6],
+    [Identifiers.stylePropInterpolate7, Identifiers.stylePropInterpolate7],
+    [Identifiers.stylePropInterpolate8, Identifiers.stylePropInterpolate8],
+    [Identifiers.stylePropInterpolateV, Identifiers.stylePropInterpolateV],
+    [Identifiers.syntheticHostListener, Identifiers.syntheticHostListener],
+    [Identifiers.syntheticHostProperty, Identifiers.syntheticHostProperty],
+    [Identifiers.templateCreate, Identifiers.templateCreate],
+    [Identifiers.twoWayProperty, Identifiers.twoWayProperty],
+    [Identifiers.twoWayListener, Identifiers.twoWayListener],
+    [Identifiers.declareLet, Identifiers.declareLet],
+    [Identifiers.conditionalCreate, Identifiers.conditionalBranchCreate],
+    [Identifiers.conditionalBranchCreate, Identifiers.conditionalBranchCreate],
 ]);
 /**
  * Chaining results in repeated call expressions, causing a deep AST of receiver expressions. To prevent running out of
@@ -11779,14 +11862,16 @@ function chainOperationsInList(opList) {
             continue;
         }
         const instruction = op.statement.expr.fn.value;
-        if (!CHAINABLE.has(instruction)) {
+        if (!CHAIN_COMPATIBILITY.has(instruction)) {
             // This instruction isn't chainable.
             chain = null;
             continue;
         }
         // This instruction can be chained. It can either be added on to the previous chain (if
         // compatible) or it can be the start of a new chain.
-        if (chain !== null && chain.instruction === instruction && chain.length < MAX_CHAIN_LENGTH) {
+        if (chain !== null &&
+            CHAIN_COMPATIBILITY.get(chain.instruction) === instruction &&
+            chain.length < MAX_CHAIN_LENGTH) {
             // This instruction can be added onto the previous chain.
             const expression = chain.expression.callFn(op.statement.expr.args, op.statement.expr.sourceSpan, op.statement.expr.pure);
             chain.expression = expression;
@@ -13014,6 +13099,8 @@ function recursivelyProcessView(view, parentScope) {
     const scope = getScopeForView(view, parentScope);
     for (const op of view.create) {
         switch (op.kind) {
+            case OpKind.ConditionalCreate:
+            case OpKind.ConditionalBranchCreate:
             case OpKind.Template:
                 // Descend into child embedded views.
                 recursivelyProcessView(view.job.views.get(op.xref), scope);
@@ -13071,6 +13158,8 @@ function getScopeForView(view, parent) {
     for (const op of view.create) {
         switch (op.kind) {
             case OpKind.ElementStart:
+            case OpKind.ConditionalCreate:
+            case OpKind.ConditionalBranchCreate:
             case OpKind.Template:
                 if (!Array.isArray(op.localRefs)) {
                     throw new Error(`AssertionError: expected localRefs to be an array`);
@@ -21601,6 +21690,8 @@ function liftLocalRefs(job) {
         for (const op of unit.create) {
             switch (op.kind) {
                 case OpKind.ElementStart:
+                case OpKind.ConditionalCreate:
+                case OpKind.ConditionalBranchCreate:
                 case OpKind.Template:
                     if (!Array.isArray(op.localRefs)) {
                         throw new Error(`AssertionError: expected localRefs to be an array still`);
@@ -21743,7 +21834,9 @@ function parseExtractedStyles(job) {
                 isStringLiteral(op.expression)) {
                 const target = elements.get(op.target);
                 if (target !== undefined &&
-                    target.kind === OpKind.Template &&
+                    (target.kind === OpKind.Template ||
+                        target.kind === OpKind.ConditionalCreate ||
+                        target.kind === OpKind.ConditionalBranchCreate) &&
                     target.templateKind === TemplateKind.Structural) {
                     // TemplateDefinitionBuilder will not apply class and style bindings to structural
                     // directives; instead, it will leave them as attributes.
@@ -21858,6 +21951,8 @@ function addNamesToView(unit, baseName, state, compatibility) {
                     addNamesToView(fallbackView, `${baseName}_ProjectionFallback_${op.handle.slot}`, state, compatibility);
                 }
                 break;
+            case OpKind.ConditionalCreate:
+            case OpKind.ConditionalBranchCreate:
             case OpKind.Template:
                 if (!(unit instanceof ViewCompilationUnit)) {
                     throw new Error(`AssertionError: must be compiling a component`);
@@ -22343,6 +22438,8 @@ function propagateI18nBlocksToTemplates(unit, subTemplateIndex) {
                 }
                 i18nBlock = null;
                 break;
+            case OpKind.ConditionalCreate:
+            case OpKind.ConditionalBranchCreate:
             case OpKind.Template:
                 subTemplateIndex = propagateI18nBlocksForView(unit.job.views.get(op.xref), i18nBlock, op.i18nPlaceholder, subTemplateIndex);
                 break;
@@ -22548,7 +22645,6 @@ function enableBindings() {
 function listener(name, handlerFn, eventTargetResolver, syntheticHost, sourceSpan) {
     const args = [literal$1(name), handlerFn];
     if (eventTargetResolver !== null) {
-        args.push(literal$1(false)); // `useCapture` flag, defaults to `false`
         args.push(importExpr(eventTargetResolver));
     }
     return call(syntheticHost ? Identifiers.syntheticHostListener : Identifiers.listener, args, sourceSpan);
@@ -22708,6 +22804,42 @@ function i18nStart(slot, constIndex, subTemplateIndex, sourceSpan) {
     }
     return call(Identifiers.i18nStart, args, sourceSpan);
 }
+function conditionalCreate(slot, templateFnRef, decls, vars, tag, constIndex, localRefs, sourceSpan) {
+    const args = [
+        literal$1(slot),
+        templateFnRef,
+        literal$1(decls),
+        literal$1(vars),
+        literal$1(tag),
+        literal$1(constIndex),
+    ];
+    if (localRefs !== null) {
+        args.push(literal$1(localRefs));
+        args.push(importExpr(Identifiers.templateRefExtractor));
+    }
+    while (args[args.length - 1].isEquivalent(NULL_EXPR)) {
+        args.pop();
+    }
+    return call(Identifiers.conditionalCreate, args, sourceSpan);
+}
+function conditionalBranchCreate(slot, templateFnRef, decls, vars, tag, constIndex, localRefs, sourceSpan) {
+    const args = [
+        literal$1(slot),
+        templateFnRef,
+        literal$1(decls),
+        literal$1(vars),
+        literal$1(tag),
+        literal$1(constIndex),
+    ];
+    if (localRefs !== null) {
+        args.push(literal$1(localRefs));
+        args.push(importExpr(Identifiers.templateRefExtractor));
+    }
+    while (args[args.length - 1].isEquivalent(NULL_EXPR)) {
+        args.pop();
+    }
+    return call(Identifiers.conditionalBranchCreate, args, sourceSpan);
+}
 function repeaterCreate(slot, viewFnName, decls, vars, tag, constIndex, trackByFn, trackByUsesComponentInstance, emptyViewFnName, emptyDecls, emptyVars, emptyTag, emptyConstIndex, sourceSpan) {
     const args = [
         literal$1(slot),
@@ -23277,6 +23409,26 @@ function reifyCreateOperations(unit, ops) {
                 }
                 OpList.replace(op, projection(op.handle.slot, op.projectionSlotIndex, op.attributes, fallbackViewFnName, fallbackDecls, fallbackVars, op.sourceSpan));
                 break;
+            case OpKind.ConditionalCreate:
+                if (!(unit instanceof ViewCompilationUnit)) {
+                    throw new Error(`AssertionError: must be compiling a component`);
+                }
+                if (Array.isArray(op.localRefs)) {
+                    throw new Error(`AssertionError: local refs array should have been extracted into a constant`);
+                }
+                const conditionalCreateChildView = unit.job.views.get(op.xref);
+                OpList.replace(op, conditionalCreate(op.handle.slot, variable(conditionalCreateChildView.fnName), conditionalCreateChildView.decls, conditionalCreateChildView.vars, op.tag, op.attributes, op.localRefs, op.startSourceSpan));
+                break;
+            case OpKind.ConditionalBranchCreate:
+                if (!(unit instanceof ViewCompilationUnit)) {
+                    throw new Error(`AssertionError: must be compiling a component`);
+                }
+                if (Array.isArray(op.localRefs)) {
+                    throw new Error(`AssertionError: local refs array should have been extracted into a constant`);
+                }
+                const conditionalBranchCreateChildView = unit.job.views.get(op.xref);
+                OpList.replace(op, conditionalBranchCreate(op.handle.slot, variable(conditionalBranchCreateChildView.fnName), conditionalBranchCreateChildView.decls, conditionalBranchCreateChildView.vars, op.tag, op.attributes, op.localRefs, op.startSourceSpan));
+                break;
             case OpKind.RepeaterCreate:
                 if (op.handle.slot === null) {
                     throw new Error('No slot was assigned for repeater instruction');
@@ -23834,6 +23986,8 @@ function resolvePlaceholdersForView(job, unit, i18nContexts, elements, pendingSt
                     pendingStructuralDirective = undefined;
                 }
                 break;
+            case OpKind.ConditionalCreate:
+            case OpKind.ConditionalBranchCreate:
             case OpKind.Template:
                 const view = job.views.get(op.xref);
                 if (op.i18nPlaceholder === undefined) {
@@ -24397,7 +24551,10 @@ function allocateSlots(job) {
     // propagate the number of slots used for each view into the operation which declares it.
     for (const unit of job.units) {
         for (const op of unit.ops()) {
-            if (op.kind === OpKind.Template || op.kind === OpKind.RepeaterCreate) {
+            if (op.kind === OpKind.Template ||
+                op.kind === OpKind.ConditionalCreate ||
+                op.kind === OpKind.ConditionalBranchCreate ||
+                op.kind === OpKind.RepeaterCreate) {
                 // Record the number of slots used by the view this `ir.TemplateOp` declares in the
                 // operation itself, so it can be emitted later.
                 const childView = job.views.get(op.xref);
@@ -24458,6 +24615,8 @@ function optimizeStoreLet(job) {
  *    typescript AST, the parentheses node is removed, and then the remaining AST is printed, it
  *    incorrectly prints `a ? b : c ?? d`. This is different from how it handles the same situation
  *    with `||` and `&&` where it prints the parentheses even if they are not present in the AST.
+ *    Note: We may be able to remove this case if Typescript resolves the following issue:
+ *    https://github.com/microsoft/TypeScript/issues/61369
  */
 function stripNonrequiredParentheses(job) {
     // Check which parentheses are required.
@@ -24832,7 +24991,10 @@ function countVariables(job) {
         // an embedded view).
         for (const unit of job.units) {
             for (const op of unit.create) {
-                if (op.kind !== OpKind.Template && op.kind !== OpKind.RepeaterCreate) {
+                if (op.kind !== OpKind.Template &&
+                    op.kind !== OpKind.RepeaterCreate &&
+                    op.kind !== OpKind.ConditionalCreate &&
+                    op.kind !== OpKind.ConditionalBranchCreate) {
                     continue;
                 }
                 const childView = job.views.get(op.xref);
@@ -25816,13 +25978,14 @@ function ingestIfBlock(unit, ifBlock) {
             }
             ifCaseI18nMeta = ifCase.i18n;
         }
-        const templateOp = createTemplateOp(cView.xref, TemplateKind.Block, tagName, 'Conditional', Namespace.HTML, ifCaseI18nMeta, ifCase.startSourceSpan, ifCase.sourceSpan);
-        unit.create.push(templateOp);
+        const createOp = i === 0 ? createConditionalCreateOp : createConditionalBranchCreateOp;
+        const conditionalCreateOp = createOp(cView.xref, TemplateKind.Block, tagName, 'Conditional', Namespace.HTML, ifCaseI18nMeta, ifCase.startSourceSpan, ifCase.sourceSpan);
+        unit.create.push(conditionalCreateOp);
         if (firstXref === null) {
             firstXref = cView.xref;
         }
         const caseExpr = ifCase.expression ? convertAst(ifCase.expression, unit.job, null) : null;
-        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, templateOp.xref, templateOp.handle, ifCase.expressionAlias);
+        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, conditionalCreateOp.xref, conditionalCreateOp.handle, ifCase.expressionAlias);
         conditions.push(conditionalCaseExpr);
         ingestNodes(cView, ifCase.children);
     }
@@ -25838,7 +26001,8 @@ function ingestSwitchBlock(unit, switchBlock) {
     }
     let firstXref = null;
     let conditions = [];
-    for (const switchCase of switchBlock.cases) {
+    for (let i = 0; i < switchBlock.cases.length; i++) {
+        const switchCase = switchBlock.cases[i];
         const cView = unit.job.allocateView(unit.xref);
         const tagName = ingestControlFlowInsertionPoint(unit, cView.xref, switchCase);
         let switchCaseI18nMeta = undefined;
@@ -25848,15 +26012,16 @@ function ingestSwitchBlock(unit, switchBlock) {
             }
             switchCaseI18nMeta = switchCase.i18n;
         }
-        const templateOp = createTemplateOp(cView.xref, TemplateKind.Block, tagName, 'Case', Namespace.HTML, switchCaseI18nMeta, switchCase.startSourceSpan, switchCase.sourceSpan);
-        unit.create.push(templateOp);
+        const createOp = i === 0 ? createConditionalCreateOp : createConditionalBranchCreateOp;
+        const conditionalCreateOp = createOp(cView.xref, TemplateKind.Block, tagName, 'Case', Namespace.HTML, switchCaseI18nMeta, switchCase.startSourceSpan, switchCase.sourceSpan);
+        unit.create.push(conditionalCreateOp);
         if (firstXref === null) {
             firstXref = cView.xref;
         }
         const caseExpr = switchCase.expression
             ? convertAst(switchCase.expression, unit.job, switchBlock.startSourceSpan)
             : null;
-        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, templateOp.xref, templateOp.handle);
+        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, conditionalCreateOp.xref, conditionalCreateOp.handle);
         conditions.push(conditionalCaseExpr);
         ingestNodes(cView, switchCase.children);
     }
@@ -29463,7 +29628,7 @@ class R3TargetBinder {
      * metadata about the types referenced in the template.
      */
     bind(target) {
-        if (!target.template) {
+        if (!target.template && !target.host) {
             throw new Error('Empty bound targets are not supported');
         }
         const directives = new Map();
@@ -29493,6 +29658,11 @@ class R3TargetBinder {
             // template. This extracts all the metadata that doesn't depend on directive matching.
             TemplateBinder.applyWithScope(target.template, scope, expressions, symbols, nestingLevel, usedPipes, eagerPipes, deferBlocks);
         }
+        // Bind the host element in a separate scope. Note that it only uses the
+        // `TemplateBinder` since directives don't apply inside a host context.
+        if (target.host) {
+            TemplateBinder.applyWithScope(target.host, Scope$1.apply(target.host), expressions, symbols, nestingLevel, usedPipes, eagerPipes, deferBlocks);
+        }
         return new R3BoundTarget(target, directives, eagerDirectives, bindings, references, expressions, symbols, nestingLevel, scopedNodeEntities, usedPipes, eagerPipes, deferBlocks);
     }
 }
@@ -29568,7 +29738,7 @@ let Scope$1 = class Scope {
             nodeOrNodes instanceof Content) {
             nodeOrNodes.children.forEach((node) => node.visit(this));
         }
-        else {
+        else if (!(nodeOrNodes instanceof HostElement)) {
             // No overarching `Template` instance, so process the nodes directly.
             nodeOrNodes.forEach((node) => node.visit(this));
         }
@@ -29897,7 +30067,7 @@ class TemplateBinder extends RecursiveAstVisitor {
     /**
      * Process a template and extract metadata about expressions and symbols within.
      *
-     * @param nodes the nodes of the template to process
+     * @param nodeOrNodes the nodes of the template to process
      * @param scope the `Scope` of the template being processed.
      * @returns three maps which contain metadata about the template: `expressions` which interprets
      * special `AST` nodes in expressions as pointing to references or variables declared within the
@@ -29906,11 +30076,11 @@ class TemplateBinder extends RecursiveAstVisitor {
      * nesting level (how many levels deep within the template structure the `Template` is), starting
      * at 1.
      */
-    static applyWithScope(nodes, scope, expressions, symbols, nestingLevel, usedPipes, eagerPipes, deferBlocks) {
-        const template = nodes instanceof Template ? nodes : null;
+    static applyWithScope(nodeOrNodes, scope, expressions, symbols, nestingLevel, usedPipes, eagerPipes, deferBlocks) {
+        const template = nodeOrNodes instanceof Template ? nodeOrNodes : null;
         // The top-level template has nesting level 0.
         const binder = new TemplateBinder(expressions, symbols, usedPipes, eagerPipes, deferBlocks, nestingLevel, scope, template, 0);
-        binder.ingest(nodes);
+        binder.ingest(nodeOrNodes);
     }
     ingest(nodeOrNodes) {
         if (nodeOrNodes instanceof Template) {
@@ -29952,6 +30122,10 @@ class TemplateBinder extends RecursiveAstVisitor {
             nodeOrNodes.children.forEach((node) => node.visit(this));
             this.nestingLevel.set(nodeOrNodes, this.level);
         }
+        else if (nodeOrNodes instanceof HostElement) {
+            // Host elements are always at the top level.
+            this.nestingLevel.set(nodeOrNodes, 0);
+        }
         else {
             // Visit each node from the top-level template.
             nodeOrNodes.forEach(this.visitNode);
@@ -31437,7 +31611,7 @@ var FactoryTarget;
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-new Version('20.0.0-next.2');
+new Version('20.0.0-next.4');
 
 //////////////////////////////////////
 // THIS FILE HAS GLOBAL SIDE EFFECT //
@@ -31903,6 +32077,10 @@ exports.ErrorCode = void 0;
      * A symbol referenced in `@Component.imports` isn't being used within the template.
      */
     ErrorCode[ErrorCode["UNUSED_STANDALONE_IMPORTS"] = 8113] = "UNUSED_STANDALONE_IMPORTS";
+    /**
+     * An expression mixes nullish coalescing and logical and/or without parentheses.
+     */
+    ErrorCode[ErrorCode["UNPARENTHESIZED_NULLISH_COALESCING"] = 8114] = "UNPARENTHESIZED_NULLISH_COALESCING";
     /**
      * The template type-checking engine would need to generate an inline type check block for a
      * component, but the current type-checking environment doesn't support it.
@@ -32061,6 +32239,7 @@ exports.ExtendedTemplateDiagnosticName = void 0;
     ExtendedTemplateDiagnosticName["CONTROL_FLOW_PREVENTING_CONTENT_PROJECTION"] = "controlFlowPreventingContentProjection";
     ExtendedTemplateDiagnosticName["UNUSED_LET_DECLARATION"] = "unusedLetDeclaration";
     ExtendedTemplateDiagnosticName["UNUSED_STANDALONE_IMPORTS"] = "unusedStandaloneImports";
+    ExtendedTemplateDiagnosticName["UNPARENTHESIZED_NULLISH_COALESCING"] = "unparenthesizedNullishCoalescing";
 })(exports.ExtendedTemplateDiagnosticName || (exports.ExtendedTemplateDiagnosticName = {}));
 
 /**
@@ -32387,7 +32566,7 @@ class NodeJSPathManipulation {
 // G3-ESM-MARKER: G3 uses CommonJS, but externally everything in ESM.
 // CommonJS/ESM interop for determining the current file name and containing dir.
 const isCommonJS = typeof __filename !== 'undefined';
-const currentFileUrl = isCommonJS ? null : (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('checker-DF8ZaFW5.js', document.baseURI).href));
+const currentFileUrl = isCommonJS ? null : (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('checker-k591b6WQ.js', document.baseURI).href));
 const currentFileName = isCommonJS ? __filename : url.fileURLToPath(currentFileUrl);
 /**
  * A wrapper around the Node.js file-system that supports readonly operations and path manipulation.
@@ -37638,33 +37817,7 @@ class ExpressionTranslatorVisitor {
         }
     }
     visitConditionalExpr(ast, context) {
-        let cond = ast.condition.visitExpression(this, context);
-        // Ordinarily the ternary operator is right-associative. The following are equivalent:
-        //   `a ? b : c ? d : e` => `a ? b : (c ? d : e)`
-        //
-        // However, occasionally Angular needs to produce a left-associative conditional, such as in
-        // the case of a null-safe navigation production: `{{a?.b ? c : d}}`. This template produces
-        // a ternary of the form:
-        //   `a == null ? null : rest of expression`
-        // If the rest of the expression is also a ternary though, this would produce the form:
-        //   `a == null ? null : a.b ? c : d`
-        // which, if left as right-associative, would be incorrectly associated as:
-        //   `a == null ? null : (a.b ? c : d)`
-        //
-        // In such cases, the left-associativity needs to be enforced with parentheses:
-        //   `(a == null ? null : a.b) ? c : d`
-        //
-        // Such parentheses could always be included in the condition (guaranteeing correct behavior) in
-        // all cases, but this has a code size cost. Instead, parentheses are added only when a
-        // conditional expression is directly used as the condition of another.
-        //
-        // TODO(alxhub): investigate better logic for precendence of conditional operators
-        if (ast.condition instanceof ConditionalExpr) {
-            // The condition of this ternary needs to be wrapped in parentheses to maintain
-            // left-associativity.
-            cond = this.factory.createParenthesizedExpression(cond);
-        }
-        return this.factory.createConditional(cond, ast.trueCase.visitExpression(this, context), ast.falseCase.visitExpression(this, context));
+        return this.factory.createConditional(ast.condition.visitExpression(this, context), ast.trueCase.visitExpression(this, context), ast.falseCase.visitExpression(this, context));
     }
     visitDynamicImportExpr(ast, context) {
         const urlExpression = typeof ast.url === 'string'
@@ -39209,7 +39362,12 @@ function extractDirectiveMetadata(clazz, decorator, reflector, importTracker, ev
             throw new FatalDiagnosticError(exports.ErrorCode.DIRECTIVE_MISSING_SELECTOR, expr, `Directive ${clazz.name.text} has no selector, please add it!`);
         }
     }
-    const host = extractHostBindings(decoratedElements, evaluator, coreModule, compilationMode, directive);
+    const hostBindingNodes = {
+        literal: null,
+        bindingDecorators: new Set(),
+        listenerDecorators: new Set(),
+    };
+    const host = extractHostBindings(decoratedElements, evaluator, coreModule, compilationMode, hostBindingNodes, directive);
     const providers = directive.has('providers')
         ? new WrappedNodeExpr(annotateForClosureCompiler
             ? wrapFunctionExpressionsInParens(directive.get('providers'))
@@ -39321,6 +39479,7 @@ function extractDirectiveMetadata(clazz, decorator, reflector, importTracker, ev
         isStructural,
         hostDirectives,
         rawHostDirectives,
+        hostBindingNodes,
         // Track inputs from class metadata. This is useful for migration efforts.
         inputFieldNamesFromMetadataArray: new Set(Object.values(inputsFromMeta).map((i) => i.classPropertyName)),
     };
@@ -39403,10 +39562,14 @@ function extractDecoratorQueryMetadata(exprNode, name, args, propertyName, refle
         emitDistinctChangesOnly,
     };
 }
-function extractHostBindings(members, evaluator, coreModule, compilationMode, metadata) {
+function extractHostBindings(members, evaluator, coreModule, compilationMode, hostBindingNodes, metadata) {
     let bindings;
     if (metadata && metadata.has('host')) {
-        bindings = evaluateHostExpressionBindings(metadata.get('host'), evaluator);
+        const hostExpression = metadata.get('host');
+        bindings = evaluateHostExpressionBindings(hostExpression, evaluator);
+        if (ts.isObjectLiteralExpression(hostExpression)) {
+            hostBindingNodes.literal = hostExpression;
+        }
     }
     else {
         bindings = parseHostBindings({});
@@ -39430,6 +39593,9 @@ function extractHostBindings(members, evaluator, coreModule, compilationMode, me
                 }
                 hostPropertyName = resolved;
             }
+            if (ts.isDecorator(decorator.node)) {
+                hostBindingNodes.bindingDecorators.add(decorator.node);
+            }
             // Since this is a decorator, we know that the value is a class member. Always access it
             // through `this` so that further down the line it can't be confused for a literal value
             // (e.g. if there's a property called `true`). There is no size penalty, because all
@@ -39465,6 +39631,9 @@ function extractHostBindings(members, evaluator, coreModule, compilationMode, me
                     args = resolvedArgs;
                 }
             }
+            if (ts.isDecorator(decorator.node)) {
+                hostBindingNodes.listenerDecorators.add(decorator.node);
+            }
             bindings.listeners[eventName] = `${member.name}(${args.join(',')})`;
         });
     });
@@ -40134,6 +40303,19 @@ function toR3InputMetadata(mapping) {
         isSignal: mapping.isSignal,
     };
 }
+function extractHostBindingResources(nodes) {
+    const result = new Set();
+    if (nodes.literal !== null) {
+        result.add({ path: null, node: nodes.literal });
+    }
+    for (const current of nodes.bindingDecorators) {
+        result.add({ path: null, node: current.expression });
+    }
+    for (const current of nodes.listenerDecorators) {
+        result.add({ path: null, node: current.expression });
+    }
+    return result;
+}
 
 const NgOriginalFile = Symbol('NgOriginalFile');
 exports.UpdateMode = void 0;
@@ -40441,7 +40623,7 @@ function parseTemplateAsSourceFile(fileName, template) {
 }
 
 const TYPE_CHECK_ID_MAP = Symbol('TypeCheckId');
-function getTypeCheckId(clazz) {
+function getTypeCheckId$1(clazz) {
     const sf = clazz.getSourceFile();
     if (sf[TYPE_CHECK_ID_MAP] === undefined) {
         sf[TYPE_CHECK_ID_MAP] = new Map();
@@ -42212,7 +42394,7 @@ class RegistryDomSchemaChecker {
             this._diagnostics.push(diag);
         }
     }
-    checkProperty(id, element, name, span, schemas, hostIsStandalone) {
+    checkTemplateElementProperty(id, element, name, span, schemas, hostIsStandalone) {
         if (!REGISTRY$1.hasProperty(element.name, name, schemas)) {
             const mapping = this.resolver.getTemplateSourceMapping(id);
             const decorator = hostIsStandalone ? '@Component' : '@NgModule';
@@ -42235,6 +42417,18 @@ class RegistryDomSchemaChecker {
             this._diagnostics.push(diag);
         }
     }
+    checkHostElementProperty(id, element, name, span, schemas) {
+        for (const tagName of element.tagNames) {
+            if (REGISTRY$1.hasProperty(tagName, name, schemas)) {
+                continue;
+            }
+            const errorMessage = `Can't bind to '${name}' since it isn't a known property of '${tagName}'.`;
+            const mapping = this.resolver.getHostBindingsMapping(id);
+            const diag = makeTemplateDiagnostic(id, mapping, span, ts.DiagnosticCategory.Error, ngErrorCode(exports.ErrorCode.SCHEMA_INVALID_ATTRIBUTE), errorMessage);
+            this._diagnostics.push(diag);
+            break;
+        }
+    }
 }
 
 /**
@@ -42346,13 +42540,26 @@ function tsCastToAny(expr) {
  * Thanks to narrowing of `document.createElement()`, this expression will have its type inferred
  * based on the tag name, including for custom elements that have appropriate .d.ts definitions.
  */
-function tsCreateElement(tagName) {
+function tsCreateElement(...tagNames) {
     const createElement = ts.factory.createPropertyAccessExpression(
     /* expression */ ts.factory.createIdentifier('document'), 'createElement');
+    let arg;
+    if (tagNames.length === 1) {
+        // If there's only one tag name, we can pass it in directly.
+        arg = ts.factory.createStringLiteral(tagNames[0]);
+    }
+    else {
+        // If there's more than one name, we have to generate a union of all the tag names. To do so,
+        // create an expression in the form of `null! as 'tag-1' | 'tag-2' | 'tag-3'`. This allows
+        // TypeScript to infer the type as a union of the differnet tags.
+        const assertedNullExpression = ts.factory.createNonNullExpression(ts.factory.createNull());
+        const type = ts.factory.createUnionTypeNode(tagNames.map((tag) => ts.factory.createLiteralTypeNode(ts.factory.createStringLiteral(tag))));
+        arg = ts.factory.createAsExpression(assertedNullExpression, type);
+    }
     return ts.factory.createCallExpression(
     /* expression */ createElement, 
     /* typeArguments */ undefined, 
-    /* argumentsArray */ [ts.factory.createStringLiteral(tagName)]);
+    /* argumentsArray */ [arg]);
 }
 /**
  * Create a `ts.VariableStatement` which declares a variable without explicit initialization.
@@ -42528,6 +42735,353 @@ class TypeParameterEmitter {
     }
 }
 
+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+/**
+ * Comment attached to an AST node that serves as a guard to distinguish nodes
+ * used for type checking host bindings from ones used for templates.
+ */
+const GUARD_COMMENT_TEXT = 'hostBindingsBlockGuard';
+/**
+ * Creates an AST node that represents the host element of a directive.
+ * Can return null if there are no valid bindings to be checked.
+ * @param type Whether the host element is for a directive or a component.
+ * @param selector Selector of the directive.
+ * @param sourceNode Class declaration for the directive.
+ * @param literal `host` object literal from the decorator.
+ * @param bindingDecorators `HostBinding` decorators discovered on the node.
+ * @param listenerDecorators `HostListener` decorators discovered on the node.
+ */
+function createHostElement(type, selector, sourceNode, literal, bindingDecorators, listenerDecorators) {
+    const bindings = [];
+    const listeners = [];
+    let parser = null;
+    if (literal !== null) {
+        for (const prop of literal.properties) {
+            // We only support type checking of static bindings.
+            if (ts.isPropertyAssignment(prop) &&
+                ts.isStringLiteralLike(prop.initializer) &&
+                isStaticName(prop.name)) {
+                parser ??= makeBindingParser();
+                createNodeFromHostLiteralProperty(prop, parser, bindings, listeners);
+            }
+        }
+    }
+    for (const decorator of bindingDecorators) {
+        createNodeFromBindingDecorator(decorator, bindings);
+    }
+    for (const decorator of listenerDecorators) {
+        parser ??= makeBindingParser();
+        createNodeFromListenerDecorator(decorator, parser, listeners);
+    }
+    // The element will be a no-op if there are no bindings.
+    if (bindings.length === 0 && listeners.length === 0) {
+        return null;
+    }
+    const tagNames = [];
+    if (selector !== null) {
+        const parts = CssSelector.parse(selector);
+        for (const part of parts) {
+            if (part.element !== null) {
+                tagNames.push(part.element);
+            }
+        }
+    }
+    // If none of the selectors have a tag name, fall back to `ng-component`/`ng-directive`.
+    // This is how the runtime handles components without tag names as well.
+    if (tagNames.length === 0) {
+        tagNames.push(`ng-${type}`);
+    }
+    return new HostElement(tagNames, bindings, listeners, createSourceSpan(sourceNode.name));
+}
+/**
+ * Creates an AST node that can be used as a guard in `if` statements to distinguish TypeScript
+ * nodes used for checking host bindings from ones used for checking templates.
+ */
+function createHostBindingsBlockGuard() {
+    // Note that the comment text is quite generic. This doesn't really matter, because it is
+    // used only inside a TCB and there's no way for users to produce a comment there.
+    // `true /*hostBindings*/`.
+    const trueExpr = ts.addSyntheticTrailingComment(ts.factory.createTrue(), ts.SyntaxKind.MultiLineCommentTrivia, GUARD_COMMENT_TEXT);
+    // Wrap the expression in parentheses to ensure that the comment is attached to the correct node.
+    return ts.factory.createParenthesizedExpression(trueExpr);
+}
+/**
+ * Determines if a given node is a guard that indicates that descendant nodes are used to check
+ * host bindings.
+ */
+function isHostBindingsBlockGuard(node) {
+    if (!ts.isIfStatement(node)) {
+        return false;
+    }
+    // Needs to be kept in sync with `createHostBindingsMarker`.
+    const expr = node.expression;
+    if (!ts.isParenthesizedExpression(expr) || expr.expression.kind !== ts.SyntaxKind.TrueKeyword) {
+        return false;
+    }
+    const text = expr.getSourceFile().text;
+    return (ts.forEachTrailingCommentRange(text, expr.expression.getEnd(), (pos, end, kind) => kind === ts.SyntaxKind.MultiLineCommentTrivia &&
+        text.substring(pos + 2, end - 2) === GUARD_COMMENT_TEXT) || false);
+}
+/**
+ * If possible, creates and tracks the relevant AST node for a binding declared
+ * through a property on the `host` literal.
+ * @param prop Property to parse.
+ * @param parser Binding parser used to parse the expressions.
+ * @param bindings Array tracking the bound attributes of the host element.
+ * @param listeners Array tracking the event listeners of the host element.
+ */
+function createNodeFromHostLiteralProperty(property, parser, bindings, listeners) {
+    // TODO(crisbeto): surface parsing errors here, because currently they just get ignored.
+    // They'll still get reported when the handler tries to parse the bindings, but here we
+    // can highlight the nodes more accurately.
+    const { name, initializer } = property;
+    if (name.text.startsWith('[') && name.text.endsWith(']')) {
+        const { attrName, type } = inferBoundAttribute(name.text.slice(1, -1));
+        const valueSpan = createStaticExpressionSpan(initializer);
+        const ast = parser.parseBinding(initializer.text, true, valueSpan, valueSpan.start.offset);
+        if (ast.errors.length > 0) {
+            return; // See TODO above.
+        }
+        fixupSpans(ast, initializer);
+        bindings.push(new BoundAttribute(attrName, type, 0, ast, null, createSourceSpan(property), createStaticExpressionSpan(name), valueSpan, undefined));
+    }
+    else if (name.text.startsWith('(') && name.text.endsWith(')')) {
+        const events = [];
+        parser.parseEvent(name.text.slice(1, -1), initializer.text, false, createSourceSpan(property), createStaticExpressionSpan(initializer), [], events, createStaticExpressionSpan(name));
+        if (events.length === 0 || events[0].handler.errors.length > 0) {
+            return; // See TODO above.
+        }
+        fixupSpans(events[0].handler, initializer);
+        listeners.push(BoundEvent.fromParsedEvent(events[0]));
+    }
+}
+/**
+ * If possible, creates and tracks a bound attribute node from a `HostBinding` decorator.
+ * @param decorator Decorator from which to create the node.
+ * @param bindings Array tracking the bound attributes of the host element.
+ */
+function createNodeFromBindingDecorator(decorator, bindings) {
+    // We only support decorators that are being called.
+    if (!ts.isCallExpression(decorator.expression)) {
+        return;
+    }
+    const args = decorator.expression.arguments;
+    const property = decorator.parent;
+    let nameNode = null;
+    let propertyName = null;
+    if (property && ts.isPropertyDeclaration(property) && isStaticName(property.name)) {
+        propertyName = property.name;
+    }
+    // The first parameter is optional. If omitted, the name
+    // of the class member is used as the property.
+    if (args.length === 0) {
+        nameNode = propertyName;
+    }
+    else if (ts.isStringLiteralLike(args[0])) {
+        nameNode = args[0];
+    }
+    else {
+        return;
+    }
+    if (nameNode === null || propertyName === null) {
+        return;
+    }
+    // We can't synthesize a fake expression here and pass it through the binding parser, because
+    // it constructs all the spans based on the source code origin and they aren't easily mappable
+    // back to the source. E.g. `@HostBinding('foo') id = '123'` in source code would look
+    // something like `[foo]="this.id"` in the AST. Instead we construct the expressions
+    // manually here. Note that we use a dummy span with -1/-1 as offsets, because it isn't
+    // used for type checking and constructing it accurately would take some effort.
+    const span = new ParseSpan(-1, -1);
+    const propertyStart = property.getStart();
+    const receiver = new ThisReceiver(span, new AbsoluteSourceSpan(propertyStart, propertyStart));
+    const nameSpan = new AbsoluteSourceSpan(propertyName.getStart(), propertyName.getEnd());
+    const read = ts.isIdentifier(propertyName)
+        ? new PropertyRead(span, nameSpan, nameSpan, receiver, propertyName.text)
+        : new KeyedRead(span, nameSpan, receiver, new LiteralPrimitive(span, nameSpan, propertyName.text));
+    const { attrName, type } = inferBoundAttribute(nameNode.text);
+    bindings.push(new BoundAttribute(attrName, type, 0, read, null, createSourceSpan(decorator), createStaticExpressionSpan(nameNode), createSourceSpan(decorator), undefined));
+}
+/**
+ * If possible, creates and tracks a bound event node from a `HostBinding` decorator.
+ * @param decorator Decorator from which to create the node.
+ * @param parser Binding parser used to parse the expressions.
+ * @param bindings Array tracking the bound events of the host element.
+ */
+function createNodeFromListenerDecorator(decorator, parser, listeners) {
+    // We only support decorators that are being called with at least one argument.
+    if (!ts.isCallExpression(decorator.expression) || decorator.expression.arguments.length === 0) {
+        return;
+    }
+    const args = decorator.expression.arguments;
+    const method = decorator.parent;
+    // Only handle decorators that are statically analyzable.
+    if (!method ||
+        !ts.isMethodDeclaration(method) ||
+        !isStaticName(method.name) ||
+        !ts.isStringLiteralLike(args[0])) {
+        return;
+    }
+    // We can't synthesize a fake expression here and pass it through the binding parser, because
+    // it constructs all the spans based on the source code origin and they aren't easily mappable
+    // back to the source. E.g. `@HostListener('foo') handleFoo() {}` in source code would look
+    // something like `(foo)="handleFoo()"` in the AST. Instead we construct the expressions
+    // manually here. Note that we use a dummy span with -1/-1 as offsets, because it isn't
+    // used for type checking and constructing it accurately would take some effort.
+    const span = new ParseSpan(-1, -1);
+    const argNodes = [];
+    const methodStart = method.getStart();
+    const methodReceiver = new ThisReceiver(span, new AbsoluteSourceSpan(methodStart, methodStart));
+    const nameSpan = new AbsoluteSourceSpan(method.name.getStart(), method.name.getEnd());
+    const receiver = ts.isIdentifier(method.name)
+        ? new PropertyRead(span, nameSpan, nameSpan, methodReceiver, method.name.text)
+        : new KeyedRead(span, nameSpan, methodReceiver, new LiteralPrimitive(span, nameSpan, method.name.text));
+    if (args.length > 1 && ts.isArrayLiteralExpression(args[1])) {
+        for (const expr of args[1].elements) {
+            // If the parameter is a static string, parse it using the binding parser since it can be any
+            // expression, otherwise treat it as `any` so the rest of the parameters can be checked.
+            if (ts.isStringLiteralLike(expr)) {
+                const span = createStaticExpressionSpan(expr);
+                const ast = parser.parseBinding(expr.text, true, span, span.start.offset);
+                fixupSpans(ast, expr);
+                argNodes.push(ast);
+            }
+            else {
+                // Represents `$any(0)`. We need to construct it manually in order to set the right spans.
+                const expressionSpan = new AbsoluteSourceSpan(expr.getStart(), expr.getEnd());
+                const anyRead = new PropertyRead(span, expressionSpan, expressionSpan, new ImplicitReceiver(span, expressionSpan), '$any');
+                const anyCall = new Call(span, expressionSpan, anyRead, [new LiteralPrimitive(span, expressionSpan, 0)], expressionSpan);
+                argNodes.push(anyCall);
+            }
+        }
+    }
+    const callNode = new Call(span, nameSpan, receiver, argNodes, span);
+    const eventNameNode = args[0];
+    const [eventName, phase] = eventNameNode.text.split('.');
+    listeners.push(new BoundEvent(eventName, eventName.startsWith('@') ? exports.ParsedEventType.Animation : exports.ParsedEventType.Regular, callNode, null, phase, createSourceSpan(decorator), createSourceSpan(decorator), createStaticExpressionSpan(eventNameNode)));
+}
+/**
+ * Infers the attribute name and binding type of a bound attribute based on its raw name.
+ * @param name Name from which to infer the information.
+ */
+function inferBoundAttribute(name) {
+    const attrPrefix = 'attr.';
+    const classPrefix = 'class.';
+    const stylePrefix = 'style.';
+    const animationPrefix = '@';
+    let attrName;
+    let type;
+    // Infer the binding type based on the prefix.
+    if (name.startsWith(attrPrefix)) {
+        attrName = name.slice(attrPrefix.length);
+        type = exports.BindingType.Attribute;
+    }
+    else if (name.startsWith(classPrefix)) {
+        attrName = name.slice(classPrefix.length);
+        type = exports.BindingType.Class;
+    }
+    else if (name.startsWith(stylePrefix)) {
+        attrName = name.slice(stylePrefix.length);
+        type = exports.BindingType.Style;
+    }
+    else if (name.startsWith(animationPrefix)) {
+        attrName = name.slice(animationPrefix.length);
+        type = exports.BindingType.Animation;
+    }
+    else {
+        attrName = name;
+        type = exports.BindingType.Property;
+    }
+    return { attrName, type };
+}
+/** Checks whether the specified node is a static name node. */
+function isStaticName(node) {
+    return ts.isIdentifier(node) || ts.isStringLiteralLike(node);
+}
+/** Creates a `ParseSourceSpan` pointing to a static expression AST node's source. */
+function createStaticExpressionSpan(node) {
+    const span = createSourceSpan(node);
+    // Offset by one on both sides to skip over the quotes.
+    if (ts.isStringLiteralLike(node)) {
+        span.fullStart = span.fullStart.moveBy(1);
+        span.start = span.start.moveBy(1);
+        span.end = span.end.moveBy(-1);
+    }
+    return span;
+}
+/**
+ * Adjusts the spans of a parsed AST so that they're appropriate for a host bindings context.
+ * @param ast The parsed AST that may need to be adjusted.
+ * @param initializer TypeScript node from which the source of the AST was extracted.
+ */
+function fixupSpans(ast, initializer) {
+    // When parsing the initializer as a property/event binding, we use `.text` which excludes escaped
+    // quotes and is generally what we want, because preserving them would result in a parser error,
+    // however it has the downside in that the spans of the expressions following the escaped
+    // characters are no longer accurate relative to the source code. The more escaped characters
+    // there are before a node, the more inaccurate its span will be. If we detect cases like that,
+    // we override the spans of all nodes following the escaped string to point to the entire
+    // initializer string so that we don't surface diagnostics with mangled spans. This isn't ideal,
+    // but is likely rare in user code. Some workarounds that were attempted and ultimately discarded:
+    // 1. Counting the number of escaped strings before a node and adjusting its span accordingly -
+    // There's a prototype of this approach in https://github.com/crisbeto/angular/commit/1eb92353784a609f6be7e6653ae5a9faef549e6a
+    // It works for the most part, but is complex and somewhat brittle, because it's not just the
+    // escaped literals that need to be updated, but also any nodes _after_ them and any nodes
+    // _containing_ them which gets increasingly complex with more complicated ASTs.
+    // 2. Replacing escape characters with whitespaces, for example `\'foo\' + 123` would become
+    // ` 'foo ' + 123` - this appears to produce accurate ASTs for some simpler use cases, but has
+    // the potential of either changing the user's code into something that's no longer parseable or
+    // causing type checking errors (e.g. the typings might require the exact string 'foo').
+    // 3. Passing the raw text (e.g. `initializer.getText().slice(1, -1)`) into the binding parser -
+    // This will preserve the right mappings, but can lead to parsing errors, because some of the
+    // strings won't have to be escaped anymore. We could add a mode to the parser that allows it to
+    // recover from such cases, but it'll introduce more complexity that we may not want to take on.
+    // 4. Constructing some sort of string like `<host ${name.getText()}=${initializer.getText()}/>`,
+    // passing it through the HTML parser and extracting the first attribute from it - wasn't explored
+    // much, but likely has the same issues as approach #3.
+    const escapeIndex = initializer.getText().indexOf('\\', 1);
+    if (escapeIndex > -1) {
+        const newSpan = new ParseSpan(0, initializer.getWidth());
+        const newSourceSpan = new AbsoluteSourceSpan(initializer.getStart(), initializer.getEnd());
+        ast.visit(new ReplaceSpanVisitor(escapeIndex, newSpan, newSourceSpan));
+    }
+}
+/**
+ * Visitor that replaces the spans of all nodes with new ones,
+ * if they're defined after a specific index.
+ */
+class ReplaceSpanVisitor extends RecursiveAstVisitor {
+    afterIndex;
+    overrideSpan;
+    overrideSourceSpan;
+    constructor(afterIndex, overrideSpan, overrideSourceSpan) {
+        super();
+        this.afterIndex = afterIndex;
+        this.overrideSpan = overrideSpan;
+        this.overrideSourceSpan = overrideSourceSpan;
+    }
+    visit(ast) {
+        // Only nodes after the index need to be adjusted, but all nodes should be visited.
+        if (ast.span.start >= this.afterIndex || ast.span.end >= this.afterIndex) {
+            ast.span = this.overrideSpan;
+            ast.sourceSpan = this.overrideSourceSpan;
+            if (ast instanceof ASTWithName) {
+                ast.nameSpan = this.overrideSourceSpan;
+            }
+            if (ast instanceof Call || ast instanceof SafeCall) {
+                ast.argumentSpan = this.overrideSourceSpan;
+            }
+        }
+        super.visit(ast);
+    }
+}
+
 /**
  * External modules/identifiers that always should exist for type check
  * block files.
@@ -42596,18 +43150,39 @@ function getSourceMapping(shimSf, position, resolver, isDiagnosticRequest) {
     if (sourceLocation === null) {
         return null;
     }
-    const mapping = resolver.getTemplateSourceMapping(sourceLocation.id);
+    if (isInHostBindingTcb(node)) {
+        const hostSourceMapping = resolver.getHostBindingsMapping(sourceLocation.id);
+        const span = resolver.toHostParseSourceSpan(sourceLocation.id, sourceLocation.span);
+        if (span === null) {
+            return null;
+        }
+        return { sourceLocation, sourceMapping: hostSourceMapping, span };
+    }
     const span = resolver.toTemplateParseSourceSpan(sourceLocation.id, sourceLocation.span);
     if (span === null) {
         return null;
     }
     // TODO(atscott): Consider adding a context span by walking up from `node` until we get a
     // different span.
-    return { sourceLocation, sourceMapping: mapping, span };
+    return {
+        sourceLocation,
+        sourceMapping: resolver.getTemplateSourceMapping(sourceLocation.id),
+        span,
+    };
+}
+function isInHostBindingTcb(node) {
+    let current = node;
+    while (current && !ts.isFunctionDeclaration(current)) {
+        if (isHostBindingsBlockGuard(current)) {
+            return true;
+        }
+        current = current.parent;
+    }
+    return false;
 }
 function findTypeCheckBlock(file, id, isDiagnosticRequest) {
     for (const stmt of file.statements) {
-        if (ts.isFunctionDeclaration(stmt) && getTemplateId(stmt, file, isDiagnosticRequest) === id) {
+        if (ts.isFunctionDeclaration(stmt) && getTypeCheckId(stmt, file, isDiagnosticRequest) === id) {
             return stmt;
         }
     }
@@ -42630,7 +43205,7 @@ function findSourceLocation(node, sourceFile, isDiagnosticsRequest) {
         if (span !== null) {
             // Once the positional information has been extracted, search further up the TCB to extract
             // the unique id that is attached with the TCB's function declaration.
-            const id = getTemplateId(node, sourceFile, isDiagnosticsRequest);
+            const id = getTypeCheckId(node, sourceFile, isDiagnosticsRequest);
             if (id === null) {
                 return null;
             }
@@ -42640,7 +43215,7 @@ function findSourceLocation(node, sourceFile, isDiagnosticsRequest) {
     }
     return null;
 }
-function getTemplateId(node, sourceFile, isDiagnosticRequest) {
+function getTypeCheckId(node, sourceFile, isDiagnosticRequest) {
     // Walk up to the function declaration of the TCB, the file information is attached there.
     while (!ts.isFunctionDeclaration(node)) {
         if (hasIgnoreForDiagnosticsMarker(node, sourceFile) && isDiagnosticRequest) {
@@ -43896,7 +44471,6 @@ var TcbGenericContextBehavior;
  */
 function generateTypeCheckBlock(env, ref, name, meta, domSchemaChecker, oobRecorder, genericContextBehavior) {
     const tcb = new Context(env, domSchemaChecker, oobRecorder, meta.id, meta.boundTarget, meta.pipes, meta.schemas, meta.isStandalone, meta.preserveWhitespaces);
-    const scope = Scope.forNodes(tcb, null, null, tcb.boundTarget.target.template, /* guard */ null);
     const ctxRawType = env.referenceType(ref);
     if (!ts.isTypeReferenceNode(ctxRawType)) {
         throw new Error(`Expected TypeReferenceNode when referencing the ctx param for ${ref.debugName}`);
@@ -43923,13 +44497,19 @@ function generateTypeCheckBlock(env, ref, name, meta, domSchemaChecker, oobRecor
         }
     }
     const paramList = [tcbThisParam(ctxRawType.typeName, typeArguments)];
-    const scopeStatements = scope.render();
-    const innerBody = ts.factory.createBlock([...env.getPreludeStatements(), ...scopeStatements]);
-    // Wrap the body in an "if (true)" expression. This is unnecessary but has the effect of causing
-    // the `ts.Printer` to format the type-check block nicely.
-    const body = ts.factory.createBlock([
-        ts.factory.createIfStatement(ts.factory.createTrue(), innerBody, undefined),
-    ]);
+    const statements = [];
+    // Add the template type checking code.
+    if (tcb.boundTarget.target.template !== undefined) {
+        const templateScope = Scope.forNodes(tcb, null, null, tcb.boundTarget.target.template, 
+        /* guard */ null);
+        statements.push(renderBlockStatements(env, templateScope, ts.factory.createTrue()));
+    }
+    // Add the host bindings type checking code.
+    if (tcb.boundTarget.target.host !== undefined) {
+        const hostScope = Scope.forNodes(tcb, null, tcb.boundTarget.target.host, null, null);
+        statements.push(renderBlockStatements(env, hostScope, createHostBindingsBlockGuard()));
+    }
+    const body = ts.factory.createBlock(statements);
     const fnDecl = ts.factory.createFunctionDeclaration(
     /* modifiers */ undefined, 
     /* asteriskToken */ undefined, 
@@ -43941,6 +44521,14 @@ function generateTypeCheckBlock(env, ref, name, meta, domSchemaChecker, oobRecor
     addTypeCheckId(fnDecl, meta.id);
     return fnDecl;
 }
+function renderBlockStatements(env, scope, wrapperExpression) {
+    const scopeStatements = scope.render();
+    const innerBody = ts.factory.createBlock([...env.getPreludeStatements(), ...scopeStatements]);
+    // Wrap the body in an if statement. This serves two purposes:
+    // 1. It allows us to distinguish between the sections of the block (e.g. host or template).
+    // 2. It allows the `ts.Printer` to produce better-looking output.
+    return ts.factory.createIfStatement(wrapperExpression, innerBody);
+}
 /**
  * A code generation operation that's involved in the construction of a Type Check Block.
  *
@@ -44693,20 +45281,28 @@ class TcbDomSchemaCheckerOp extends TcbOp {
         return false;
     }
     execute() {
-        if (this.checkElement) {
-            this.tcb.domSchemaChecker.checkElement(this.tcb.id, this.element, this.tcb.schemas, this.tcb.hostIsStandalone);
+        const element = this.element;
+        const isTemplateElement = element instanceof Element$1;
+        const bindings = isTemplateElement ? element.inputs : element.bindings;
+        if (this.checkElement && isTemplateElement) {
+            this.tcb.domSchemaChecker.checkElement(this.tcb.id, element, this.tcb.schemas, this.tcb.hostIsStandalone);
         }
         // TODO(alxhub): this could be more efficient.
-        for (const binding of this.element.inputs) {
+        for (const binding of bindings) {
             const isPropertyBinding = binding.type === exports.BindingType.Property || binding.type === exports.BindingType.TwoWay;
-            if (isPropertyBinding && this.claimedInputs.has(binding.name)) {
+            if (isPropertyBinding && this.claimedInputs?.has(binding.name)) {
                 // Skip this binding as it was claimed by a directive.
                 continue;
             }
             if (isPropertyBinding && binding.name !== 'style' && binding.name !== 'class') {
                 // A direct binding to a property.
                 const propertyName = ATTR_TO_PROP.get(binding.name) ?? binding.name;
-                this.tcb.domSchemaChecker.checkProperty(this.tcb.id, this.element, propertyName, binding.sourceSpan, this.tcb.schemas, this.tcb.hostIsStandalone);
+                if (isTemplateElement) {
+                    this.tcb.domSchemaChecker.checkTemplateElementProperty(this.tcb.id, element, propertyName, binding.sourceSpan, this.tcb.schemas, this.tcb.hostIsStandalone);
+                }
+                else {
+                    this.tcb.domSchemaChecker.checkHostElementProperty(this.tcb.id, element, propertyName, binding.keySpan, this.tcb.schemas);
+                }
             }
         }
         return null;
@@ -44821,6 +45417,30 @@ class TcbControlFlowContentProjectionOp extends TcbOp {
         return false;
     }
 }
+/**
+ * A `TcbOp` which creates an expression for a the host element of a directive.
+ *
+ * Executing this operation returns a reference to the element variable.
+ */
+class TcbHostElementOp extends TcbOp {
+    tcb;
+    scope;
+    element;
+    optional = true;
+    constructor(tcb, scope, element) {
+        super();
+        this.tcb = tcb;
+        this.scope = scope;
+        this.element = element;
+    }
+    execute() {
+        const id = this.tcb.allocateId();
+        const initializer = tsCreateElement(...this.element.tagNames);
+        addParseSpanInfo(initializer, this.element.sourceSpan);
+        this.scope.addStatement(tsCreateVariable(id, initializer));
+        return id;
+    }
+}
 /**
  * Mapping between attributes names that don't correspond to their element property names.
  * Note: this mapping has to be kept in sync with the equally named mapping in the runtime.
@@ -44846,13 +45466,15 @@ const ATTR_TO_PROP = new Map(Object.entries({
 class TcbUnclaimedInputsOp extends TcbOp {
     tcb;
     scope;
-    element;
+    inputs;
+    target;
     claimedInputs;
-    constructor(tcb, scope, element, claimedInputs) {
+    constructor(tcb, scope, inputs, target, claimedInputs) {
         super();
         this.tcb = tcb;
         this.scope = scope;
-        this.element = element;
+        this.inputs = inputs;
+        this.target = target;
         this.claimedInputs = claimedInputs;
     }
     get optional() {
@@ -44863,9 +45485,9 @@ class TcbUnclaimedInputsOp extends TcbOp {
         // the element itself.
         let elId = null;
         // TODO(alxhub): this could be more efficient.
-        for (const binding of this.element.inputs) {
+        for (const binding of this.inputs) {
             const isPropertyBinding = binding.type === exports.BindingType.Property || binding.type === exports.BindingType.TwoWay;
-            if (isPropertyBinding && this.claimedInputs.has(binding.name)) {
+            if (isPropertyBinding && this.claimedInputs?.has(binding.name)) {
                 // Skip this binding as it was claimed by a directive.
                 continue;
             }
@@ -44873,7 +45495,7 @@ class TcbUnclaimedInputsOp extends TcbOp {
             if (this.tcb.env.config.checkTypeOfDomBindings && isPropertyBinding) {
                 if (binding.name !== 'style' && binding.name !== 'class') {
                     if (elId === null) {
-                        elId = this.scope.resolve(this.element);
+                        elId = this.scope.resolve(this.target);
                     }
                     // A direct binding to a property.
                     const propertyName = ATTR_TO_PROP.get(binding.name) ?? binding.name;
@@ -44973,13 +45595,17 @@ class TcbDirectiveOutputsOp extends TcbOp {
 class TcbUnclaimedOutputsOp extends TcbOp {
     tcb;
     scope;
-    element;
+    target;
+    outputs;
+    inputs;
     claimedOutputs;
-    constructor(tcb, scope, element, claimedOutputs) {
+    constructor(tcb, scope, target, outputs, inputs, claimedOutputs) {
         super();
         this.tcb = tcb;
         this.scope = scope;
-        this.element = element;
+        this.target = target;
+        this.outputs = outputs;
+        this.inputs = inputs;
         this.claimedOutputs = claimedOutputs;
     }
     get optional() {
@@ -44988,14 +45614,16 @@ class TcbUnclaimedOutputsOp extends TcbOp {
     execute() {
         let elId = null;
         // TODO(alxhub): this could be more efficient.
-        for (const output of this.element.outputs) {
-            if (this.claimedOutputs.has(output.name)) {
+        for (const output of this.outputs) {
+            if (this.claimedOutputs?.has(output.name)) {
                 // Skip this event handler as it was claimed by a directive.
                 continue;
             }
-            if (this.tcb.env.config.checkTypeOfOutputEvents && output.name.endsWith('Change')) {
+            if (this.tcb.env.config.checkTypeOfOutputEvents &&
+                this.inputs !== null &&
+                output.name.endsWith('Change')) {
                 const inputName = output.name.slice(0, -6);
-                if (checkSplitTwoWayBinding(inputName, output, this.element.inputs, this.tcb)) {
+                if (checkSplitTwoWayBinding(inputName, output, this.inputs, this.tcb)) {
                     // Skip this event handler as the error was already handled.
                     continue;
                 }
@@ -45016,7 +45644,7 @@ class TcbUnclaimedOutputsOp extends TcbOp {
                 // base `Event` type.
                 const handler = tcbCreateEventHandler(output, this.tcb, this.scope, 0 /* EventParamType.Infer */);
                 if (elId === null) {
-                    elId = this.scope.resolve(this.element);
+                    elId = this.scope.resolve(this.target);
                 }
                 const propertyAccess = ts.factory.createPropertyAccessExpression(elId, 'addEventListener');
                 addParseSpanInfo(propertyAccess, output.keySpan);
@@ -45406,6 +46034,10 @@ class Scope {
      * A map of `TmplAstElement`s to the index of their `TcbElementOp` in the `opQueue`
      */
     elementOpMap = new Map();
+    /**
+     * A map of `TmplAstHostElement`s to the index of their `TcbHostElementOp` in the `opQueue`
+     */
+    hostElementOpMap = new Map();
     /**
      * A map of maps which tracks the index of `TcbDirectiveCtorOp`s in the `opQueue` for each
      * directive on a `TmplAstElement` or `TmplAstTemplate` node.
@@ -45508,8 +46140,13 @@ class Scope {
                 this.registerVariable(scope, variable, new TcbBlockImplicitVariableOp(tcb, scope, type, variable));
             }
         }
-        for (const node of children) {
-            scope.appendNode(node);
+        else if (scopedNode instanceof HostElement) {
+            scope.appendNode(scopedNode);
+        }
+        if (children !== null) {
+            for (const node of children) {
+                scope.appendNode(node);
+            }
         }
         // Once everything is registered, we need to check if there are `@let`
         // declarations that conflict with other local symbols defined after them.
@@ -45669,6 +46306,9 @@ class Scope {
             // Resolving the DOM node of an element in this template.
             return this.resolveOp(this.elementOpMap.get(ref));
         }
+        else if (ref instanceof HostElement && this.hostElementOpMap.has(ref)) {
+            return this.resolveOp(this.hostElementOpMap.get(ref));
+        }
         else {
             return null;
         }
@@ -45764,6 +46404,11 @@ class Scope {
                 this.letDeclOpMap.set(node.name, { opIndex, node });
             }
         }
+        else if (node instanceof HostElement) {
+            const opIndex = this.opQueue.push(new TcbHostElementOp(this.tcb, this, node)) - 1;
+            this.hostElementOpMap.set(node, opIndex);
+            this.opQueue.push(new TcbUnclaimedInputsOp(this.tcb, this, node.bindings, node, null), new TcbUnclaimedOutputsOp(this.tcb, this, node, node.listeners, null, null), new TcbDomSchemaCheckerOp(this.tcb, node, false, null));
+        }
     }
     appendChildren(node) {
         for (const child of node.children) {
@@ -45798,8 +46443,7 @@ class Scope {
             // If there are no directives, then all inputs are unclaimed inputs, so queue an operation
             // to add them if needed.
             if (node instanceof Element$1) {
-                this.opQueue.push(new TcbUnclaimedInputsOp(this.tcb, this, node, claimedInputs));
-                this.opQueue.push(new TcbDomSchemaCheckerOp(this.tcb, node, /* checkElement */ true, claimedInputs));
+                this.opQueue.push(new TcbUnclaimedInputsOp(this.tcb, this, node.inputs, node, claimedInputs), new TcbDomSchemaCheckerOp(this.tcb, node, /* checkElement */ true, claimedInputs));
             }
             return;
         }
@@ -45850,7 +46494,7 @@ class Scope {
                     claimedInputs.add(propertyName);
                 }
             }
-            this.opQueue.push(new TcbUnclaimedInputsOp(this.tcb, this, node, claimedInputs));
+            this.opQueue.push(new TcbUnclaimedInputsOp(this.tcb, this, node.inputs, node, claimedInputs));
             // If there are no directives which match this element, then it's a "plain" DOM element (or a
             // web component), and should be checked against the DOM schema. If any directives match,
             // we must assume that the element could be custom (either a component, or a directive like
@@ -45867,7 +46511,7 @@ class Scope {
             // If there are no directives, then all outputs are unclaimed outputs, so queue an operation
             // to add them if needed.
             if (node instanceof Element$1) {
-                this.opQueue.push(new TcbUnclaimedOutputsOp(this.tcb, this, node, claimedOutputs));
+                this.opQueue.push(new TcbUnclaimedOutputsOp(this.tcb, this, node, node.outputs, node.inputs, claimedOutputs));
             }
             return;
         }
@@ -45884,7 +46528,7 @@ class Scope {
                     claimedOutputs.add(outputProperty);
                 }
             }
-            this.opQueue.push(new TcbUnclaimedOutputsOp(this.tcb, this, node, claimedOutputs));
+            this.opQueue.push(new TcbUnclaimedOutputsOp(this.tcb, this, node, node.outputs, node.inputs, claimedOutputs));
         }
     }
     appendDeepSchemaChecks(nodes) {
@@ -46535,18 +47179,22 @@ class TypeCheckContextImpl {
      *
      * Implements `TypeCheckContext.addTemplate`.
      */
-    addDirective(ref, binder, schemas, templateContext, isStandalone) {
+    addDirective(ref, binder, schemas, templateContext, hostBindingContext, isStandalone) {
         if (!this.host.shouldCheckClass(ref.node)) {
             return;
         }
-        const fileData = this.dataForFile(ref.node.getSourceFile());
+        const sourceFile = ref.node.getSourceFile();
+        const fileData = this.dataForFile(sourceFile);
         const shimData = this.pendingShimForClass(ref.node);
         const id = fileData.sourceManager.getTypeCheckId(ref.node);
         const templateParsingDiagnostics = [];
         if (templateContext !== null && templateContext.parseErrors !== null) {
             templateParsingDiagnostics.push(...getTemplateDiagnostics(templateContext.parseErrors, id, templateContext.sourceMapping));
         }
-        const boundTarget = binder.bind({ template: templateContext?.nodes });
+        const boundTarget = binder.bind({
+            template: templateContext?.nodes,
+            host: hostBindingContext?.node,
+        });
         if (this.inlining === InliningMode.InlineOps) {
             // Get all of the directives used in the template and record inline type constructors when
             // required.
@@ -46576,6 +47224,7 @@ class TypeCheckContextImpl {
             template: templateContext?.nodes || null,
             boundTarget,
             templateParsingDiagnostics,
+            hostElement: hostBindingContext?.node ?? null,
         });
         const usedPipes = [];
         if (templateContext !== null) {
@@ -46601,6 +47250,12 @@ class TypeCheckContextImpl {
         if (templateContext !== null) {
             fileData.sourceManager.captureTemplateSource(id, templateContext.sourceMapping, templateContext.file);
         }
+        if (hostBindingContext !== null) {
+            fileData.sourceManager.captureHostBindingsMapping(id, hostBindingContext.sourceMapping, 
+            // We only support host bindings in the same file as the directive
+            // so we can get the source file from here.
+            new ParseSourceFile(sourceFile.text, sourceFile.fileName));
+        }
         const meta = {
             id,
             boundTarget,
@@ -46904,10 +47559,10 @@ function findClosestLineStartPosition(linesMap, position, low = 0, high = linesM
 }
 
 /**
- * Represents the source of a template that was processed during type-checking. This information is
- * used when translating parse offsets in diagnostics back to their original line/column location.
+ * Represents the source of code processed during type-checking. This information is used when
+ * translating parse offsets in diagnostics back to their original line/column location.
  */
-class TemplateSource {
+class Source {
     mapping;
     file;
     lineStarts = null;
@@ -46944,11 +47599,16 @@ class DirectiveSourceManager {
      * diagnostics produced for TCB code to their source location in the template.
      */
     templateSources = new Map();
+    /** Keeps track of type check IDs and the source location of their host bindings. */
+    hostBindingSources = new Map();
     getTypeCheckId(node) {
-        return getTypeCheckId(node);
+        return getTypeCheckId$1(node);
     }
     captureTemplateSource(id, mapping, file) {
-        this.templateSources.set(id, new TemplateSource(mapping, file));
+        this.templateSources.set(id, new Source(mapping, file));
+    }
+    captureHostBindingsMapping(id, mapping, file) {
+        this.hostBindingSources.set(id, new Source(mapping, file));
     }
     getTemplateSourceMapping(id) {
         if (!this.templateSources.has(id)) {
@@ -46956,6 +47616,12 @@ class DirectiveSourceManager {
         }
         return this.templateSources.get(id).mapping;
     }
+    getHostBindingsMapping(id) {
+        if (!this.hostBindingSources.has(id)) {
+            throw new Error(`Unexpected unknown type check ID: ${id}`);
+        }
+        return this.hostBindingSources.get(id).mapping;
+    }
     toTemplateParseSourceSpan(id, span) {
         if (!this.templateSources.has(id)) {
             return null;
@@ -46963,6 +47629,13 @@ class DirectiveSourceManager {
         const templateSource = this.templateSources.get(id);
         return templateSource.toParseSourceSpan(span.start, span.end);
     }
+    toHostParseSourceSpan(id, span) {
+        if (!this.hostBindingSources.has(id)) {
+            return null;
+        }
+        const source = this.hostBindingSources.get(id);
+        return source.toParseSourceSpan(span.start, span.end);
+    }
 }
 
 /**
@@ -47727,16 +48400,17 @@ class TemplateTypeCheckerImpl {
     }
     getTemplate(component, optimizeFor) {
         const { data } = this.getLatestComponentState(component, optimizeFor);
-        if (data === null) {
-            return null;
-        }
-        return data.template;
+        return data?.template ?? null;
+    }
+    getHostElement(directive, optimizeFor) {
+        const { data } = this.getLatestComponentState(directive, optimizeFor);
+        return data?.hostElement ?? null;
     }
     getUsedDirectives(component) {
-        return this.getLatestComponentState(component).data?.boundTarget.getUsedDirectives() || null;
+        return this.getLatestComponentState(component).data?.boundTarget.getUsedDirectives() ?? null;
     }
     getUsedPipes(component) {
-        return this.getLatestComponentState(component).data?.boundTarget.getUsedPipes() || null;
+        return this.getLatestComponentState(component).data?.boundTarget.getUsedPipes() ?? null;
     }
     getLatestComponentState(component, optimizeFor = exports.OptimizeFor.SingleFile) {
         switch (optimizeFor) {
@@ -47931,7 +48605,7 @@ class TemplateTypeCheckerImpl {
         this.isComplete = false;
     }
     getExpressionTarget(expression, clazz) {
-        return (this.getLatestComponentState(clazz).data?.boundTarget.getExpressionTarget(expression) || null);
+        return (this.getLatestComponentState(clazz).data?.boundTarget.getExpressionTarget(expression) ?? null);
     }
     makeTemplateDiagnostic(clazz, sourceSpan, category, errorCode, message, relatedInformation) {
         const sfPath = absoluteFromSourceFile(clazz.getSourceFile());
@@ -48607,6 +49281,7 @@ exports.createDirectiveType = createDirectiveType;
 exports.createFactoryType = createFactoryType;
 exports.createForwardRefResolver = createForwardRefResolver;
 exports.createHostDirectivesMappingArray = createHostDirectivesMappingArray;
+exports.createHostElement = createHostElement;
 exports.createInjectableType = createInjectableType;
 exports.createInjectorType = createInjectorType;
 exports.createMayBeForwardRefExpression = createMayBeForwardRefExpression;
@@ -48622,6 +49297,7 @@ exports.extraReferenceFromTypeQuery = extraReferenceFromTypeQuery;
 exports.extractDecoratorQueryMetadata = extractDecoratorQueryMetadata;
 exports.extractDirectiveMetadata = extractDirectiveMetadata;
 exports.extractDirectiveTypeCheckMeta = extractDirectiveTypeCheckMeta;
+exports.extractHostBindingResources = extractHostBindingResources;
 exports.extractMessages = extractMessages;
 exports.extractReferencesFromType = extractReferencesFromType;
 exports.findAngularDecorator = findAngularDecorator;