@angular-eslint/bundled-angular-compiler 17.2.2-alpha.5 → 17.2.2-alpha.7

package/dist/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 /**
- * @license Angular v17.1.0
+ * @license Angular v17.3.0
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -2238,6 +2238,13 @@ class ConstantPool {
         this.literals = new Map();
         this.literalFactories = new Map();
         this.sharedConstants = new Map();
+        /**
+         * Constant pool also tracks claimed names from {@link uniqueName}.
+         * This is useful to avoid collisions if variables are intended to be
+         * named a certain way- but may conflict. We wouldn't want to always suffix
+         * them with unique numbers.
+         */
+        this._claimedNames = new Map();
         this.nextNameIndex = 0;
     }
     getConstLiteral(literal, forceShared) {
@@ -2360,14 +2367,17 @@ class ConstantPool {
         return { literalFactory, literalFactoryArguments };
     }
     /**
-     * Produce a unique name.
+     * Produce a unique name in the context of this pool.
      *
      * The name might be unique among different prefixes if any of the prefixes end in
      * a digit so the prefix should be a constant string (not based on user input) and
      * must not end in a digit.
      */
-    uniqueName(prefix) {
-        return `${prefix}${this.nextNameIndex++}`;
+    uniqueName(name, alwaysIncludeSuffix = true) {
+        const count = this._claimedNames.get(name) ?? 0;
+        const result = count === 0 && !alwaysIncludeSuffix ? `${name}` : `${name}${count}`;
+        this._claimedNames.set(name, count + 1);
+        return result;
     }
     freshName() {
         return this.uniqueName(CONSTANT_PREFIX);
@@ -2630,6 +2640,14 @@ class Identifiers {
     static { this.viewQuery = { name: 'ɵɵviewQuery', moduleName: CORE }; }
     static { this.loadQuery = { name: 'ɵɵloadQuery', moduleName: CORE }; }
     static { this.contentQuery = { name: 'ɵɵcontentQuery', moduleName: CORE }; }
+    // Signal queries
+    static { this.viewQuerySignal = { name: 'ɵɵviewQuerySignal', moduleName: CORE }; }
+    static { this.contentQuerySignal = { name: 'ɵɵcontentQuerySignal', moduleName: CORE }; }
+    static { this.queryAdvance = { name: 'ɵɵqueryAdvance', moduleName: CORE }; }
+    // Two-way bindings
+    static { this.twoWayProperty = { name: 'ɵɵtwoWayProperty', moduleName: CORE }; }
+    static { this.twoWayBindingSet = { name: 'ɵɵtwoWayBindingSet', moduleName: CORE }; }
+    static { this.twoWayListener = { name: 'ɵɵtwoWayListener', moduleName: CORE }; }
     static { this.NgOnChangesFeature = { name: 'ɵɵNgOnChangesFeature', moduleName: CORE }; }
     static { this.InheritDefinitionFeature = { name: 'ɵɵInheritDefinitionFeature', moduleName: CORE }; }
     static { this.CopyDefinitionFeature = { name: 'ɵɵCopyDefinitionFeature', moduleName: CORE }; }
@@ -2659,6 +2677,7 @@ class Identifiers {
     // type-checking
     static { this.InputSignalBrandWriteType = { name: 'ɵINPUT_SIGNAL_BRAND_WRITE_TYPE', moduleName: CORE }; }
     static { this.UnwrapDirectiveSignalInputs = { name: 'ɵUnwrapDirectiveSignalInputs', moduleName: CORE }; }
+    static { this.unwrapWritableSignal = { name: 'ɵunwrapWritableSignal', moduleName: CORE }; }
 }
 
 const DASH_CASE_REGEXP = /-+([a-z0-9])/g;
@@ -4948,6 +4967,8 @@ const CHAINABLE_INSTRUCTIONS = new Set([
     Identifiers.textInterpolate8,
     Identifiers.textInterpolateV,
     Identifiers.templateCreate,
+    Identifiers.twoWayProperty,
+    Identifiers.twoWayListener,
 ]);
 /** Generates a call to a single instruction. */
 function invokeInstruction(span, reference, params) {
@@ -4958,11 +4979,11 @@ function invokeInstruction(span, reference, params) {
  *
  * A variable declaration is added to the statements the first time the allocator is invoked.
  */
-function temporaryAllocator(statements, name) {
+function temporaryAllocator(pushStatement, name) {
     let temp = null;
     return () => {
         if (!temp) {
-            statements.push(new DeclareVarStmt(TEMPORARY_NAME, undefined, DYNAMIC_TYPE));
+            pushStatement(new DeclareVarStmt(TEMPORARY_NAME, undefined, DYNAMIC_TYPE));
             temp = variable(name);
         }
         return temp;
@@ -5060,29 +5081,6 @@ function trimTrailingNulls(parameters) {
     }
     return parameters;
 }
-function getQueryPredicate(query, constantPool) {
-    if (Array.isArray(query.predicate)) {
-        let predicate = [];
-        query.predicate.forEach((selector) => {
-            // Each item in predicates array may contain strings with comma-separated refs
-            // (for ex. 'ref, ref1, ..., refN'), thus we extract individual refs and store them
-            // as separate array entities
-            const selectors = selector.split(',').map(token => literal(token.trim()));
-            predicate.push(...selectors);
-        });
-        return constantPool.getConstLiteral(literalArr(predicate), true);
-    }
-    else {
-        // The original predicate may have been wrapped in a `forwardRef()` call.
-        switch (query.predicate.forwardRef) {
-            case 0 /* ForwardRefHandling.None */:
-            case 2 /* ForwardRefHandling.Unwrapped */:
-                return query.predicate.expression;
-            case 1 /* ForwardRefHandling.Wrapped */:
-                return importExpr(Identifiers.resolveForwardRef).callFn([query.predicate.expression]);
-        }
-    }
-}
 /**
  * A representation for an object literal used during codegen of definition objects. The generic
  * type `T` allows to reference a documented type of the generated structure, such that the
@@ -5148,7 +5146,7 @@ function getAttrsForDirectiveMatching(elOrTpl) {
             }
         });
         elOrTpl.inputs.forEach(i => {
-            if (i.type === 0 /* BindingType.Property */) {
+            if (i.type === 0 /* BindingType.Property */ || i.type === 5 /* BindingType.TwoWay */) {
                 attributesMap[i.name] = '';
             }
         });
@@ -6897,10 +6895,9 @@ exports.ParsedPropertyType = void 0;
     ParsedPropertyType[ParsedPropertyType["DEFAULT"] = 0] = "DEFAULT";
     ParsedPropertyType[ParsedPropertyType["LITERAL_ATTR"] = 1] = "LITERAL_ATTR";
     ParsedPropertyType[ParsedPropertyType["ANIMATION"] = 2] = "ANIMATION";
+    ParsedPropertyType[ParsedPropertyType["TWO_WAY"] = 3] = "TWO_WAY";
 })(exports.ParsedPropertyType || (exports.ParsedPropertyType = {}));
 class ParsedEvent {
-    // Regular events have a target
-    // Animation events have a phase
     constructor(name, targetOrPhase, type, handler, sourceSpan, handlerSpan, keySpan) {
         this.name = name;
         this.targetOrPhase = targetOrPhase;
@@ -6944,32 +6941,10 @@ class EventHandlerVars {
  * used in an action binding (e.g. an event handler).
  */
 function convertActionBinding(localResolver, implicitReceiver, action, bindingId, baseSourceSpan, implicitReceiverAccesses, globals) {
-    if (!localResolver) {
-        localResolver = new DefaultLocalResolver(globals);
-    }
-    const actionWithoutBuiltins = convertPropertyBindingBuiltins({
-        createLiteralArrayConverter: (argCount) => {
-            // Note: no caching for literal arrays in actions.
-            return (args) => literalArr(args);
-        },
-        createLiteralMapConverter: (keys) => {
-            // Note: no caching for literal maps in actions.
-            return (values) => {
-                const entries = keys.map((k, i) => ({
-                    key: k.key,
-                    value: values[i],
-                    quoted: k.quoted,
-                }));
-                return literalMap(entries);
-            };
-        },
-        createPipeConverter: (name) => {
-            throw new Error(`Illegal State: Actions are not allowed to contain pipes. Pipe: ${name}`);
-        }
-    }, action);
+    localResolver ??= new DefaultLocalResolver(globals);
     const visitor = new _AstToIrVisitor(localResolver, implicitReceiver, bindingId, /* supportsInterpolation */ false, baseSourceSpan, implicitReceiverAccesses);
     const actionStmts = [];
-    flattenStatements(actionWithoutBuiltins.visit(visitor, _Mode.Statement), actionStmts);
+    flattenStatements(convertActionBuiltins(action).visit(visitor, _Mode.Statement), actionStmts);
     prependTemporaryDecls(visitor.temporaryCount, bindingId, actionStmts);
     if (visitor.usesImplicitReceiver) {
         localResolver.notifyImplicitReceiverUse();
@@ -6984,6 +6959,77 @@ function convertActionBinding(localResolver, implicitReceiver, action, bindingId
     }
     return actionStmts;
 }
+function convertAssignmentActionBinding(localResolver, implicitReceiver, action, bindingId, baseSourceSpan, implicitReceiverAccesses, globals) {
+    localResolver ??= new DefaultLocalResolver(globals);
+    const visitor = new _AstToIrVisitor(localResolver, implicitReceiver, bindingId, /* supportsInterpolation */ false, baseSourceSpan, implicitReceiverAccesses);
+    let convertedAction = convertActionBuiltins(action).visit(visitor, _Mode.Statement);
+    // This should already have been asserted in the parser, but we verify it here just in case.
+    if (!(convertedAction instanceof ExpressionStatement)) {
+        throw new Error(`Illegal state: unsupported expression in two-way action binding.`);
+    }
+    // Converts `[(ngModel)]="name"` to `twoWayBindingSet(ctx.name, $event) || (ctx.name = $event)`.
+    convertedAction = wrapAssignmentAction(convertedAction.expr).toStmt();
+    const actionStmts = [];
+    flattenStatements(convertedAction, actionStmts);
+    prependTemporaryDecls(visitor.temporaryCount, bindingId, actionStmts);
+    // Assignment events always return `$event`.
+    actionStmts.push(new ReturnStatement(EventHandlerVars.event));
+    implicitReceiverAccesses?.add(EventHandlerVars.event.name);
+    if (visitor.usesImplicitReceiver) {
+        localResolver.notifyImplicitReceiverUse();
+    }
+    return actionStmts;
+}
+function wrapAssignmentReadExpression(ast) {
+    return new ExternalExpr(Identifiers.twoWayBindingSet)
+        .callFn([ast, EventHandlerVars.event])
+        .or(ast.set(EventHandlerVars.event));
+}
+function isReadExpression$1(value) {
+    return value instanceof ReadPropExpr || value instanceof ReadKeyExpr;
+}
+function wrapAssignmentAction(ast) {
+    // The only officially supported expressions inside of a two-way binding are read expressions.
+    if (isReadExpression$1(ast)) {
+        return wrapAssignmentReadExpression(ast);
+    }
+    // However, historically the expression parser was handling two-way events by appending `=$event`
+    // to the raw string before attempting to parse it. This has led to bugs over the years (see
+    // #37809) and to unintentionally supporting unassignable events in the two-way binding. The
+    // logic below aims to emulate the old behavior while still supporting the new output format
+    // which uses `twoWayBindingSet`. Note that the generated code doesn't necessarily make sense
+    // based on what the user wrote, for example the event binding for `[(value)]="a ? b : c"`
+    // would produce `ctx.a ? ctx.b : ctx.c = $event`. We aim to reproduce what the parser used
+    // to generate before #54154.
+    if (ast instanceof BinaryOperatorExpr && isReadExpression$1(ast.rhs)) {
+        // `a && b` -> `ctx.a && twoWayBindingSet(ctx.b, $event) || (ctx.b = $event)`
+        return new BinaryOperatorExpr(ast.operator, ast.lhs, wrapAssignmentReadExpression(ast.rhs));
+    }
+    // Note: this also supports nullish coalescing expressions which
+    // would've been downleveled to ternary expressions by this point.
+    if (ast instanceof ConditionalExpr && isReadExpression$1(ast.falseCase)) {
+        // `a ? b : c` -> `ctx.a ? ctx.b : twoWayBindingSet(ctx.c, $event) || (ctx.c = $event)`
+        return new ConditionalExpr(ast.condition, ast.trueCase, wrapAssignmentReadExpression(ast.falseCase));
+    }
+    // `!!a` -> `twoWayBindingSet(ctx.a, $event) || (ctx.a = $event)`
+    // Note: previously we'd actually produce `!!(ctx.a = $event)`, but the wrapping
+    // node doesn't affect the result so we don't need to carry it over.
+    if (ast instanceof NotExpr) {
+        let expr = ast.condition;
+        while (true) {
+            if (expr instanceof NotExpr) {
+                expr = expr.condition;
+            }
+            else {
+                if (isReadExpression$1(expr)) {
+                    return wrapAssignmentReadExpression(expr);
+                }
+                break;
+            }
+        }
+    }
+    throw new Error(`Illegal state: unsupported expression in two-way action binding.`);
+}
 function convertPropertyBindingBuiltins(converterFactory, ast) {
     return convertBuiltins(converterFactory, ast);
 }
@@ -7067,6 +7113,29 @@ function convertBuiltins(converterFactory, ast) {
     const visitor = new _BuiltinAstConverter(converterFactory);
     return ast.visit(visitor);
 }
+function convertActionBuiltins(action) {
+    const converterFactory = {
+        createLiteralArrayConverter: () => {
+            // Note: no caching for literal arrays in actions.
+            return (args) => literalArr(args);
+        },
+        createLiteralMapConverter: (keys) => {
+            // Note: no caching for literal maps in actions.
+            return (values) => {
+                const entries = keys.map((k, i) => ({
+                    key: k.key,
+                    value: values[i],
+                    quoted: k.quoted,
+                }));
+                return literalMap(entries);
+            };
+        },
+        createPipeConverter: (name) => {
+            throw new Error(`Illegal State: Actions are not allowed to contain pipes. Pipe: ${name}`);
+        }
+    };
+    return convertPropertyBindingBuiltins(converterFactory, action);
+}
 function temporaryName(bindingId, temporaryNumber) {
     return `tmp_${bindingId}_${temporaryNumber}`;
 }
@@ -7809,6 +7878,10 @@ const animationKeywords = new Set([
     // `steps()` function
     'end', 'jump-both', 'jump-end', 'jump-none', 'jump-start', 'start'
 ]);
+/**
+ * The following array contains all of the CSS at-rule identifiers which are scoped.
+ */
+const scopedAtRuleIdentifiers = ['@media', '@supports', '@document', '@layer', '@container', '@scope', '@starting-style'];
 /**
  * The following class has its origin from a port of shadowCSS from webcomponents.js to TypeScript.
  * It has since diverge in many ways to tailor Angular's needs.
@@ -8296,9 +8369,7 @@ class ShadowCss {
             if (rule.selector[0] !== '@') {
                 selector = this._scopeSelector(rule.selector, scopeSelector, hostSelector);
             }
-            else if (rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
-                rule.selector.startsWith('@document') || rule.selector.startsWith('@layer') ||
-                rule.selector.startsWith('@container') || rule.selector.startsWith('@scope')) {
+            else if (scopedAtRuleIdentifiers.some(atRule => rule.selector.startsWith(atRule))) {
                 content = this._scopeSelectors(rule.content, scopeSelector, hostSelector);
             }
             else if (rule.selector.startsWith('@font-face') || rule.selector.startsWith('@page')) {
@@ -8948,46 +9019,54 @@ var OpKind;
      * An update up for a repeater.
      */
     OpKind[OpKind["Repeater"] = 35] = "Repeater";
+    /**
+     * An operation to bind an expression to the property side of a two-way binding.
+     */
+    OpKind[OpKind["TwoWayProperty"] = 36] = "TwoWayProperty";
+    /**
+     * An operation declaring the event side of a two-way binding.
+     */
+    OpKind[OpKind["TwoWayListener"] = 37] = "TwoWayListener";
     /**
      * The start of an i18n block.
      */
-    OpKind[OpKind["I18nStart"] = 36] = "I18nStart";
+    OpKind[OpKind["I18nStart"] = 38] = "I18nStart";
     /**
      * A self-closing i18n on a single element.
      */
-    OpKind[OpKind["I18n"] = 37] = "I18n";
+    OpKind[OpKind["I18n"] = 39] = "I18n";
     /**
      * The end of an i18n block.
      */
-    OpKind[OpKind["I18nEnd"] = 38] = "I18nEnd";
+    OpKind[OpKind["I18nEnd"] = 40] = "I18nEnd";
     /**
      * An expression in an i18n message.
      */
-    OpKind[OpKind["I18nExpression"] = 39] = "I18nExpression";
+    OpKind[OpKind["I18nExpression"] = 41] = "I18nExpression";
     /**
      * An instruction that applies a set of i18n expressions.
      */
-    OpKind[OpKind["I18nApply"] = 40] = "I18nApply";
+    OpKind[OpKind["I18nApply"] = 42] = "I18nApply";
     /**
      * An instruction to create an ICU expression.
      */
-    OpKind[OpKind["IcuStart"] = 41] = "IcuStart";
+    OpKind[OpKind["IcuStart"] = 43] = "IcuStart";
     /**
      * An instruction to update an ICU expression.
      */
-    OpKind[OpKind["IcuEnd"] = 42] = "IcuEnd";
+    OpKind[OpKind["IcuEnd"] = 44] = "IcuEnd";
     /**
      * An instruction representing a placeholder in an ICU expression.
      */
-    OpKind[OpKind["IcuPlaceholder"] = 43] = "IcuPlaceholder";
+    OpKind[OpKind["IcuPlaceholder"] = 45] = "IcuPlaceholder";
     /**
      * An i18n context containing information needed to generate an i18n message.
      */
-    OpKind[OpKind["I18nContext"] = 44] = "I18nContext";
+    OpKind[OpKind["I18nContext"] = 46] = "I18nContext";
     /**
      * A creation op that corresponds to i18n attributes on an element.
      */
-    OpKind[OpKind["I18nAttributes"] = 45] = "I18nAttributes";
+    OpKind[OpKind["I18nAttributes"] = 47] = "I18nAttributes";
 })(OpKind || (OpKind = {}));
 /**
  * Distinguishes different kinds of IR expressions.
@@ -9074,31 +9153,22 @@ var ExpressionKind;
      * A reference to a temporary variable.
      */
     ExpressionKind[ExpressionKind["ReadTemporaryExpr"] = 19] = "ReadTemporaryExpr";
-    /**
-     * An expression representing a sanitizer function.
-     */
-    ExpressionKind[ExpressionKind["SanitizerExpr"] = 20] = "SanitizerExpr";
-    /**
-     * An expression representing a function to create trusted values.
-     */
-    ExpressionKind[ExpressionKind["TrustedValueFnExpr"] = 21] = "TrustedValueFnExpr";
     /**
      * An expression that will cause a literal slot index to be emitted.
      */
-    ExpressionKind[ExpressionKind["SlotLiteralExpr"] = 22] = "SlotLiteralExpr";
+    ExpressionKind[ExpressionKind["SlotLiteralExpr"] = 20] = "SlotLiteralExpr";
     /**
      * A test expression for a conditional op.
      */
-    ExpressionKind[ExpressionKind["ConditionalCase"] = 23] = "ConditionalCase";
+    ExpressionKind[ExpressionKind["ConditionalCase"] = 21] = "ConditionalCase";
     /**
-     * A variable for use inside a repeater, providing one of the ambiently-available context
-     * properties ($even, $first, etc.).
+     * An expression that will be automatically extracted to the component const array.
      */
-    ExpressionKind[ExpressionKind["DerivedRepeaterVar"] = 24] = "DerivedRepeaterVar";
+    ExpressionKind[ExpressionKind["ConstCollected"] = 22] = "ConstCollected";
     /**
-     * An expression that will be automatically extracted to the component const array.
+     * Operation that sets the value of a two-way binding.
      */
-    ExpressionKind[ExpressionKind["ConstCollected"] = 25] = "ConstCollected";
+    ExpressionKind[ExpressionKind["TwoWayBindingSet"] = 23] = "TwoWayBindingSet";
 })(ExpressionKind || (ExpressionKind = {}));
 var VariableFlags;
 (function (VariableFlags) {
@@ -9142,15 +9212,6 @@ var CompatibilityMode;
     CompatibilityMode[CompatibilityMode["Normal"] = 0] = "Normal";
     CompatibilityMode[CompatibilityMode["TemplateDefinitionBuilder"] = 1] = "TemplateDefinitionBuilder";
 })(CompatibilityMode || (CompatibilityMode = {}));
-/**
- * Enumeration of the different kinds of `@defer` secondary blocks.
- */
-var DeferSecondaryKind;
-(function (DeferSecondaryKind) {
-    DeferSecondaryKind[DeferSecondaryKind["Loading"] = 0] = "Loading";
-    DeferSecondaryKind[DeferSecondaryKind["Placeholder"] = 1] = "Placeholder";
-    DeferSecondaryKind[DeferSecondaryKind["Error"] = 2] = "Error";
-})(DeferSecondaryKind || (DeferSecondaryKind = {}));
 /**
  * Enumeration of the types of attributes which can be applied to an element.
  */
@@ -9184,6 +9245,10 @@ var BindingKind;
      * Animation property bindings.
      */
     BindingKind[BindingKind["Animation"] = 6] = "Animation";
+    /**
+     * Property side of a two-way binding.
+     */
+    BindingKind[BindingKind["TwoWayProperty"] = 7] = "TwoWayProperty";
 })(BindingKind || (BindingKind = {}));
 /**
  * Enumeration of possible times i18n params can be resolved.
@@ -9196,7 +9261,7 @@ var I18nParamResolutionTime;
      */
     I18nParamResolutionTime[I18nParamResolutionTime["Creation"] = 0] = "Creation";
     /**
-     * Param is resolved during post-processing. This should be used for params who's value comes from
+     * Param is resolved during post-processing. This should be used for params whose value comes from
      * an ICU.
      */
     I18nParamResolutionTime[I18nParamResolutionTime["Postproccessing"] = 1] = "Postproccessing";
@@ -9223,7 +9288,7 @@ var I18nParamValueFlags;
 (function (I18nParamValueFlags) {
     I18nParamValueFlags[I18nParamValueFlags["None"] = 0] = "None";
     /**
-     *  This value represtents an element tag.
+     *  This value represents an element tag.
      */
     I18nParamValueFlags[I18nParamValueFlags["ElementTag"] = 1] = "ElementTag";
     /**
@@ -9374,6 +9439,21 @@ const NEW_OP = {
     prev: null,
     next: null,
 };
+
+/**
+ * Create an `InterpolationTextOp`.
+ */
+function createInterpolateTextOp(xref, interpolation, sourceSpan) {
+    return {
+        kind: OpKind.InterpolateText,
+        target: xref,
+        interpolation,
+        sourceSpan,
+        ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
+        ...TRAIT_CONSUMES_VARS,
+        ...NEW_OP,
+    };
+}
 class Interpolation {
     constructor(strings, expressions, i18nPlaceholders) {
         this.strings = strings;
@@ -9384,6 +9464,27 @@ class Interpolation {
         }
     }
 }
+/**
+ * Create a `BindingOp`, not yet transformed into a particular type of binding.
+ */
+function createBindingOp(target, kind, name, expression, unit, securityContext, isTextAttribute, isStructuralTemplateAttribute, templateKind, i18nMessage, sourceSpan) {
+    return {
+        kind: OpKind.Binding,
+        bindingKind: kind,
+        target,
+        name,
+        expression,
+        unit,
+        securityContext,
+        isTextAttribute,
+        isStructuralTemplateAttribute,
+        templateKind,
+        i18nContext: null,
+        i18nMessage,
+        sourceSpan,
+        ...NEW_OP,
+    };
+}
 /**
  * Create a `PropertyOp`.
  */
@@ -9406,6 +9507,27 @@ function createPropertyOp(target, name, expression, isAnimationTrigger, security
         ...NEW_OP,
     };
 }
+/**
+ * Create a `TwoWayPropertyOp`.
+ */
+function createTwoWayPropertyOp(target, name, expression, securityContext, isStructuralTemplateAttribute, templateKind, i18nContext, i18nMessage, sourceSpan) {
+    return {
+        kind: OpKind.TwoWayProperty,
+        target,
+        name,
+        expression,
+        securityContext,
+        sanitizer: null,
+        isStructuralTemplateAttribute,
+        templateKind,
+        i18nContext,
+        i18nMessage,
+        sourceSpan,
+        ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
+        ...TRAIT_CONSUMES_VARS,
+        ...NEW_OP,
+    };
+}
 /** Create a `StylePropOp`. */
 function createStylePropOp(xref, name, expression, unit, sourceSpan) {
     return {
@@ -9495,6 +9617,47 @@ function createAdvanceOp(delta, sourceSpan) {
         ...NEW_OP,
     };
 }
+/**
+ * Create a conditional op, which will display an embedded view according to a condtion.
+ */
+function createConditionalOp(target, targetSlot, test, conditions, sourceSpan) {
+    return {
+        kind: OpKind.Conditional,
+        target,
+        targetSlot,
+        test,
+        conditions,
+        processed: null,
+        sourceSpan,
+        contextValue: null,
+        ...NEW_OP,
+        ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
+        ...TRAIT_CONSUMES_VARS,
+    };
+}
+function createRepeaterOp(repeaterCreate, targetSlot, collection, sourceSpan) {
+    return {
+        kind: OpKind.Repeater,
+        target: repeaterCreate,
+        targetSlot,
+        collection,
+        sourceSpan,
+        ...NEW_OP,
+        ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
+    };
+}
+function createDeferWhenOp(target, expr, prefetch, sourceSpan) {
+    return {
+        kind: OpKind.DeferWhen,
+        target,
+        expr,
+        prefetch,
+        sourceSpan,
+        ...NEW_OP,
+        ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
+        ...TRAIT_CONSUMES_VARS,
+    };
+}
 /**
  * Create an i18n expression op.
  */
@@ -9742,6 +9905,31 @@ class ResetViewExpr extends ExpressionBase {
         return new ResetViewExpr(this.expr.clone());
     }
 }
+class TwoWayBindingSetExpr extends ExpressionBase {
+    constructor(target, value) {
+        super();
+        this.target = target;
+        this.value = value;
+        this.kind = ExpressionKind.TwoWayBindingSet;
+    }
+    visitExpression(visitor, context) {
+        this.target.visitExpression(visitor, context);
+        this.value.visitExpression(visitor, context);
+    }
+    isEquivalent(other) {
+        return this.target.isEquivalent(other.target) && this.value.isEquivalent(other.value);
+    }
+    isConstant() {
+        return false;
+    }
+    transformInternalExpressions(transform, flags) {
+        this.target = transformExpressionsInExpression(this.target, transform, flags);
+        this.value = transformExpressionsInExpression(this.value, transform, flags);
+    }
+    clone() {
+        return new TwoWayBindingSetExpr(this.target, this.value);
+    }
+}
 /**
  * Read of a variable declared as an `ir.VariableOp` and referenced through its `ir.XrefId`.
  */
@@ -10090,6 +10278,40 @@ class SlotLiteralExpr extends ExpressionBase {
     }
     transformInternalExpressions() { }
 }
+class ConditionalCaseExpr extends ExpressionBase {
+    /**
+     * Create an expression for one branch of a conditional.
+     * @param expr The expression to be tested for this case. Might be null, as in an `else` case.
+     * @param target The Xref of the view to be displayed if this condition is true.
+     */
+    constructor(expr, target, targetSlot, alias = null) {
+        super();
+        this.expr = expr;
+        this.target = target;
+        this.targetSlot = targetSlot;
+        this.alias = alias;
+        this.kind = ExpressionKind.ConditionalCase;
+    }
+    visitExpression(visitor, context) {
+        if (this.expr !== null) {
+            this.expr.visitExpression(visitor, context);
+        }
+    }
+    isEquivalent(e) {
+        return e instanceof ConditionalCaseExpr && e.expr === this.expr;
+    }
+    isConstant() {
+        return true;
+    }
+    clone() {
+        return new ConditionalCaseExpr(this.expr, this.target, this.targetSlot);
+    }
+    transformInternalExpressions(transform, flags) {
+        if (this.expr !== null) {
+            this.expr = transformExpressionsInExpression(this.expr, transform, flags);
+        }
+    }
+}
 class ConstCollectedExpr extends ExpressionBase {
     constructor(expr) {
         super();
@@ -10167,6 +10389,11 @@ function transformExpressionsInOp(op, transform, flags) {
             op.sanitizer =
                 op.sanitizer && transformExpressionsInExpression(op.sanitizer, transform, flags);
             break;
+        case OpKind.TwoWayProperty:
+            op.expression = transformExpressionsInExpression(op.expression, transform, flags);
+            op.sanitizer =
+                op.sanitizer && transformExpressionsInExpression(op.sanitizer, transform, flags);
+            break;
         case OpKind.I18nExpression:
             op.expression = transformExpressionsInExpression(op.expression, transform, flags);
             break;
@@ -10195,6 +10422,7 @@ function transformExpressionsInOp(op, transform, flags) {
             }
             break;
         case OpKind.Listener:
+        case OpKind.TwoWayListener:
             for (const innerOp of op.handlerOps) {
                 transformExpressionsInOp(innerOp, transform, flags | VisitorContextFlag.InChildOperation);
             }
@@ -10672,6 +10900,91 @@ const elementContainerOpKinds = new Set([
 function isElementOrContainerOp(op) {
     return elementContainerOpKinds.has(op.kind);
 }
+/**
+ * Create an `ElementStartOp`.
+ */
+function createElementStartOp(tag, xref, namespace, i18nPlaceholder, startSourceSpan, wholeSourceSpan) {
+    return {
+        kind: OpKind.ElementStart,
+        xref,
+        tag,
+        handle: new SlotHandle(),
+        attributes: null,
+        localRefs: [],
+        nonBindable: false,
+        namespace,
+        i18nPlaceholder,
+        startSourceSpan,
+        wholeSourceSpan,
+        ...TRAIT_CONSUMES_SLOT,
+        ...NEW_OP,
+    };
+}
+/**
+ * Create a `TemplateOp`.
+ */
+function createTemplateOp(xref, templateKind, tag, functionNameSuffix, namespace, i18nPlaceholder, startSourceSpan, wholeSourceSpan) {
+    return {
+        kind: OpKind.Template,
+        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,
+        attributes: null,
+        xref: primaryView,
+        handle: new SlotHandle(),
+        emptyView,
+        track,
+        trackByFn: null,
+        tag,
+        emptyTag,
+        emptyAttributes: null,
+        functionNameSuffix: 'For',
+        namespace: Namespace.HTML,
+        nonBindable: false,
+        localRefs: [],
+        decls: null,
+        vars: null,
+        varNames,
+        usesComponentInstance: false,
+        i18nPlaceholder,
+        emptyI18nPlaceholder,
+        startSourceSpan,
+        wholeSourceSpan,
+        ...TRAIT_CONSUMES_SLOT,
+        ...NEW_OP,
+        ...TRAIT_CONSUMES_VARS,
+        numSlotsUsed: emptyView === null ? 2 : 3,
+    };
+}
+/**
+ * Create an `ElementEndOp`.
+ */
+function createElementEndOp(xref, sourceSpan) {
+    return {
+        kind: OpKind.ElementEnd,
+        xref,
+        sourceSpan,
+        ...NEW_OP,
+    };
+}
 function createDisableBindingsOp(xref) {
     return {
         kind: OpKind.DisableBindings,
@@ -10686,6 +10999,62 @@ function createEnableBindingsOp(xref) {
         ...NEW_OP,
     };
 }
+/**
+ * Create a `TextOp`.
+ */
+function createTextOp(xref, initialValue, icuPlaceholder, sourceSpan) {
+    return {
+        kind: OpKind.Text,
+        xref,
+        handle: new SlotHandle(),
+        initialValue,
+        icuPlaceholder,
+        sourceSpan,
+        ...TRAIT_CONSUMES_SLOT,
+        ...NEW_OP,
+    };
+}
+/**
+ * Create a `ListenerOp`. Host bindings reuse all the listener logic.
+ */
+function createListenerOp(target, targetSlot, name, tag, handlerOps, animationPhase, eventTarget, hostListener, sourceSpan) {
+    const handlerList = new OpList();
+    handlerList.push(handlerOps);
+    return {
+        kind: OpKind.Listener,
+        target,
+        targetSlot,
+        tag,
+        hostListener,
+        name,
+        handlerOps: handlerList,
+        handlerFnName: null,
+        consumesDollarEvent: false,
+        isAnimationListener: animationPhase !== null,
+        animationPhase,
+        eventTarget,
+        sourceSpan,
+        ...NEW_OP,
+    };
+}
+/**
+ * Create a `TwoWayListenerOp`.
+ */
+function createTwoWayListenerOp(target, targetSlot, name, tag, handlerOps, sourceSpan) {
+    const handlerList = new OpList();
+    handlerList.push(handlerOps);
+    return {
+        kind: OpKind.TwoWayListener,
+        target,
+        targetSlot,
+        tag,
+        name,
+        handlerOps: handlerList,
+        handlerFnName: null,
+        sourceSpan,
+        ...NEW_OP,
+    };
+}
 function createPipeOp(xref, slot, name) {
     return {
         kind: OpKind.Pipe,
@@ -10710,6 +11079,21 @@ function createProjectionDefOp(def) {
         ...NEW_OP,
     };
 }
+function createProjectionOp(xref, selector, i18nPlaceholder, sourceSpan) {
+    return {
+        kind: OpKind.Projection,
+        xref,
+        handle: new SlotHandle(),
+        selector,
+        i18nPlaceholder,
+        projectionSlotIndex: 0,
+        attributes: null,
+        localRefs: [],
+        sourceSpan,
+        ...NEW_OP,
+        ...TRAIT_CONSUMES_SLOT,
+    };
+}
 /**
  * Create an `ExtractedAttributeOp`.
  */
@@ -10728,6 +11112,42 @@ function createExtractedAttributeOp(target, bindingKind, namespace, name, expres
         ...NEW_OP,
     };
 }
+function createDeferOp(xref, main, mainSlot, metadata, resolverFn, sourceSpan) {
+    return {
+        kind: OpKind.Defer,
+        xref,
+        handle: new SlotHandle(),
+        mainView: main,
+        mainSlot,
+        loadingView: null,
+        loadingSlot: null,
+        loadingConfig: null,
+        loadingMinimumTime: null,
+        loadingAfterTime: null,
+        placeholderView: null,
+        placeholderSlot: null,
+        placeholderConfig: null,
+        placeholderMinimumTime: null,
+        errorView: null,
+        errorSlot: null,
+        metadata,
+        resolverFn,
+        sourceSpan,
+        ...NEW_OP,
+        ...TRAIT_CONSUMES_SLOT,
+        numSlotsUsed: 2,
+    };
+}
+function createDeferOnOp(defer, trigger, prefetch, sourceSpan) {
+    return {
+        kind: OpKind.DeferOn,
+        defer,
+        trigger,
+        prefetch,
+        sourceSpan,
+        ...NEW_OP,
+    };
+}
 /**
  * Create an `ExtractedMessageOp`.
  */
@@ -10775,6 +11195,30 @@ function createI18nEndOp(xref, sourceSpan) {
         ...NEW_OP,
     };
 }
+/**
+ * Creates an ICU start op.
+ */
+function createIcuStartOp(xref, message, messagePlaceholder, sourceSpan) {
+    return {
+        kind: OpKind.IcuStart,
+        xref,
+        message,
+        messagePlaceholder,
+        context: null,
+        sourceSpan,
+        ...NEW_OP,
+    };
+}
+/**
+ * Creates an ICU end op.
+ */
+function createIcuEndOp(xref) {
+    return {
+        kind: OpKind.IcuEnd,
+        xref,
+        ...NEW_OP,
+    };
+}
 /**
  * Creates an ICU placeholder op.
  */
@@ -10804,6 +11248,17 @@ function createI18nContextOp(contextKind, xref, i18nBlock, message, sourceSpan)
         ...NEW_OP,
     };
 }
+function createI18nAttributesOp(xref, handle, target) {
+    return {
+        kind: OpKind.I18nAttributes,
+        xref,
+        handle,
+        target,
+        i18nAttributesConfig: null,
+        ...NEW_OP,
+        ...TRAIT_CONSUMES_SLOT,
+    };
+}
 
 function createHostPropertyOp(name, expression, isAnimationTrigger, i18nContext, securityContext, sourceSpan) {
     return {
@@ -10859,11 +11314,12 @@ class CompilationJob {
  * embedded views or host bindings.
  */
 class ComponentCompilationJob extends CompilationJob {
-    constructor(componentName, pool, compatibility, relativeContextFilePath, i18nUseExternalIds, deferBlocksMeta) {
+    constructor(componentName, pool, compatibility, relativeContextFilePath, i18nUseExternalIds, deferBlocksMeta, allDeferrableDepsFn) {
         super(componentName, pool, compatibility);
         this.relativeContextFilePath = relativeContextFilePath;
         this.i18nUseExternalIds = i18nUseExternalIds;
         this.deferBlocksMeta = deferBlocksMeta;
+        this.allDeferrableDepsFn = allDeferrableDepsFn;
         this.kind = CompilationJobKind.Tmpl;
         this.fnSuffix = 'Template';
         this.views = new Map();
@@ -10950,7 +11406,7 @@ class CompilationUnit {
     *ops() {
         for (const op of this.create) {
             yield op;
-            if (op.kind === OpKind.Listener) {
+            if (op.kind === OpKind.Listener || op.kind === OpKind.TwoWayListener) {
                 for (const listenerOp of op.handlerOps) {
                     yield listenerOp;
                 }
@@ -11190,12 +11646,17 @@ function extractAttributes(job) {
                             bindingKind = BindingKind.Property;
                         }
                         OpList.insertBefore(
-                        // Deliberaly null i18nMessage value
+                        // Deliberately null i18nMessage value
                         createExtractedAttributeOp(op.target, bindingKind, null, op.name, /* expression */ null, 
                         /* i18nContext */ null, 
                         /* i18nMessage */ null, op.securityContext), lookupElement$2(elements, op.target));
                     }
                     break;
+                case OpKind.TwoWayProperty:
+                    OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.TwoWayProperty, null, op.name, /* expression */ null, 
+                    /* i18nContext */ null, 
+                    /* i18nMessage */ null, op.securityContext), lookupElement$2(elements, op.target));
+                    break;
                 case OpKind.StyleProp:
                 case OpKind.ClassProp:
                     // TODO: Can style or class bindings be i18n attributes?
@@ -11229,6 +11690,15 @@ function extractAttributes(job) {
                         }
                     }
                     break;
+                case OpKind.TwoWayListener:
+                    // Two-way listeners aren't supported in host bindings.
+                    if (job.kind !== CompilationJobKind.Host) {
+                        const extractedAttributeOp = createExtractedAttributeOp(op.target, BindingKind.Property, null, op.name, /* expression */ null, 
+                        /* i18nContext */ null, 
+                        /* i18nMessage */ null, SecurityContext.NONE);
+                        OpList.insertBefore(extractedAttributeOp, lookupElement$2(elements, op.target));
+                    }
+                    break;
             }
         }
     }
@@ -11317,6 +11787,15 @@ function specializeBindings(job) {
                         OpList.replace(op, createPropertyOp(op.target, op.name, op.expression, op.bindingKind === BindingKind.Animation, op.securityContext, op.isStructuralTemplateAttribute, op.templateKind, op.i18nContext, op.i18nMessage, op.sourceSpan));
                     }
                     break;
+                case BindingKind.TwoWayProperty:
+                    if (!(op.expression instanceof Expression)) {
+                        // We shouldn't be able to hit this code path since interpolations in two-way bindings
+                        // result in a parser error. We assert here so that downstream we can assume that
+                        // the value is always an expression.
+                        throw new Error(`Expected value of two-way property binding "${op.name}" to be an expression`);
+                    }
+                    OpList.replace(op, createTwoWayPropertyOp(op.target, op.name, op.expression, op.securityContext, op.isStructuralTemplateAttribute, op.templateKind, op.i18nContext, op.i18nMessage, op.sourceSpan));
+                    break;
                 case BindingKind.I18n:
                 case BindingKind.ClassName:
                 case BindingKind.StyleProperty:
@@ -11353,6 +11832,8 @@ const CHAINABLE = new Set([
     Identifiers.syntheticHostListener,
     Identifiers.syntheticHostProperty,
     Identifiers.templateCreate,
+    Identifiers.twoWayProperty,
+    Identifiers.twoWayListener,
 ]);
 /**
  * Post-process a reified view compilation and convert sequential calls to chainable instructions
@@ -11491,7 +11972,7 @@ function generateConditionalExpressions(job) {
     }
 }
 
-new Map([
+const BINARY_OPERATORS = new Map([
     ['&&', exports.BinaryOperator.And],
     ['>', exports.BinaryOperator.Bigger],
     ['>=', exports.BinaryOperator.BiggerEquals],
@@ -11511,6 +11992,28 @@ new Map([
     ['||', exports.BinaryOperator.Or],
     ['+', exports.BinaryOperator.Plus],
 ]);
+function namespaceForKey(namespacePrefixKey) {
+    const NAMESPACES = new Map([['svg', Namespace.SVG], ['math', Namespace.Math]]);
+    if (namespacePrefixKey === null) {
+        return Namespace.HTML;
+    }
+    return NAMESPACES.get(namespacePrefixKey) ?? Namespace.HTML;
+}
+function keyForNamespace(namespace) {
+    const NAMESPACES = new Map([['svg', Namespace.SVG], ['math', Namespace.Math]]);
+    for (const [k, n] of NAMESPACES.entries()) {
+        if (n === namespace) {
+            return k;
+        }
+    }
+    return null; // No namespace prefix for HTML
+}
+function prefixWithNamespace(strippedTag, namespace) {
+    if (namespace === Namespace.HTML) {
+        return strippedTag;
+    }
+    return `:${keyForNamespace(namespace)}:${strippedTag}`;
+}
 function literalOrArrayLiteral(value) {
     if (Array.isArray(value)) {
         return literalArr(value.map(literalOrArrayLiteral));
@@ -11604,7 +12107,7 @@ class ElementAttributes {
         return this.byKind.get(BindingKind.StyleProperty) ?? FLYWEIGHT_ARRAY;
     }
     get bindings() {
-        return this.byKind.get(BindingKind.Property) ?? FLYWEIGHT_ARRAY;
+        return this.propertyBindings ?? FLYWEIGHT_ARRAY;
     }
     get template() {
         return this.byKind.get(BindingKind.Template) ?? FLYWEIGHT_ARRAY;
@@ -11616,9 +12119,10 @@ class ElementAttributes {
         this.compatibility = compatibility;
         this.known = new Map();
         this.byKind = new Map;
+        this.propertyBindings = null;
         this.projectAs = null;
     }
-    isKnown(kind, name, value) {
+    isKnown(kind, name) {
         const nameToValue = this.known.get(kind) ?? new Set();
         this.known.set(kind, nameToValue);
         if (nameToValue.has(name)) {
@@ -11634,7 +12138,7 @@ class ElementAttributes {
         const allowDuplicates = this.compatibility === CompatibilityMode.TemplateDefinitionBuilder &&
             (kind === BindingKind.Attribute || kind === BindingKind.ClassName ||
                 kind === BindingKind.StyleProperty);
-        if (!allowDuplicates && this.isKnown(kind, name, value)) {
+        if (!allowDuplicates && this.isKnown(kind, name)) {
             return;
         }
         // TODO: Can this be its own phase
@@ -11665,10 +12169,16 @@ class ElementAttributes {
         }
     }
     arrayFor(kind) {
-        if (!this.byKind.has(kind)) {
-            this.byKind.set(kind, []);
+        if (kind === BindingKind.Property || kind === BindingKind.TwoWayProperty) {
+            this.propertyBindings ??= [];
+            return this.propertyBindings;
+        }
+        else {
+            if (!this.byKind.has(kind)) {
+                this.byKind.set(kind, []);
+            }
+            return this.byKind.get(kind);
         }
-        return this.byKind.get(kind);
     }
 }
 /**
@@ -11764,11 +12274,16 @@ function createDeferDepsFns(job) {
                 if (op.metadata.deps.length === 0) {
                     continue;
                 }
+                if (op.resolverFn !== null) {
+                    continue;
+                }
                 const dependencies = [];
                 for (const dep of op.metadata.deps) {
                     if (dep.isDeferrable) {
                         // Callback function, e.g. `m () => m.MyCmp;`.
-                        const innerFn = arrowFn([new FnParam('m', DYNAMIC_TYPE)], variable('m').prop(dep.symbolName));
+                        const innerFn = arrowFn(
+                        // Default imports are always accessed through the `default` property.
+                        [new FnParam('m', DYNAMIC_TYPE)], variable('m').prop(dep.isDefaultImport ? 'default' : dep.symbolName));
                         // Dynamic import, e.g. `import('./a').then(...)`.
                         const importExpr = (new DynamicImportExpr(dep.importPath)).prop('then').callFn([innerFn]);
                         dependencies.push(importExpr);
@@ -11782,7 +12297,8 @@ function createDeferDepsFns(job) {
                 if (op.handle.slot === null) {
                     throw new Error('AssertionError: slot must be assigned bfore extracting defer deps functions');
                 }
-                op.resolverFn = job.pool.getSharedFunctionReference(depsFnExpr, `${job.componentName}_Defer_${op.handle.slot}_DepsFn`, 
+                const fullPathName = unit.fnName?.replace(`_Template`, ``);
+                op.resolverFn = job.pool.getSharedFunctionReference(depsFnExpr, `${fullPathName}_Defer_${op.handle.slot}_DepsFn`, 
                 /* Don't use unique names for TDB compatibility */ false);
             }
         }
@@ -11870,7 +12386,7 @@ function createI18nContexts(job) {
                     if (op.message.id !== currentI18nOp.message.id) {
                         // This ICU is a sub-message inside its parent i18n block message. We need to give it
                         // its own context.
-                        const contextOp = createI18nContextOp(I18nContextKind.Icu, job.allocateXrefId(), currentI18nOp.xref, op.message, null);
+                        const contextOp = createI18nContextOp(I18nContextKind.Icu, job.allocateXrefId(), currentI18nOp.root, op.message, null);
                         unit.create.push(contextOp);
                         op.context = contextOp.xref;
                     }
@@ -12374,7 +12890,7 @@ function createI18nMessage(job, context, messagePlaceholder) {
  */
 function formatIcuPlaceholder(op) {
     if (op.strings.length !== op.expressionPlaceholders.length + 1) {
-        throw Error(`AsserionError: Invalid ICU placeholder with ${op.strings.length} strings and ${op.expressionPlaceholders.length} expressions`);
+        throw Error(`AssertionError: Invalid ICU placeholder with ${op.strings.length} strings and ${op.expressionPlaceholders.length} expressions`);
     }
     const values = op.expressionPlaceholders.map(formatValue);
     return op.strings.flatMap((str, i) => [str, values[i] || '']).join('');
@@ -12589,6 +13105,7 @@ function recursivelyProcessView(view, parentScope) {
                 }
                 break;
             case OpKind.Listener:
+            case OpKind.TwoWayListener:
                 // Prepend variables to listener handler functions.
                 op.handlerOps.prepend(generateVariablesInScopeForView(view, scope));
                 break;
@@ -13246,15 +13763,12 @@ class Parser$1 {
         this._lexer = _lexer;
         this.errors = [];
     }
-    parseAction(input, isAssignmentEvent, location, absoluteOffset, interpolationConfig = DEFAULT_INTERPOLATION_CONFIG) {
+    parseAction(input, location, absoluteOffset, interpolationConfig = DEFAULT_INTERPOLATION_CONFIG) {
         this._checkNoInterpolation(input, location, interpolationConfig);
         const sourceToLex = this._stripComments(input);
         const tokens = this._lexer.tokenize(sourceToLex);
-        let flags = 1 /* ParseFlags.Action */;
-        if (isAssignmentEvent) {
-            flags |= 2 /* ParseFlags.AssignmentEvent */;
-        }
-        const ast = new _ParseAST(input, location, absoluteOffset, tokens, flags, this.errors, 0).parseChain();
+        const ast = new _ParseAST(input, location, absoluteOffset, tokens, 1 /* ParseFlags.Action */, this.errors, 0)
+            .parseChain();
         return new ASTWithSource(ast, input, location, absoluteOffset, this.errors);
     }
     parseBinding(input, location, absoluteOffset, interpolationConfig = DEFAULT_INTERPOLATION_CONFIG) {
@@ -13731,7 +14245,7 @@ class _ParseAST {
         let result = this.parseExpression();
         if (this.consumeOptionalOperator('|')) {
             if (this.parseFlags & 1 /* ParseFlags.Action */) {
-                this.error('Cannot have a pipe in an action expression');
+                this.error(`Cannot have a pipe in an action expression`);
             }
             do {
                 const nameStart = this.inputIndex;
@@ -14073,7 +14587,7 @@ class _ParseAST {
         const nameSpan = this.sourceSpan(nameStart);
         let receiver;
         if (isSafe) {
-            if (this.consumeOptionalAssignment()) {
+            if (this.consumeOptionalOperator('=')) {
                 this.error('The \'?.\' operator cannot be used in the assignment');
                 receiver = new EmptyExpr$1(this.span(start), this.sourceSpan(start));
             }
@@ -14082,7 +14596,7 @@ class _ParseAST {
             }
         }
         else {
-            if (this.consumeOptionalAssignment()) {
+            if (this.consumeOptionalOperator('=')) {
                 if (!(this.parseFlags & 1 /* ParseFlags.Action */)) {
                     this.error('Bindings cannot contain assignments');
                     return new EmptyExpr$1(this.span(start), this.sourceSpan(start));
@@ -14109,22 +14623,6 @@ class _ParseAST {
         return isSafe ? new SafeCall(span, sourceSpan, receiver, args, argumentSpan) :
             new Call(span, sourceSpan, receiver, args, argumentSpan);
     }
-    consumeOptionalAssignment() {
-        // When parsing assignment events (originating from two-way-binding aka banana-in-a-box syntax),
-        // it is valid for the primary expression to be terminated by the non-null operator. This
-        // primary expression is substituted as LHS of the assignment operator to achieve
-        // two-way-binding, such that the LHS could be the non-null operator. The grammar doesn't
-        // naturally allow for this syntax, so assignment events are parsed specially.
-        if ((this.parseFlags & 2 /* ParseFlags.AssignmentEvent */) && this.next.isOperator('!') &&
-            this.peek(1).isOperator('=')) {
-            // First skip over the ! operator.
-            this.advance();
-            // Then skip over the = operator, to fully consume the optional assignment operator.
-            this.advance();
-            return true;
-        }
-        return this.consumeOptionalOperator('=');
-    }
     parseCallArguments() {
         if (this.next.isCharacter($RPAREN))
             return [];
@@ -14665,7 +15163,7 @@ const SCHEMA = [
     '[Element]|textContent,%ariaAtomic,%ariaAutoComplete,%ariaBusy,%ariaChecked,%ariaColCount,%ariaColIndex,%ariaColSpan,%ariaCurrent,%ariaDescription,%ariaDisabled,%ariaExpanded,%ariaHasPopup,%ariaHidden,%ariaKeyShortcuts,%ariaLabel,%ariaLevel,%ariaLive,%ariaModal,%ariaMultiLine,%ariaMultiSelectable,%ariaOrientation,%ariaPlaceholder,%ariaPosInSet,%ariaPressed,%ariaReadOnly,%ariaRelevant,%ariaRequired,%ariaRoleDescription,%ariaRowCount,%ariaRowIndex,%ariaRowSpan,%ariaSelected,%ariaSetSize,%ariaSort,%ariaValueMax,%ariaValueMin,%ariaValueNow,%ariaValueText,%classList,className,elementTiming,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*fullscreenchange,*fullscreenerror,*search,*webkitfullscreenchange,*webkitfullscreenerror,outerHTML,%part,#scrollLeft,#scrollTop,slot' +
         /* added manually to avoid breaking changes */
         ',*message,*mozfullscreenchange,*mozfullscreenerror,*mozpointerlockchange,*mozpointerlockerror,*webglcontextcreationerror,*webglcontextlost,*webglcontextrestored',
-    '[HTMLElement]^[Element]|accessKey,autocapitalize,!autofocus,contentEditable,dir,!draggable,enterKeyHint,!hidden,innerText,inputMode,lang,nonce,*abort,*animationend,*animationiteration,*animationstart,*auxclick,*beforexrselect,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*copy,*cuechange,*cut,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*formdata,*gotpointercapture,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*lostpointercapture,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*paste,*pause,*play,*playing,*pointercancel,*pointerdown,*pointerenter,*pointerleave,*pointermove,*pointerout,*pointerover,*pointerrawupdate,*pointerup,*progress,*ratechange,*reset,*resize,*scroll,*securitypolicyviolation,*seeked,*seeking,*select,*selectionchange,*selectstart,*slotchange,*stalled,*submit,*suspend,*timeupdate,*toggle,*transitioncancel,*transitionend,*transitionrun,*transitionstart,*volumechange,*waiting,*webkitanimationend,*webkitanimationiteration,*webkitanimationstart,*webkittransitionend,*wheel,outerText,!spellcheck,%style,#tabIndex,title,!translate,virtualKeyboardPolicy',
+    '[HTMLElement]^[Element]|accessKey,autocapitalize,!autofocus,contentEditable,dir,!draggable,enterKeyHint,!hidden,!inert,innerText,inputMode,lang,nonce,*abort,*animationend,*animationiteration,*animationstart,*auxclick,*beforexrselect,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*copy,*cuechange,*cut,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*formdata,*gotpointercapture,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*lostpointercapture,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*paste,*pause,*play,*playing,*pointercancel,*pointerdown,*pointerenter,*pointerleave,*pointermove,*pointerout,*pointerover,*pointerrawupdate,*pointerup,*progress,*ratechange,*reset,*resize,*scroll,*securitypolicyviolation,*seeked,*seeking,*select,*selectionchange,*selectstart,*slotchange,*stalled,*submit,*suspend,*timeupdate,*toggle,*transitioncancel,*transitionend,*transitionrun,*transitionstart,*volumechange,*waiting,*webkitanimationend,*webkitanimationiteration,*webkitanimationstart,*webkittransitionend,*wheel,outerText,!spellcheck,%style,#tabIndex,title,!translate,virtualKeyboardPolicy',
     'abbr,address,article,aside,b,bdi,bdo,cite,content,code,dd,dfn,dt,em,figcaption,figure,footer,header,hgroup,i,kbd,main,mark,nav,noscript,rb,rp,rt,rtc,ruby,s,samp,section,small,strong,sub,sup,u,var,wbr^[HTMLElement]|accessKey,autocapitalize,!autofocus,contentEditable,dir,!draggable,enterKeyHint,!hidden,innerText,inputMode,lang,nonce,*abort,*animationend,*animationiteration,*animationstart,*auxclick,*beforexrselect,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*copy,*cuechange,*cut,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*formdata,*gotpointercapture,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*lostpointercapture,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*paste,*pause,*play,*playing,*pointercancel,*pointerdown,*pointerenter,*pointerleave,*pointermove,*pointerout,*pointerover,*pointerrawupdate,*pointerup,*progress,*ratechange,*reset,*resize,*scroll,*securitypolicyviolation,*seeked,*seeking,*select,*selectionchange,*selectstart,*slotchange,*stalled,*submit,*suspend,*timeupdate,*toggle,*transitioncancel,*transitionend,*transitionrun,*transitionstart,*volumechange,*waiting,*webkitanimationend,*webkitanimationiteration,*webkitanimationstart,*webkittransitionend,*wheel,outerText,!spellcheck,%style,#tabIndex,title,!translate,virtualKeyboardPolicy',
     'media^[HTMLElement]|!autoplay,!controls,%controlsList,%crossOrigin,#currentTime,!defaultMuted,#defaultPlaybackRate,!disableRemotePlayback,!loop,!muted,*encrypted,*waitingforkey,#playbackRate,preload,!preservesPitch,src,%srcObject,#volume',
     ':svg:^[HTMLElement]|!autofocus,nonce,*abort,*animationend,*animationiteration,*animationstart,*auxclick,*beforexrselect,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*copy,*cuechange,*cut,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*formdata,*gotpointercapture,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*lostpointercapture,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*paste,*pause,*play,*playing,*pointercancel,*pointerdown,*pointerenter,*pointerleave,*pointermove,*pointerout,*pointerover,*pointerrawupdate,*pointerup,*progress,*ratechange,*reset,*resize,*scroll,*securitypolicyviolation,*seeked,*seeking,*select,*selectionchange,*selectstart,*slotchange,*stalled,*submit,*suspend,*timeupdate,*toggle,*transitioncancel,*transitionend,*transitionrun,*transitionstart,*volumechange,*waiting,*webkitanimationend,*webkitanimationiteration,*webkitanimationstart,*webkittransitionend,*wheel,%style,#tabIndex',
@@ -20202,7 +20700,10 @@ function nameFunctionsAndVariables(job) {
 }
 function addNamesToView(unit, baseName, state, compatibility) {
     if (unit.fnName === null) {
-        unit.fnName = sanitizeIdentifier(`${baseName}_${unit.job.fnSuffix}`);
+        // Ensure unique names for view units. This is necessary because there might be multiple
+        // components with same names in the context of the same pool. Only add the suffix
+        // if really needed.
+        unit.fnName = unit.job.pool.uniqueName(sanitizeIdentifier(`${baseName}_${unit.job.fnSuffix}`), /* alwaysIncludeSuffix */ false);
     }
     // Keep track of the names we assign to variables in the view. We'll need to propagate these
     // into reads of those variables afterwards.
@@ -20235,6 +20736,15 @@ function addNamesToView(unit, baseName, state, compatibility) {
                 }
                 op.handlerFnName = sanitizeIdentifier(op.handlerFnName);
                 break;
+            case OpKind.TwoWayListener:
+                if (op.handlerFnName !== null) {
+                    break;
+                }
+                if (op.targetSlot.slot === null) {
+                    throw new Error(`Expected a slot to be assigned`);
+                }
+                op.handlerFnName = sanitizeIdentifier(`${unit.fnName}_${op.tag.replace('-', '_')}_${op.name}_${op.targetSlot.slot}_listener`);
+                break;
             case OpKind.Variable:
                 varNames.set(op.xref, getVariableName(unit, op.variable, state));
                 break;
@@ -20248,7 +20758,7 @@ function addNamesToView(unit, baseName, state, compatibility) {
                 if (op.emptyView !== null) {
                     const emptyView = unit.job.views.get(op.emptyView);
                     // Repeater empty view function is at slot +2 (metadata is in the first slot).
-                    addNamesToView(emptyView, `${baseName}_${`${op.functionNameSuffix}Empty`}_${op.handle.slot + 2}`, state, compatibility);
+                    addNamesToView(emptyView, `${baseName}_${op.functionNameSuffix}Empty_${op.handle.slot + 2}`, state, compatibility);
                 }
                 // Repeater primary view function is at slot +1 (metadata is in the first slot).
                 addNamesToView(unit.job.views.get(op.xref), `${baseName}_${op.functionNameSuffix}_${op.handle.slot + 1}`, state, compatibility);
@@ -20349,7 +20859,7 @@ function stripImportant(name) {
 function mergeNextContextExpressions(job) {
     for (const unit of job.units) {
         for (const op of unit.create) {
-            if (op.kind === OpKind.Listener) {
+            if (op.kind === OpKind.Listener || op.kind === OpKind.TwoWayListener) {
                 mergeNextContextsInOps(op.handlerOps);
             }
         }
@@ -20490,6 +21000,14 @@ function kindWithInterpolationTest(kind, interpolation) {
         return op.kind === kind && interpolation === op.expression instanceof Interpolation;
     };
 }
+function basicListenerKindTest(op) {
+    return (op.kind === OpKind.Listener && !(op.hostListener && op.isAnimationListener)) ||
+        op.kind === OpKind.TwoWayListener;
+}
+function nonInterpolationPropertyKindTest(op) {
+    return (op.kind === OpKind.Property || op.kind === OpKind.TwoWayProperty) &&
+        !(op.expression instanceof Interpolation);
+}
 /**
  * Defines the groups based on `OpKind` that ops will be divided into, for the various create
  * op kinds. Ops will be collected into groups, then optionally transformed, before recombining
@@ -20497,7 +21015,7 @@ function kindWithInterpolationTest(kind, interpolation) {
  */
 const CREATE_ORDERING = [
     { test: op => op.kind === OpKind.Listener && op.hostListener && op.isAnimationListener },
-    { test: op => op.kind === OpKind.Listener && !(op.hostListener && op.isAnimationListener) },
+    { test: basicListenerKindTest },
 ];
 /**
  * Defines the groups based on `OpKind` that ops will be divided into, for the various update
@@ -20510,7 +21028,7 @@ const UPDATE_ORDERING = [
     { test: kindTest(OpKind.ClassProp) },
     { test: kindWithInterpolationTest(OpKind.Attribute, true) },
     { test: kindWithInterpolationTest(OpKind.Property, true) },
-    { test: kindWithInterpolationTest(OpKind.Property, false) },
+    { test: nonInterpolationPropertyKindTest },
     { test: kindWithInterpolationTest(OpKind.Attribute, false) },
 ];
 /**
@@ -20529,8 +21047,9 @@ const UPDATE_HOST_ORDERING = [
  * The set of all op kinds we handle in the reordering phase.
  */
 const handledOpKinds = new Set([
-    OpKind.Listener, OpKind.StyleMap, OpKind.ClassMap, OpKind.StyleProp,
-    OpKind.ClassProp, OpKind.Property, OpKind.HostProperty, OpKind.Attribute
+    OpKind.Listener, OpKind.TwoWayListener, OpKind.StyleMap, OpKind.ClassMap,
+    OpKind.StyleProp, OpKind.ClassProp, OpKind.Property, OpKind.TwoWayProperty,
+    OpKind.HostProperty, OpKind.Attribute
 ]);
 /**
  * Many type of operations have ordering constraints that must be respected. For example, a
@@ -20794,8 +21313,9 @@ function propagateI18nBlocksToTemplates(unit, subTemplateIndex) {
                 break;
             case OpKind.RepeaterCreate:
                 // Propagate i18n blocks to the @for template.
-                unit.job.views.get(op.xref);
-                subTemplateIndex = propagateI18nBlocksForView(unit.job.views.get(op.xref), i18nBlock, op.i18nPlaceholder, subTemplateIndex);
+                const forView = unit.job.views.get(op.xref);
+                subTemplateIndex =
+                    propagateI18nBlocksForView(forView, i18nBlock, op.i18nPlaceholder, subTemplateIndex);
                 // Then if there's an @empty template, propagate the i18n blocks for it as well.
                 if (op.emptyView !== null) {
                     subTemplateIndex = propagateI18nBlocksForView(unit.job.views.get(op.emptyView), i18nBlock, op.emptyI18nPlaceholder, subTemplateIndex);
@@ -20996,6 +21516,12 @@ function listener(name, handlerFn, eventTargetResolver, syntheticHost, sourceSpa
     }
     return call(syntheticHost ? Identifiers.syntheticHostListener : Identifiers.listener, args, sourceSpan);
 }
+function twoWayBindingSet(target, value) {
+    return importExpr(Identifiers.twoWayBindingSet).callFn([target, value]);
+}
+function twoWayListener(name, handlerFn, sourceSpan) {
+    return call(Identifiers.twoWayListener, [literal(name), handlerFn], sourceSpan);
+}
 function pipe(slot, name) {
     return call(Identifiers.pipe, [
         literal(slot),
@@ -21156,6 +21682,13 @@ function property(name, expression, sanitizer, sourceSpan) {
     }
     return call(Identifiers.property, args, sourceSpan);
 }
+function twoWayProperty(name, expression, sanitizer, sourceSpan) {
+    const args = [literal(name), expression];
+    if (sanitizer !== null) {
+        args.push(sanitizer);
+    }
+    return call(Identifiers.twoWayProperty, args, sourceSpan);
+}
 function attribute(name, expression, sanitizer, namespace) {
     const args = [literal(name), expression];
     if (sanitizer !== null || namespace !== null) {
@@ -21573,6 +22106,9 @@ function reifyCreateOperations(unit, ops) {
                 }
                 OpList.replace(op, listener(op.name, listenerFn, eventTargetResolver, op.hostListener && op.isAnimationListener, op.sourceSpan));
                 break;
+            case OpKind.TwoWayListener:
+                OpList.replace(op, twoWayListener(op.name, reifyListenerHandler(unit, op.handlerFnName, op.handlerOps, true), op.sourceSpan));
+                break;
             case OpKind.Variable:
                 if (op.variable.name === null) {
                     throw new Error(`AssertionError: unnamed variable ${op.xref}`);
@@ -21681,6 +22217,9 @@ function reifyUpdateOperations(_unit, ops) {
                     OpList.replace(op, property(op.name, op.expression, op.sanitizer, op.sourceSpan));
                 }
                 break;
+            case OpKind.TwoWayProperty:
+                OpList.replace(op, twoWayProperty(op.name, op.expression, op.sanitizer, op.sourceSpan));
+                break;
             case OpKind.StyleProp:
                 if (op.expression instanceof Interpolation) {
                     OpList.replace(op, stylePropInterpolate(op.name, op.expression.strings, op.expression.expressions, op.unit, op.sourceSpan));
@@ -21778,6 +22317,8 @@ function reifyIrExpression(expr) {
             return reference(expr.targetSlot.slot + 1 + expr.offset);
         case ExpressionKind.LexicalRead:
             throw new Error(`AssertionError: unresolved LexicalRead of ${expr.name}`);
+        case ExpressionKind.TwoWayBindingSet:
+            throw new Error(`AssertionError: unresolved TwoWayBindingSet`);
         case ExpressionKind.RestoreView:
             if (typeof expr.view === 'number') {
                 throw new Error(`AssertionError: unresolved RestoreView`);
@@ -21845,7 +22386,7 @@ function reifyListenerHandler(unit, name, handlerOps, consumesDollarEvent) {
 }
 
 /**
- * Bidningd with no content can be safely deleted.
+ * Binding with no content can be safely deleted.
  */
 function removeEmptyBindings(job) {
     for (const unit of job.units) {
@@ -21938,6 +22479,7 @@ function processLexicalScope$1(view, ops) {
                 }
                 break;
             case OpKind.Listener:
+            case OpKind.TwoWayListener:
                 processLexicalScope$1(view, op.handlerOps);
                 break;
         }
@@ -21967,16 +22509,19 @@ function processLexicalScope$1(view, ops) {
  */
 function resolveDollarEvent(job) {
     for (const unit of job.units) {
-        transformDollarEvent(unit, unit.create);
-        transformDollarEvent(unit, unit.update);
+        transformDollarEvent(unit.create);
+        transformDollarEvent(unit.update);
     }
 }
-function transformDollarEvent(unit, ops) {
+function transformDollarEvent(ops) {
     for (const op of ops) {
-        if (op.kind === OpKind.Listener) {
+        if (op.kind === OpKind.Listener || op.kind === OpKind.TwoWayListener) {
             transformExpressionsInOp(op, (expr) => {
                 if (expr instanceof LexicalReadExpr && expr.name === '$event') {
-                    op.consumesDollarEvent = true;
+                    // Two-way listeners always consume `$event` so they omit this field.
+                    if (op.kind === OpKind.Listener) {
+                        op.consumesDollarEvent = true;
+                    }
                     return new ReadVarExpr(expr.name);
                 }
                 return expr;
@@ -22206,7 +22751,7 @@ function recordTemplateStart(job, view, slot, i18nPlaceholder, i18nContext, i18n
  * Records an i18n param value for the closing of a template.
  */
 function recordTemplateClose(job, view, slot, i18nPlaceholder, i18nContext, i18nBlock, structuralDirective) {
-    const { startName, closeName } = i18nPlaceholder;
+    const { closeName } = i18nPlaceholder;
     const flags = I18nParamValueFlags.TemplateTag | I18nParamValueFlags.CloseTag;
     // Self-closing tags don't have a closing tag placeholder, instead the template's closing is
     // recorded via an additional flag on the template start value.
@@ -22248,14 +22793,14 @@ function addParam(params, placeholder, value, subTemplateIndex, flags) {
  */
 function resolveI18nExpressionPlaceholders(job) {
     // Record all of the i18n context ops, and the sub-template index for each i18n op.
-    const subTemplateIndicies = new Map();
+    const subTemplateIndices = new Map();
     const i18nContexts = new Map();
     const icuPlaceholders = new Map();
     for (const unit of job.units) {
         for (const op of unit.create) {
             switch (op.kind) {
                 case OpKind.I18nStart:
-                    subTemplateIndicies.set(op.xref, op.subTemplateIndex);
+                    subTemplateIndices.set(op.xref, op.subTemplateIndex);
                     break;
                 case OpKind.I18nContext:
                     i18nContexts.set(op.xref, op);
@@ -22277,7 +22822,7 @@ function resolveI18nExpressionPlaceholders(job) {
         for (const op of unit.update) {
             if (op.kind === OpKind.I18nExpression) {
                 const index = expressionIndices.get(referenceIndex(op)) || 0;
-                const subTemplateIndex = subTemplateIndicies.get(op.i18nOwner) ?? null;
+                const subTemplateIndex = subTemplateIndices.get(op.i18nOwner) ?? null;
                 const value = {
                     value: index,
                     subTemplateIndex: subTemplateIndex,
@@ -22351,6 +22896,7 @@ function processLexicalScope(unit, ops, savedView) {
                 }
                 break;
             case OpKind.Listener:
+            case OpKind.TwoWayListener:
                 // Listener functions have separate variable declarations, so process them as a separate
                 // lexical scope.
                 processLexicalScope(unit, op.handlerOps, savedView);
@@ -22361,11 +22907,11 @@ function processLexicalScope(unit, ops, savedView) {
     // scope. Also, look for `ir.RestoreViewExpr`s and match them with the snapshotted view context
     // variable.
     for (const op of ops) {
-        if (op.kind == OpKind.Listener) {
+        if (op.kind == OpKind.Listener || op.kind === OpKind.TwoWayListener) {
             // Listeners were already processed above with their own scopes.
             continue;
         }
-        transformExpressionsInOp(op, (expr, flags) => {
+        transformExpressionsInOp(op, (expr) => {
             if (expr instanceof LexicalReadExpr) {
                 // `expr` is a read of a name within the lexical scope of this view.
                 // Either that name is defined within the current view, or it represents a property from the
@@ -22510,6 +23056,84 @@ function getOnlySecurityContext(securityContext) {
     return securityContext;
 }
 
+/**
+ * Transforms a `TwoWayBindingSet` expression into an expression that either
+ * sets a value through the `twoWayBindingSet` instruction or falls back to setting
+ * the value directly. E.g. the expression `TwoWayBindingSet(target, value)` becomes:
+ * `ng.twoWayBindingSet(target, value) || (target = value)`.
+ */
+function transformTwoWayBindingSet(job) {
+    for (const unit of job.units) {
+        for (const op of unit.create) {
+            if (op.kind === OpKind.TwoWayListener) {
+                transformExpressionsInOp(op, (expr) => {
+                    if (expr instanceof TwoWayBindingSetExpr) {
+                        return wrapAction(expr.target, expr.value);
+                    }
+                    return expr;
+                }, VisitorContextFlag.InChildOperation);
+            }
+        }
+    }
+}
+function wrapSetOperation(target, value) {
+    // ASSUMPTION: here we're assuming that `ReadVariableExpr` will be a reference
+    // to a local template variable. This appears to be the case at the time of writing.
+    // If the expression is targeting a variable read, we only emit the `twoWayBindingSet` since
+    // the fallback would be attempting to write into a constant. Invalid usages will be flagged
+    // during template type checking.
+    if (target instanceof ReadVariableExpr) {
+        return twoWayBindingSet(target, value);
+    }
+    return twoWayBindingSet(target, value).or(target.set(value));
+}
+function isReadExpression(value) {
+    return value instanceof ReadPropExpr || value instanceof ReadKeyExpr ||
+        value instanceof ReadVariableExpr;
+}
+function wrapAction(target, value) {
+    // The only officially supported expressions inside of a two-way binding are read expressions.
+    if (isReadExpression(target)) {
+        return wrapSetOperation(target, value);
+    }
+    // However, historically the expression parser was handling two-way events by appending `=$event`
+    // to the raw string before attempting to parse it. This has led to bugs over the years (see
+    // #37809) and to unintentionally supporting unassignable events in the two-way binding. The
+    // logic below aims to emulate the old behavior while still supporting the new output format
+    // which uses `twoWayBindingSet`. Note that the generated code doesn't necessarily make sense
+    // based on what the user wrote, for example the event binding for `[(value)]="a ? b : c"`
+    // would produce `ctx.a ? ctx.b : ctx.c = $event`. We aim to reproduce what the parser used
+    // to generate before #54154.
+    if (target instanceof BinaryOperatorExpr && isReadExpression(target.rhs)) {
+        // `a && b` -> `ctx.a && twoWayBindingSet(ctx.b, $event) || (ctx.b = $event)`
+        return new BinaryOperatorExpr(target.operator, target.lhs, wrapSetOperation(target.rhs, value));
+    }
+    // Note: this also supports nullish coalescing expressions which
+    // would've been downleveled to ternary expressions by this point.
+    if (target instanceof ConditionalExpr && isReadExpression(target.falseCase)) {
+        // `a ? b : c` -> `ctx.a ? ctx.b : twoWayBindingSet(ctx.c, $event) || (ctx.c = $event)`
+        return new ConditionalExpr(target.condition, target.trueCase, wrapSetOperation(target.falseCase, value));
+    }
+    // `!!a` -> `twoWayBindingSet(ctx.a, $event) || (ctx.a = $event)`
+    // Note: previously we'd actually produce `!!(ctx.a = $event)`, but the wrapping
+    // node doesn't affect the result so we don't need to carry it over.
+    if (target instanceof NotExpr) {
+        let expr = target.condition;
+        while (true) {
+            if (expr instanceof NotExpr) {
+                expr = expr.condition;
+            }
+            else {
+                if (isReadExpression(expr)) {
+                    return wrapSetOperation(expr, value);
+                }
+                break;
+            }
+        }
+    }
+    throw new Error(`Unsupported expression in two-way action binding.`);
+}
+
 /**
  * When inside of a listener, we may need access to one or more enclosing views. Therefore, each
  * view should save the current view, and each listener must have the ability to restore the
@@ -22525,7 +23149,7 @@ function saveAndRestoreView(job) {
             }, new GetCurrentViewExpr(), VariableFlags.None),
         ]);
         for (const op of unit.create) {
-            if (op.kind !== OpKind.Listener) {
+            if (op.kind !== OpKind.Listener && op.kind !== OpKind.TwoWayListener) {
                 continue;
             }
             // Embedded views always need the save/restore view operation.
@@ -22715,7 +23339,7 @@ function generateTemporaries(ops) {
         generatedStatements.push(...Array.from(new Set(defs.values()))
             .map(name => createStatementOp(new DeclareVarStmt(name))));
         opCount++;
-        if (op.kind === OpKind.Listener) {
+        if (op.kind === OpKind.Listener || op.kind === OpKind.TwoWayListener) {
             op.handlerOps.prepend(generateTemporaries(op.handlerOps));
         }
     }
@@ -22911,7 +23535,7 @@ function countVariables(job) {
                 }
             });
         }
-        // Compatiblity mode pass for pure function offsets (as explained above).
+        // Compatibility mode pass for pure function offsets (as explained above).
         if (job.compatibility === CompatibilityMode.TemplateDefinitionBuilder) {
             for (const op of unit.ops()) {
                 visitExpressionsInOp(op, expr => {
@@ -22963,6 +23587,9 @@ function varsUsedByOp(op) {
                 slots += op.expression.expressions.length;
             }
             return slots;
+        case OpKind.TwoWayProperty:
+            // Two-way properties can only have expressions so they only need one variable slot.
+            return 1;
         case OpKind.StyleProp:
         case OpKind.ClassProp:
         case OpKind.StyleMap:
@@ -23036,14 +23663,14 @@ function optimizeVariables(job) {
         inlineAlwaysInlineVariables(unit.create);
         inlineAlwaysInlineVariables(unit.update);
         for (const op of unit.create) {
-            if (op.kind === OpKind.Listener) {
+            if (op.kind === OpKind.Listener || op.kind === OpKind.TwoWayListener) {
                 inlineAlwaysInlineVariables(op.handlerOps);
             }
         }
         optimizeVariablesInOpList(unit.create, job.compatibility);
         optimizeVariablesInOpList(unit.update, job.compatibility);
         for (const op of unit.create) {
-            if (op.kind === OpKind.Listener) {
+            if (op.kind === OpKind.Listener || op.kind === OpKind.TwoWayListener) {
                 optimizeVariablesInOpList(op.handlerOps, job.compatibility);
             }
         }
@@ -23176,7 +23803,6 @@ function optimizeVariablesInOpList(ops, compatibility) {
     const toInline = [];
     for (const [id, count] of varUsages) {
         const decl = varDecls.get(id);
-        opMap.get(decl);
         // We can inline variables that:
         //  - are used exactly once, and
         //  - are not used remotely
@@ -23465,7 +24091,7 @@ function wrapI18nIcus(job) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-[
+const phases = [
     { kind: CompilationJobKind.Tmpl, fn: removeContentSelectors },
     { kind: CompilationJobKind.Host, fn: parseHostStyleProperties },
     { kind: CompilationJobKind.Tmpl, fn: emitNamespaceChanges },
@@ -23498,6 +24124,7 @@ function wrapI18nIcus(job) {
     { kind: CompilationJobKind.Tmpl, fn: generateTrackVariables },
     { kind: CompilationJobKind.Both, fn: resolveNames },
     { kind: CompilationJobKind.Tmpl, fn: resolveDeferTargetNames },
+    { kind: CompilationJobKind.Tmpl, fn: transformTwoWayBindingSet },
     { kind: CompilationJobKind.Tmpl, fn: optimizeTrackFns },
     { kind: CompilationJobKind.Both, fn: resolveContexts },
     { kind: CompilationJobKind.Both, fn: resolveSanitizers },
@@ -23506,7 +24133,6 @@ function wrapI18nIcus(job) {
     { kind: CompilationJobKind.Both, fn: expandSafeReads },
     { kind: CompilationJobKind.Both, fn: generateTemporaryVariables },
     { kind: CompilationJobKind.Tmpl, fn: allocateSlots },
-    { kind: CompilationJobKind.Tmpl, fn: createDeferDepsFns },
     { kind: CompilationJobKind.Tmpl, fn: resolveI18nElementPlaceholders },
     { kind: CompilationJobKind.Tmpl, fn: resolveI18nExpressionPlaceholders },
     { kind: CompilationJobKind.Tmpl, fn: extractI18nMessages },
@@ -23519,6 +24145,7 @@ function wrapI18nIcus(job) {
     { kind: CompilationJobKind.Tmpl, fn: generateAdvance },
     { kind: CompilationJobKind.Both, fn: optimizeVariables },
     { kind: CompilationJobKind.Both, fn: nameFunctionsAndVariables },
+    { kind: CompilationJobKind.Tmpl, fn: createDeferDepsFns },
     { kind: CompilationJobKind.Tmpl, fn: mergeNextContextExpressions },
     { kind: CompilationJobKind.Tmpl, fn: generateNgContainerOps },
     { kind: CompilationJobKind.Tmpl, fn: collapseEmptyInstructions },
@@ -23527,546 +24154,1111 @@ function wrapI18nIcus(job) {
     { kind: CompilationJobKind.Both, fn: reify },
     { kind: CompilationJobKind.Both, fn: chain },
 ];
-
-CompatibilityMode.TemplateDefinitionBuilder;
-// Schema containing DOM elements and their properties.
-new DomElementSchemaRegistry();
-// TODO: Can we populate Template binding kinds in ingest?
-new Map([
-    [0 /* e.BindingType.Property */, BindingKind.Property],
-    [1 /* e.BindingType.Attribute */, BindingKind.Attribute],
-    [2 /* e.BindingType.Class */, BindingKind.ClassName],
-    [3 /* e.BindingType.Style */, BindingKind.StyleProperty],
-    [4 /* e.BindingType.Animation */, BindingKind.Animation],
-]);
-
-const IMPORTANT_FLAG = '!important';
 /**
- * Minimum amount of binding slots required in the runtime for style/class bindings.
- *
- * Styling in Angular uses up two slots in the runtime LView/TData data structures to
- * record binding data, property information and metadata.
- *
- * When a binding is registered it will place the following information in the `LView`:
- *
- * slot 1) binding value
- * slot 2) cached value (all other values collected before it in string form)
- *
- * When a binding is registered it will place the following information in the `TData`:
- *
- * slot 1) prop name
- * slot 2) binding index that points to the previous style/class binding (and some extra config
- * values)
- *
- * Let's imagine we have a binding that looks like so:
- *
- * ```
- * <div [style.width]="x" [style.height]="y">
- * ```
- *
- * Our `LView` and `TData` data-structures look like so:
- *
- * ```typescript
- * LView = [
- *   // ...
- *   x, // value of x
- *   "width: x",
- *
- *   y, // value of y
- *   "width: x; height: y",
- *   // ...
- * ];
- *
- * TData = [
- *   // ...
- *   "width", // binding slot 20
- *   0,
- *
- *   "height",
- *   20,
- *   // ...
- * ];
- * ```
- *
- * */
-const MIN_STYLING_BINDING_SLOTS_REQUIRED = 2;
+ * Run all transformation phases in the correct order against a compilation job. After this
+ * processing, the compilation should be in a state where it can be emitted.
+ */
+function transform(job, kind) {
+    for (const phase of phases) {
+        if (phase.kind === kind || phase.kind === CompilationJobKind.Both) {
+            // The type of `Phase` above ensures it is impossible to call a phase that doesn't support the
+            // job kind.
+            phase.fn(job);
+        }
+    }
+}
 /**
- * Produces creation/update instructions for all styling bindings (class and style)
- *
- * It also produces the creation instruction to register all initial styling values
- * (which are all the static class="..." and style="..." attribute values that exist
- * on an element within a template).
- *
- * The builder class below handles producing instructions for the following cases:
- *
- * - Static style/class attributes (style="..." and class="...")
- * - Dynamic style/class map bindings ([style]="map" and [class]="map|string")
- * - Dynamic style/class property bindings ([style.prop]="exp" and [class.name]="exp")
- *
- * Due to the complex relationship of all of these cases, the instructions generated
- * for these attributes/properties/bindings must be done so in the correct order. The
- * order which these must be generated is as follows:
- *
- * if (createMode) {
- *   styling(...)
- * }
- * if (updateMode) {
- *   styleMap(...)
- *   classMap(...)
- *   styleProp(...)
- *   classProp(...)
- * }
- *
- * The creation/update methods within the builder class produce these instructions.
+ * Compile all views in the given `ComponentCompilation` into the final template function, which may
+ * reference constants defined in a `ConstantPool`.
  */
-class StylingBuilder {
-    constructor(_directiveExpr) {
-        this._directiveExpr = _directiveExpr;
-        /** Whether or not there are any static styling values present */
-        this._hasInitialValues = false;
-        /**
-         *  Whether or not there are any styling bindings present
-         *  (i.e. `[style]`, `[class]`, `[style.prop]` or `[class.name]`)
-         */
-        this.hasBindings = false;
-        this.hasBindingsWithPipes = false;
-        /** the input for [class] (if it exists) */
-        this._classMapInput = null;
-        /** the input for [style] (if it exists) */
-        this._styleMapInput = null;
-        /** an array of each [style.prop] input */
-        this._singleStyleInputs = null;
-        /** an array of each [class.name] input */
-        this._singleClassInputs = null;
-        this._lastStylingInput = null;
-        this._firstStylingInput = null;
-        // maps are used instead of hash maps because a Map will
-        // retain the ordering of the keys
-        /**
-         * Represents the location of each style binding in the template
-         * (e.g. `<div [style.width]="w" [style.height]="h">` implies
-         * that `width=0` and `height=1`)
-         */
-        this._stylesIndex = new Map();
-        /**
-         * Represents the location of each class binding in the template
-         * (e.g. `<div [class.big]="b" [class.hidden]="h">` implies
-         * that `big=0` and `hidden=1`)
-         */
-        this._classesIndex = new Map();
-        this._initialStyleValues = [];
-        this._initialClassValues = [];
+function emitTemplateFn(tpl, pool) {
+    const rootFn = emitView(tpl.root);
+    emitChildViews(tpl.root, pool);
+    return rootFn;
+}
+function emitChildViews(parent, pool) {
+    for (const unit of parent.job.units) {
+        if (unit.parent !== parent.xref) {
+            continue;
+        }
+        // Child views are emitted depth-first.
+        emitChildViews(unit, pool);
+        const viewFn = emitView(unit);
+        pool.statements.push(viewFn.toDeclStmt(viewFn.name));
     }
-    /**
-     * Registers a given input to the styling builder to be later used when producing AOT code.
-     *
-     * The code below will only accept the input if it is somehow tied to styling (whether it be
-     * style/class bindings or static style/class attributes).
-     */
-    registerBoundInput(input) {
-        // [attr.style] or [attr.class] are skipped in the code below,
-        // they should not be treated as styling-based bindings since
-        // they are intended to be written directly to the attr and
-        // will therefore skip all style/class resolution that is present
-        // with style="", [style]="" and [style.prop]="", class="",
-        // [class.prop]="". [class]="" assignments
-        let binding = null;
-        let name = input.name;
-        switch (input.type) {
-            case 0 /* BindingType.Property */:
-                binding = this.registerInputBasedOnName(name, input.value, input.sourceSpan);
-                break;
-            case 3 /* BindingType.Style */:
-                binding = this.registerStyleInput(name, false, input.value, input.sourceSpan, input.unit);
-                break;
-            case 2 /* BindingType.Class */:
-                binding = this.registerClassInput(name, false, input.value, input.sourceSpan);
-                break;
+}
+/**
+ * Emit a template function for an individual `ViewCompilation` (which may be either the root view
+ * or an embedded view).
+ */
+function emitView(view) {
+    if (view.fnName === null) {
+        throw new Error(`AssertionError: view ${view.xref} is unnamed`);
+    }
+    const createStatements = [];
+    for (const op of view.create) {
+        if (op.kind !== OpKind.Statement) {
+            throw new Error(`AssertionError: expected all create ops to have been compiled, but got ${OpKind[op.kind]}`);
         }
-        return binding ? true : false;
+        createStatements.push(op.statement);
     }
-    registerInputBasedOnName(name, expression, sourceSpan) {
-        let binding = null;
-        const prefix = name.substring(0, 6);
-        const isStyle = name === 'style' || prefix === 'style.' || prefix === 'style!';
-        const isClass = !isStyle && (name === 'class' || prefix === 'class.' || prefix === 'class!');
-        if (isStyle || isClass) {
-            const isMapBased = name.charAt(5) !== '.'; // style.prop or class.prop makes this a no
-            const property = name.slice(isMapBased ? 5 : 6); // the dot explains why there's a +1
-            if (isStyle) {
-                binding = this.registerStyleInput(property, isMapBased, expression, sourceSpan);
-            }
-            else {
-                binding = this.registerClassInput(property, isMapBased, expression, sourceSpan);
-            }
+    const updateStatements = [];
+    for (const op of view.update) {
+        if (op.kind !== OpKind.Statement) {
+            throw new Error(`AssertionError: expected all update ops to have been compiled, but got ${OpKind[op.kind]}`);
         }
-        return binding;
+        updateStatements.push(op.statement);
     }
-    registerStyleInput(name, isMapBased, value, sourceSpan, suffix) {
-        if (isEmptyExpression(value)) {
-            return null;
+    const createCond = maybeGenerateRfBlock(1, createStatements);
+    const updateCond = maybeGenerateRfBlock(2, updateStatements);
+    return fn([
+        new FnParam('rf'),
+        new FnParam('ctx'),
+    ], [
+        ...createCond,
+        ...updateCond,
+    ], 
+    /* type */ undefined, /* sourceSpan */ undefined, view.fnName);
+}
+function maybeGenerateRfBlock(flag, statements) {
+    if (statements.length === 0) {
+        return [];
+    }
+    return [
+        ifStmt(new BinaryOperatorExpr(exports.BinaryOperator.BitwiseAnd, variable('rf'), literal(flag)), statements),
+    ];
+}
+function emitHostBindingFunction(job) {
+    if (job.root.fnName === null) {
+        throw new Error(`AssertionError: host binding function is unnamed`);
+    }
+    const createStatements = [];
+    for (const op of job.root.create) {
+        if (op.kind !== OpKind.Statement) {
+            throw new Error(`AssertionError: expected all create ops to have been compiled, but got ${OpKind[op.kind]}`);
         }
-        // CSS custom properties are case-sensitive so we shouldn't normalize them.
-        // See: https://www.w3.org/TR/css-variables-1/#defining-variables
-        if (!isCssCustomProperty(name)) {
-            name = hyphenate(name);
+        createStatements.push(op.statement);
+    }
+    const updateStatements = [];
+    for (const op of job.root.update) {
+        if (op.kind !== OpKind.Statement) {
+            throw new Error(`AssertionError: expected all update ops to have been compiled, but got ${OpKind[op.kind]}`);
         }
-        const { property, hasOverrideFlag, suffix: bindingSuffix } = parseProperty(name);
-        suffix = typeof suffix === 'string' && suffix.length !== 0 ? suffix : bindingSuffix;
-        const entry = { name: property, suffix: suffix, value, sourceSpan, hasOverrideFlag };
-        if (isMapBased) {
-            this._styleMapInput = entry;
+        updateStatements.push(op.statement);
+    }
+    if (createStatements.length === 0 && updateStatements.length === 0) {
+        return null;
+    }
+    const createCond = maybeGenerateRfBlock(1, createStatements);
+    const updateCond = maybeGenerateRfBlock(2, updateStatements);
+    return fn([
+        new FnParam('rf'),
+        new FnParam('ctx'),
+    ], [
+        ...createCond,
+        ...updateCond,
+    ], 
+    /* type */ undefined, /* sourceSpan */ undefined, job.root.fnName);
+}
+
+const compatibilityMode = CompatibilityMode.TemplateDefinitionBuilder;
+// Schema containing DOM elements and their properties.
+const domSchema = new DomElementSchemaRegistry();
+// Tag name of the `ng-template` element.
+const NG_TEMPLATE_TAG_NAME$1 = 'ng-template';
+/**
+ * Process a template AST and convert it into a `ComponentCompilation` in the intermediate
+ * representation.
+ * TODO: Refactor more of the ingestion code into phases.
+ */
+function ingestComponent(componentName, template, constantPool, relativeContextFilePath, i18nUseExternalIds, deferBlocksMeta, allDeferrableDepsFn) {
+    const job = new ComponentCompilationJob(componentName, constantPool, compatibilityMode, relativeContextFilePath, i18nUseExternalIds, deferBlocksMeta, allDeferrableDepsFn);
+    ingestNodes(job.root, template);
+    return job;
+}
+/**
+ * Process a host binding AST and convert it into a `HostBindingCompilationJob` in the intermediate
+ * representation.
+ */
+function ingestHostBinding(input, bindingParser, constantPool) {
+    const job = new HostBindingCompilationJob(input.componentName, constantPool, compatibilityMode);
+    for (const property of input.properties ?? []) {
+        let bindingKind = BindingKind.Property;
+        // TODO: this should really be handled in the parser.
+        if (property.name.startsWith('attr.')) {
+            property.name = property.name.substring('attr.'.length);
+            bindingKind = BindingKind.Attribute;
         }
-        else {
-            (this._singleStyleInputs = this._singleStyleInputs || []).push(entry);
-            registerIntoMap(this._stylesIndex, property);
+        if (property.isAnimation) {
+            bindingKind = BindingKind.Animation;
         }
-        this._lastStylingInput = entry;
-        this._firstStylingInput = this._firstStylingInput || entry;
-        this._checkForPipes(value);
-        this.hasBindings = true;
-        return entry;
+        const securityContexts = bindingParser
+            .calcPossibleSecurityContexts(input.componentSelector, property.name, bindingKind === BindingKind.Attribute)
+            .filter(context => context !== SecurityContext.NONE);
+        ingestHostProperty(job, property, bindingKind, securityContexts);
     }
-    registerClassInput(name, isMapBased, value, sourceSpan) {
-        if (isEmptyExpression(value)) {
-            return null;
+    for (const [name, expr] of Object.entries(input.attributes) ?? []) {
+        const securityContexts = bindingParser.calcPossibleSecurityContexts(input.componentSelector, name, true)
+            .filter(context => context !== SecurityContext.NONE);
+        ingestHostAttribute(job, name, expr, securityContexts);
+    }
+    for (const event of input.events ?? []) {
+        ingestHostEvent(job, event);
+    }
+    return job;
+}
+// TODO: We should refactor the parser to use the same types and structures for host bindings as
+// with ordinary components. This would allow us to share a lot more ingestion code.
+function ingestHostProperty(job, property, bindingKind, securityContexts) {
+    let expression;
+    const ast = property.expression.ast;
+    if (ast instanceof Interpolation$1) {
+        expression = new Interpolation(ast.strings, ast.expressions.map(expr => convertAst(expr, job, property.sourceSpan)), []);
+    }
+    else {
+        expression = convertAst(ast, job, property.sourceSpan);
+    }
+    job.root.update.push(createBindingOp(job.root.xref, bindingKind, property.name, expression, null, securityContexts, false, false, null, /* TODO: How do Host bindings handle i18n attrs? */ null, property.sourceSpan));
+}
+function ingestHostAttribute(job, name, value, securityContexts) {
+    const attrBinding = createBindingOp(job.root.xref, BindingKind.Attribute, name, value, null, securityContexts, 
+    /* Host attributes should always be extracted to const hostAttrs, even if they are not
+     *strictly* text literals */
+    true, false, null, 
+    /* TODO */ null, 
+    /** TODO: May be null? */ value.sourceSpan);
+    job.root.update.push(attrBinding);
+}
+function ingestHostEvent(job, event) {
+    const [phase, target] = event.type !== 1 /* e.ParsedEventType.Animation */ ? [null, event.targetOrPhase] :
+        [event.targetOrPhase, null];
+    const eventBinding = createListenerOp(job.root.xref, new SlotHandle(), event.name, null, makeListenerHandlerOps(job.root, event.handler, event.handlerSpan), phase, target, true, event.sourceSpan);
+    job.root.create.push(eventBinding);
+}
+/**
+ * Ingest the nodes of a template AST into the given `ViewCompilation`.
+ */
+function ingestNodes(unit, template) {
+    for (const node of template) {
+        if (node instanceof Element$1) {
+            ingestElement(unit, node);
         }
-        const { property, hasOverrideFlag } = parseProperty(name);
-        const entry = { name: property, value, sourceSpan, hasOverrideFlag, suffix: null };
-        if (isMapBased) {
-            this._classMapInput = entry;
+        else if (node instanceof Template) {
+            ingestTemplate(unit, node);
         }
-        else {
-            (this._singleClassInputs = this._singleClassInputs || []).push(entry);
-            registerIntoMap(this._classesIndex, property);
+        else if (node instanceof Content) {
+            ingestContent(unit, node);
         }
-        this._lastStylingInput = entry;
-        this._firstStylingInput = this._firstStylingInput || entry;
-        this._checkForPipes(value);
-        this.hasBindings = true;
-        return entry;
-    }
-    _checkForPipes(value) {
-        if ((value instanceof ASTWithSource) && (value.ast instanceof BindingPipe)) {
-            this.hasBindingsWithPipes = true;
+        else if (node instanceof Text$3) {
+            ingestText(unit, node, null);
+        }
+        else if (node instanceof BoundText) {
+            ingestBoundText(unit, node, null);
+        }
+        else if (node instanceof IfBlock) {
+            ingestIfBlock(unit, node);
+        }
+        else if (node instanceof SwitchBlock) {
+            ingestSwitchBlock(unit, node);
+        }
+        else if (node instanceof DeferredBlock) {
+            ingestDeferBlock(unit, node);
+        }
+        else if (node instanceof Icu$1) {
+            ingestIcu(unit, node);
         }
+        else if (node instanceof ForLoopBlock) {
+            ingestForBlock(unit, node);
+        }
+        else {
+            throw new Error(`Unsupported template node: ${node.constructor.name}`);
+        }
+    }
+}
+/**
+ * Ingest an element AST from the template into the given `ViewCompilation`.
+ */
+function ingestElement(unit, element) {
+    if (element.i18n !== undefined &&
+        !(element.i18n instanceof Message || element.i18n instanceof TagPlaceholder)) {
+        throw Error(`Unhandled i18n metadata type for element: ${element.i18n.constructor.name}`);
+    }
+    const id = unit.job.allocateXrefId();
+    const [namespaceKey, elementName] = splitNsName(element.name);
+    const startOp = createElementStartOp(elementName, id, namespaceForKey(namespaceKey), element.i18n instanceof TagPlaceholder ? element.i18n : undefined, element.startSourceSpan, element.sourceSpan);
+    unit.create.push(startOp);
+    ingestElementBindings(unit, startOp, element);
+    ingestReferences(startOp, element);
+    // Start i18n, if needed, goes after the element create and bindings, but before the nodes
+    let i18nBlockId = null;
+    if (element.i18n instanceof Message) {
+        i18nBlockId = unit.job.allocateXrefId();
+        unit.create.push(createI18nStartOp(i18nBlockId, element.i18n, undefined, element.startSourceSpan));
+    }
+    ingestNodes(unit, element.children);
+    // The source span for the end op is typically the element closing tag. However, if no closing tag
+    // exists, such as in `<input>`, we use the start source span instead. Usually the start and end
+    // instructions will be collapsed into one `element` instruction, negating the purpose of this
+    // fallback, but in cases when it is not collapsed (such as an input with a binding), we still
+    // want to map the end instruction to the main element.
+    const endOp = createElementEndOp(id, element.endSourceSpan ?? element.startSourceSpan);
+    unit.create.push(endOp);
+    // If there is an i18n message associated with this element, insert i18n start and end ops.
+    if (i18nBlockId !== null) {
+        OpList.insertBefore(createI18nEndOp(i18nBlockId, element.endSourceSpan ?? element.startSourceSpan), endOp);
+    }
+}
+/**
+ * Ingest an `ng-template` node from the AST into the given `ViewCompilation`.
+ */
+function ingestTemplate(unit, tmpl) {
+    if (tmpl.i18n !== undefined &&
+        !(tmpl.i18n instanceof Message || tmpl.i18n instanceof TagPlaceholder)) {
+        throw Error(`Unhandled i18n metadata type for template: ${tmpl.i18n.constructor.name}`);
+    }
+    const childView = unit.job.allocateView(unit.xref);
+    let tagNameWithoutNamespace = tmpl.tagName;
+    let namespacePrefix = '';
+    if (tmpl.tagName) {
+        [namespacePrefix, tagNameWithoutNamespace] = splitNsName(tmpl.tagName);
+    }
+    const i18nPlaceholder = tmpl.i18n instanceof TagPlaceholder ? tmpl.i18n : undefined;
+    const namespace = namespaceForKey(namespacePrefix);
+    const functionNameSuffix = tagNameWithoutNamespace === null ?
+        '' :
+        prefixWithNamespace(tagNameWithoutNamespace, namespace);
+    const templateKind = isPlainTemplate(tmpl) ? TemplateKind.NgTemplate : TemplateKind.Structural;
+    const templateOp = createTemplateOp(childView.xref, templateKind, tagNameWithoutNamespace, functionNameSuffix, namespace, i18nPlaceholder, tmpl.startSourceSpan, tmpl.sourceSpan);
+    unit.create.push(templateOp);
+    ingestTemplateBindings(unit, templateOp, tmpl, templateKind);
+    ingestReferences(templateOp, tmpl);
+    ingestNodes(childView, tmpl.children);
+    for (const { name, value } of tmpl.variables) {
+        childView.contextVariables.set(name, value !== '' ? value : '$implicit');
+    }
+    // If this is a plain template and there is an i18n message associated with it, insert i18n start
+    // and end ops. For structural directive templates, the i18n ops will be added when ingesting the
+    // element/template the directive is placed on.
+    if (templateKind === TemplateKind.NgTemplate && tmpl.i18n instanceof Message) {
+        const id = unit.job.allocateXrefId();
+        OpList.insertAfter(createI18nStartOp(id, tmpl.i18n, undefined, tmpl.startSourceSpan), childView.create.head);
+        OpList.insertBefore(createI18nEndOp(id, tmpl.endSourceSpan ?? tmpl.startSourceSpan), childView.create.tail);
     }
-    /**
-     * Registers the element's static style string value to the builder.
-     *
-     * @param value the style string (e.g. `width:100px; height:200px;`)
-     */
-    registerStyleAttr(value) {
-        this._initialStyleValues = parse(value);
-        this._hasInitialValues = true;
+}
+/**
+ * Ingest a content node from the AST into the given `ViewCompilation`.
+ */
+function ingestContent(unit, content) {
+    if (content.i18n !== undefined && !(content.i18n instanceof TagPlaceholder)) {
+        throw Error(`Unhandled i18n metadata type for element: ${content.i18n.constructor.name}`);
     }
-    /**
-     * Registers the element's static class string value to the builder.
-     *
-     * @param value the className string (e.g. `disabled gold zoom`)
-     */
-    registerClassAttr(value) {
-        this._initialClassValues = value.trim().split(/\s+/g);
-        this._hasInitialValues = true;
+    const op = createProjectionOp(unit.job.allocateXrefId(), content.selector, content.i18n, content.sourceSpan);
+    for (const attr of content.attributes) {
+        const securityContext = domSchema.securityContext(content.name, attr.name, true);
+        unit.update.push(createBindingOp(op.xref, BindingKind.Attribute, attr.name, literal(attr.value), null, securityContext, true, false, null, asMessage(attr.i18n), attr.sourceSpan));
     }
-    /**
-     * Appends all styling-related expressions to the provided attrs array.
-     *
-     * @param attrs an existing array where each of the styling expressions
-     * will be inserted into.
-     */
-    populateInitialStylingAttrs(attrs) {
-        // [CLASS_MARKER, 'foo', 'bar', 'baz' ...]
-        if (this._initialClassValues.length) {
-            attrs.push(literal(1 /* AttributeMarker.Classes */));
-            for (let i = 0; i < this._initialClassValues.length; i++) {
-                attrs.push(literal(this._initialClassValues[i]));
-            }
+    unit.create.push(op);
+}
+/**
+ * Ingest a literal text node from the AST into the given `ViewCompilation`.
+ */
+function ingestText(unit, text, icuPlaceholder) {
+    unit.create.push(createTextOp(unit.job.allocateXrefId(), text.value, icuPlaceholder, text.sourceSpan));
+}
+/**
+ * Ingest an interpolated text node from the AST into the given `ViewCompilation`.
+ */
+function ingestBoundText(unit, text, icuPlaceholder) {
+    let value = text.value;
+    if (value instanceof ASTWithSource) {
+        value = value.ast;
+    }
+    if (!(value instanceof Interpolation$1)) {
+        throw new Error(`AssertionError: expected Interpolation for BoundText node, got ${value.constructor.name}`);
+    }
+    if (text.i18n !== undefined && !(text.i18n instanceof Container)) {
+        throw Error(`Unhandled i18n metadata type for text interpolation: ${text.i18n?.constructor.name}`);
+    }
+    const i18nPlaceholders = text.i18n instanceof Container ?
+        text.i18n.children
+            .filter((node) => node instanceof Placeholder)
+            .map(placeholder => placeholder.name) :
+        [];
+    if (i18nPlaceholders.length > 0 && i18nPlaceholders.length !== value.expressions.length) {
+        throw Error(`Unexpected number of i18n placeholders (${value.expressions.length}) for BoundText with ${value.expressions.length} expressions`);
+    }
+    const textXref = unit.job.allocateXrefId();
+    unit.create.push(createTextOp(textXref, '', icuPlaceholder, text.sourceSpan));
+    // TemplateDefinitionBuilder does not generate source maps for sub-expressions inside an
+    // interpolation. We copy that behavior in compatibility mode.
+    // TODO: is it actually correct to generate these extra maps in modern mode?
+    const baseSourceSpan = unit.job.compatibility ? null : text.sourceSpan;
+    unit.update.push(createInterpolateTextOp(textXref, new Interpolation(value.strings, value.expressions.map(expr => convertAst(expr, unit.job, baseSourceSpan)), i18nPlaceholders), text.sourceSpan));
+}
+/**
+ * Ingest an `@if` block into the given `ViewCompilation`.
+ */
+function ingestIfBlock(unit, ifBlock) {
+    let firstXref = null;
+    let firstSlotHandle = null;
+    let conditions = [];
+    for (let i = 0; i < ifBlock.branches.length; i++) {
+        const ifCase = ifBlock.branches[i];
+        const cView = unit.job.allocateView(unit.xref);
+        let tagName = null;
+        // Only the first branch can be used for projection, because the conditional
+        // uses the container of the first branch as the insertion point for all branches.
+        if (i === 0) {
+            tagName = ingestControlFlowInsertionPoint(unit, cView.xref, ifCase);
         }
-        // [STYLE_MARKER, 'width', '200px', 'height', '100px', ...]
-        if (this._initialStyleValues.length) {
-            attrs.push(literal(2 /* AttributeMarker.Styles */));
-            for (let i = 0; i < this._initialStyleValues.length; i += 2) {
-                attrs.push(literal(this._initialStyleValues[i]), literal(this._initialStyleValues[i + 1]));
+        if (ifCase.expressionAlias !== null) {
+            cView.contextVariables.set(ifCase.expressionAlias.name, CTX_REF);
+        }
+        let ifCaseI18nMeta = undefined;
+        if (ifCase.i18n !== undefined) {
+            if (!(ifCase.i18n instanceof BlockPlaceholder)) {
+                throw Error(`Unhandled i18n metadata type for if block: ${ifCase.i18n?.constructor.name}`);
             }
+            ifCaseI18nMeta = ifCase.i18n;
         }
-    }
-    /**
-     * Builds an instruction with all the expressions and parameters for `elementHostAttrs`.
-     *
-     * The instruction generation code below is used for producing the AOT statement code which is
-     * responsible for registering initial styles (within a directive hostBindings' creation block),
-     * as well as any of the provided attribute values, to the directive host element.
-     */
-    assignHostAttrs(attrs, definitionMap) {
-        if (this._directiveExpr && (attrs.length || this._hasInitialValues)) {
-            this.populateInitialStylingAttrs(attrs);
-            definitionMap.set('hostAttrs', literalArr(attrs));
+        const templateOp = createTemplateOp(cView.xref, TemplateKind.Block, tagName, 'Conditional', Namespace.HTML, ifCaseI18nMeta, ifCase.startSourceSpan, ifCase.sourceSpan);
+        unit.create.push(templateOp);
+        if (firstXref === null) {
+            firstXref = cView.xref;
+            firstSlotHandle = templateOp.handle;
         }
+        const caseExpr = ifCase.expression ? convertAst(ifCase.expression, unit.job, null) : null;
+        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, templateOp.xref, templateOp.handle, ifCase.expressionAlias);
+        conditions.push(conditionalCaseExpr);
+        ingestNodes(cView, ifCase.children);
     }
-    /**
-     * Builds an instruction with all the expressions and parameters for `classMap`.
-     *
-     * The instruction data will contain all expressions for `classMap` to function
-     * which includes the `[class]` expression params.
-     */
-    buildClassMapInstruction(valueConverter) {
-        if (this._classMapInput) {
-            return this._buildMapBasedInstruction(valueConverter, true, this._classMapInput);
-        }
+    const conditional = createConditionalOp(firstXref, firstSlotHandle, null, conditions, ifBlock.sourceSpan);
+    unit.update.push(conditional);
+}
+/**
+ * Ingest an `@switch` block into the given `ViewCompilation`.
+ */
+function ingestSwitchBlock(unit, switchBlock) {
+    // Don't ingest empty switches since they won't render anything.
+    if (switchBlock.cases.length === 0) {
+        return;
+    }
+    let firstXref = null;
+    let firstSlotHandle = null;
+    let conditions = [];
+    for (const switchCase of switchBlock.cases) {
+        const cView = unit.job.allocateView(unit.xref);
+        let switchCaseI18nMeta = undefined;
+        if (switchCase.i18n !== undefined) {
+            if (!(switchCase.i18n instanceof BlockPlaceholder)) {
+                throw Error(`Unhandled i18n metadata type for switch block: ${switchCase.i18n?.constructor.name}`);
+            }
+            switchCaseI18nMeta = switchCase.i18n;
+        }
+        const templateOp = createTemplateOp(cView.xref, TemplateKind.Block, null, 'Case', Namespace.HTML, switchCaseI18nMeta, switchCase.startSourceSpan, switchCase.sourceSpan);
+        unit.create.push(templateOp);
+        if (firstXref === null) {
+            firstXref = cView.xref;
+            firstSlotHandle = templateOp.handle;
+        }
+        const caseExpr = switchCase.expression ?
+            convertAst(switchCase.expression, unit.job, switchBlock.startSourceSpan) :
+            null;
+        const conditionalCaseExpr = new ConditionalCaseExpr(caseExpr, templateOp.xref, templateOp.handle);
+        conditions.push(conditionalCaseExpr);
+        ingestNodes(cView, switchCase.children);
+    }
+    const conditional = createConditionalOp(firstXref, firstSlotHandle, convertAst(switchBlock.expression, unit.job, null), conditions, switchBlock.sourceSpan);
+    unit.update.push(conditional);
+}
+function ingestDeferView(unit, suffix, i18nMeta, children, sourceSpan) {
+    if (i18nMeta !== undefined && !(i18nMeta instanceof BlockPlaceholder)) {
+        throw Error('Unhandled i18n metadata type for defer block');
+    }
+    if (children === undefined) {
         return null;
     }
-    /**
-     * Builds an instruction with all the expressions and parameters for `styleMap`.
-     *
-     * The instruction data will contain all expressions for `styleMap` to function
-     * which includes the `[style]` expression params.
-     */
-    buildStyleMapInstruction(valueConverter) {
-        if (this._styleMapInput) {
-            return this._buildMapBasedInstruction(valueConverter, false, this._styleMapInput);
+    const secondaryView = unit.job.allocateView(unit.xref);
+    ingestNodes(secondaryView, children);
+    const templateOp = createTemplateOp(secondaryView.xref, TemplateKind.Block, null, `Defer${suffix}`, Namespace.HTML, i18nMeta, sourceSpan, sourceSpan);
+    unit.create.push(templateOp);
+    return templateOp;
+}
+function ingestDeferBlock(unit, deferBlock) {
+    const blockMeta = unit.job.deferBlocksMeta.get(deferBlock);
+    if (blockMeta === undefined) {
+        throw new Error(`AssertionError: unable to find metadata for deferred block`);
+    }
+    // Generate the defer main view and all secondary views.
+    const main = ingestDeferView(unit, '', deferBlock.i18n, deferBlock.children, deferBlock.sourceSpan);
+    const loading = ingestDeferView(unit, 'Loading', deferBlock.loading?.i18n, deferBlock.loading?.children, deferBlock.loading?.sourceSpan);
+    const placeholder = ingestDeferView(unit, 'Placeholder', deferBlock.placeholder?.i18n, deferBlock.placeholder?.children, deferBlock.placeholder?.sourceSpan);
+    const error = ingestDeferView(unit, 'Error', deferBlock.error?.i18n, deferBlock.error?.children, deferBlock.error?.sourceSpan);
+    // Create the main defer op, and ops for all secondary views.
+    const deferXref = unit.job.allocateXrefId();
+    const deferOp = createDeferOp(deferXref, main.xref, main.handle, blockMeta, unit.job.allDeferrableDepsFn, deferBlock.sourceSpan);
+    deferOp.placeholderView = placeholder?.xref ?? null;
+    deferOp.placeholderSlot = placeholder?.handle ?? null;
+    deferOp.loadingSlot = loading?.handle ?? null;
+    deferOp.errorSlot = error?.handle ?? null;
+    deferOp.placeholderMinimumTime = deferBlock.placeholder?.minimumTime ?? null;
+    deferOp.loadingMinimumTime = deferBlock.loading?.minimumTime ?? null;
+    deferOp.loadingAfterTime = deferBlock.loading?.afterTime ?? null;
+    unit.create.push(deferOp);
+    // Configure all defer `on` conditions.
+    // TODO: refactor prefetch triggers to use a separate op type, with a shared superclass. This will
+    // make it easier to refactor prefetch behavior in the future.
+    let prefetch = false;
+    let deferOnOps = [];
+    let deferWhenOps = [];
+    for (const triggers of [deferBlock.triggers, deferBlock.prefetchTriggers]) {
+        if (triggers.idle !== undefined) {
+            const deferOnOp = createDeferOnOp(deferXref, { kind: DeferTriggerKind.Idle }, prefetch, triggers.idle.sourceSpan);
+            deferOnOps.push(deferOnOp);
+        }
+        if (triggers.immediate !== undefined) {
+            const deferOnOp = createDeferOnOp(deferXref, { kind: DeferTriggerKind.Immediate }, prefetch, triggers.immediate.sourceSpan);
+            deferOnOps.push(deferOnOp);
+        }
+        if (triggers.timer !== undefined) {
+            const deferOnOp = createDeferOnOp(deferXref, { kind: DeferTriggerKind.Timer, delay: triggers.timer.delay }, prefetch, triggers.timer.sourceSpan);
+            deferOnOps.push(deferOnOp);
+        }
+        if (triggers.hover !== undefined) {
+            const deferOnOp = createDeferOnOp(deferXref, {
+                kind: DeferTriggerKind.Hover,
+                targetName: triggers.hover.reference,
+                targetXref: null,
+                targetSlot: null,
+                targetView: null,
+                targetSlotViewSteps: null,
+            }, prefetch, triggers.hover.sourceSpan);
+            deferOnOps.push(deferOnOp);
+        }
+        if (triggers.interaction !== undefined) {
+            const deferOnOp = createDeferOnOp(deferXref, {
+                kind: DeferTriggerKind.Interaction,
+                targetName: triggers.interaction.reference,
+                targetXref: null,
+                targetSlot: null,
+                targetView: null,
+                targetSlotViewSteps: null,
+            }, prefetch, triggers.interaction.sourceSpan);
+            deferOnOps.push(deferOnOp);
+        }
+        if (triggers.viewport !== undefined) {
+            const deferOnOp = createDeferOnOp(deferXref, {
+                kind: DeferTriggerKind.Viewport,
+                targetName: triggers.viewport.reference,
+                targetXref: null,
+                targetSlot: null,
+                targetView: null,
+                targetSlotViewSteps: null,
+            }, prefetch, triggers.viewport.sourceSpan);
+            deferOnOps.push(deferOnOp);
+        }
+        if (triggers.when !== undefined) {
+            if (triggers.when.value instanceof Interpolation$1) {
+                // TemplateDefinitionBuilder supports this case, but it's very strange to me. What would it
+                // even mean?
+                throw new Error(`Unexpected interpolation in defer block when trigger`);
+            }
+            const deferOnOp = createDeferWhenOp(deferXref, convertAst(triggers.when.value, unit.job, triggers.when.sourceSpan), prefetch, triggers.when.sourceSpan);
+            deferWhenOps.push(deferOnOp);
+        }
+        // If no (non-prefetching) defer triggers were provided, default to `idle`.
+        if (deferOnOps.length === 0 && deferWhenOps.length === 0) {
+            deferOnOps.push(createDeferOnOp(deferXref, { kind: DeferTriggerKind.Idle }, false, null));
+        }
+        prefetch = true;
+    }
+    unit.create.push(deferOnOps);
+    unit.update.push(deferWhenOps);
+}
+function ingestIcu(unit, icu) {
+    if (icu.i18n instanceof Message && isSingleI18nIcu(icu.i18n)) {
+        const xref = unit.job.allocateXrefId();
+        unit.create.push(createIcuStartOp(xref, icu.i18n, icuFromI18nMessage(icu.i18n).name, null));
+        for (const [placeholder, text] of Object.entries({ ...icu.vars, ...icu.placeholders })) {
+            if (text instanceof BoundText) {
+                ingestBoundText(unit, text, placeholder);
+            }
+            else {
+                ingestText(unit, text, placeholder);
+            }
         }
-        return null;
+        unit.create.push(createIcuEndOp(xref));
     }
-    _buildMapBasedInstruction(valueConverter, isClassBased, stylingInput) {
-        // each styling binding value is stored in the LView
-        // map-based bindings allocate two slots: one for the
-        // previous binding value and another for the previous
-        // className or style attribute value.
-        let totalBindingSlotsRequired = MIN_STYLING_BINDING_SLOTS_REQUIRED;
-        // these values must be outside of the update block so that they can
-        // be evaluated (the AST visit call) during creation time so that any
-        // pipes can be picked up in time before the template is built
-        const mapValue = stylingInput.value.visit(valueConverter);
-        let reference;
-        if (mapValue instanceof Interpolation$1) {
-            totalBindingSlotsRequired += mapValue.expressions.length;
-            reference = isClassBased ? getClassMapInterpolationExpression(mapValue) :
-                getStyleMapInterpolationExpression(mapValue);
+    else {
+        throw Error(`Unhandled i18n metadata type for ICU: ${icu.i18n?.constructor.name}`);
+    }
+}
+/**
+ * Ingest an `@for` block into the given `ViewCompilation`.
+ */
+function ingestForBlock(unit, forBlock) {
+    const repeaterView = unit.job.allocateView(unit.xref);
+    // Set all the context variables and aliases available in the repeater.
+    repeaterView.contextVariables.set(forBlock.item.name, forBlock.item.value);
+    repeaterView.contextVariables.set(forBlock.contextVariables.$index.name, forBlock.contextVariables.$index.value);
+    repeaterView.contextVariables.set(forBlock.contextVariables.$count.name, forBlock.contextVariables.$count.value);
+    // We copy TemplateDefinitionBuilder's scheme of creating names for `$count` and `$index` that are
+    // suffixed with special information, to disambiguate which level of nested loop the below aliases
+    // refer to.
+    // TODO: We should refactor Template Pipeline's variable phases to gracefully handle shadowing,
+    // and arbitrarily many levels of variables depending on each other.
+    const indexName = `ɵ${forBlock.contextVariables.$index.name}_${repeaterView.xref}`;
+    const countName = `ɵ${forBlock.contextVariables.$count.name}_${repeaterView.xref}`;
+    repeaterView.contextVariables.set(indexName, forBlock.contextVariables.$index.value);
+    repeaterView.contextVariables.set(countName, forBlock.contextVariables.$count.value);
+    repeaterView.aliases.add({
+        kind: SemanticVariableKind.Alias,
+        name: null,
+        identifier: forBlock.contextVariables.$first.name,
+        expression: new LexicalReadExpr(indexName).identical(literal(0))
+    });
+    repeaterView.aliases.add({
+        kind: SemanticVariableKind.Alias,
+        name: null,
+        identifier: forBlock.contextVariables.$last.name,
+        expression: new LexicalReadExpr(indexName).identical(new LexicalReadExpr(countName).minus(literal(1)))
+    });
+    repeaterView.aliases.add({
+        kind: SemanticVariableKind.Alias,
+        name: null,
+        identifier: forBlock.contextVariables.$even.name,
+        expression: new LexicalReadExpr(indexName).modulo(literal(2)).identical(literal(0))
+    });
+    repeaterView.aliases.add({
+        kind: SemanticVariableKind.Alias,
+        name: null,
+        identifier: forBlock.contextVariables.$odd.name,
+        expression: new LexicalReadExpr(indexName).modulo(literal(2)).notIdentical(literal(0))
+    });
+    const sourceSpan = convertSourceSpan(forBlock.trackBy.span, forBlock.sourceSpan);
+    const track = convertAst(forBlock.trackBy, unit.job, sourceSpan);
+    ingestNodes(repeaterView, forBlock.children);
+    let emptyView = null;
+    let emptyTagName = null;
+    if (forBlock.empty !== null) {
+        emptyView = unit.job.allocateView(unit.xref);
+        ingestNodes(emptyView, forBlock.empty.children);
+        emptyTagName = ingestControlFlowInsertionPoint(unit, emptyView.xref, forBlock.empty);
+    }
+    const varNames = {
+        $index: forBlock.contextVariables.$index.name,
+        $count: forBlock.contextVariables.$count.name,
+        $first: forBlock.contextVariables.$first.name,
+        $last: forBlock.contextVariables.$last.name,
+        $even: forBlock.contextVariables.$even.name,
+        $odd: forBlock.contextVariables.$odd.name,
+        $implicit: forBlock.item.name,
+    };
+    if (forBlock.i18n !== undefined && !(forBlock.i18n instanceof BlockPlaceholder)) {
+        throw Error('AssertionError: Unhandled i18n metadata type or @for');
+    }
+    if (forBlock.empty?.i18n !== undefined &&
+        !(forBlock.empty.i18n instanceof BlockPlaceholder)) {
+        throw Error('AssertionError: Unhandled i18n metadata type or @empty');
+    }
+    const i18nPlaceholder = forBlock.i18n;
+    const emptyI18nPlaceholder = forBlock.empty?.i18n;
+    const tagName = ingestControlFlowInsertionPoint(unit, repeaterView.xref, forBlock);
+    const repeaterCreate = createRepeaterCreateOp(repeaterView.xref, emptyView?.xref ?? null, tagName, track, varNames, emptyTagName, i18nPlaceholder, emptyI18nPlaceholder, forBlock.startSourceSpan, forBlock.sourceSpan);
+    unit.create.push(repeaterCreate);
+    const expression = convertAst(forBlock.expression, unit.job, convertSourceSpan(forBlock.expression.span, forBlock.sourceSpan));
+    const repeater = createRepeaterOp(repeaterCreate.xref, repeaterCreate.handle, expression, forBlock.sourceSpan);
+    unit.update.push(repeater);
+}
+/**
+ * Convert a template AST expression into an output AST expression.
+ */
+function convertAst(ast, job, baseSourceSpan) {
+    if (ast instanceof ASTWithSource) {
+        return convertAst(ast.ast, job, baseSourceSpan);
+    }
+    else if (ast instanceof PropertyRead) {
+        const isThisReceiver = ast.receiver instanceof ThisReceiver;
+        // Whether this is an implicit receiver, *excluding* explicit reads of `this`.
+        const isImplicitReceiver = ast.receiver instanceof ImplicitReceiver && !(ast.receiver instanceof ThisReceiver);
+        // Whether the  name of the read is a node that should be never retain its explicit this
+        // receiver.
+        const isSpecialNode = ast.name === '$any' || ast.name === '$event';
+        // TODO: The most sensible condition here would be simply `isImplicitReceiver`, to convert only
+        // actual implicit `this` reads, and not explicit ones. However, TemplateDefinitionBuilder (and
+        // the Typecheck block!) both have the same bug, in which they also consider explicit `this`
+        // reads to be implicit. This causes problems when the explicit `this` read is inside a
+        // template with a context that also provides the variable name being read:
+        // ```
+        // <ng-template let-a>{{this.a}}</ng-template>
+        // ```
+        // The whole point of the explicit `this` was to access the class property, but TDB and the
+        // current TCB treat the read as implicit, and give you the context property instead!
+        //
+        // For now, we emulate this old behvaior by aggressively converting explicit reads to to
+        // implicit reads, except for the special cases that TDB and the current TCB protect. However,
+        // it would be an improvement to fix this.
+        //
+        // See also the corresponding comment for the TCB, in `type_check_block.ts`.
+        if (isImplicitReceiver || (isThisReceiver && !isSpecialNode)) {
+            return new LexicalReadExpr(ast.name);
         }
         else {
-            reference = isClassBased ? Identifiers.classMap : Identifiers.styleMap;
+            return new ReadPropExpr(convertAst(ast.receiver, job, baseSourceSpan), ast.name, null, convertSourceSpan(ast.span, baseSourceSpan));
         }
-        return {
-            reference,
-            calls: [{
-                    supportsInterpolation: true,
-                    sourceSpan: stylingInput.sourceSpan,
-                    allocateBindingSlots: totalBindingSlotsRequired,
-                    params: (convertFn) => {
-                        const convertResult = convertFn(mapValue);
-                        const params = Array.isArray(convertResult) ? convertResult : [convertResult];
-                        return params;
-                    }
-                }]
-        };
     }
-    _buildSingleInputs(reference, inputs, valueConverter, getInterpolationExpressionFn, isClassBased) {
-        const instructions = [];
-        inputs.forEach(input => {
-            const previousInstruction = instructions[instructions.length - 1];
-            const value = input.value.visit(valueConverter);
-            let referenceForCall = reference;
-            // each styling binding value is stored in the LView
-            // but there are two values stored for each binding:
-            //   1) the value itself
-            //   2) an intermediate value (concatenation of style up to this point).
-            //      We need to store the intermediate value so that we don't allocate
-            //      the strings on each CD.
-            let totalBindingSlotsRequired = MIN_STYLING_BINDING_SLOTS_REQUIRED;
-            if (value instanceof Interpolation$1) {
-                totalBindingSlotsRequired += value.expressions.length;
-                if (getInterpolationExpressionFn) {
-                    referenceForCall = getInterpolationExpressionFn(value);
-                }
-            }
-            const call = {
-                sourceSpan: input.sourceSpan,
-                allocateBindingSlots: totalBindingSlotsRequired,
-                supportsInterpolation: !!getInterpolationExpressionFn,
-                params: (convertFn) => {
-                    // params => stylingProp(propName, value, suffix)
-                    const params = [];
-                    params.push(literal(input.name));
-                    const convertResult = convertFn(value);
-                    if (Array.isArray(convertResult)) {
-                        params.push(...convertResult);
-                    }
-                    else {
-                        params.push(convertResult);
-                    }
-                    // [style.prop] bindings may use suffix values (e.g. px, em, etc...), therefore,
-                    // if that is detected then we need to pass that in as an optional param.
-                    if (!isClassBased && input.suffix !== null) {
-                        params.push(literal(input.suffix));
-                    }
-                    return params;
-                }
-            };
-            // If we ended up generating a call to the same instruction as the previous styling property
-            // we can chain the calls together safely to save some bytes, otherwise we have to generate
-            // a separate instruction call. This is primarily a concern with interpolation instructions
-            // where we may start off with one `reference`, but end up using another based on the
-            // number of interpolations.
-            if (previousInstruction && previousInstruction.reference === referenceForCall) {
-                previousInstruction.calls.push(call);
-            }
-            else {
-                instructions.push({ reference: referenceForCall, calls: [call] });
-            }
+    else if (ast instanceof PropertyWrite) {
+        if (ast.receiver instanceof ImplicitReceiver) {
+            return new WritePropExpr(
+            // TODO: Is it correct to always use the root context in place of the implicit receiver?
+            new ContextExpr(job.root.xref), ast.name, convertAst(ast.value, job, baseSourceSpan), null, convertSourceSpan(ast.span, baseSourceSpan));
+        }
+        return new WritePropExpr(convertAst(ast.receiver, job, baseSourceSpan), ast.name, convertAst(ast.value, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof KeyedWrite) {
+        return new WriteKeyExpr(convertAst(ast.receiver, job, baseSourceSpan), convertAst(ast.key, job, baseSourceSpan), convertAst(ast.value, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof Call) {
+        if (ast.receiver instanceof ImplicitReceiver) {
+            throw new Error(`Unexpected ImplicitReceiver`);
+        }
+        else {
+            return new InvokeFunctionExpr(convertAst(ast.receiver, job, baseSourceSpan), ast.args.map(arg => convertAst(arg, job, baseSourceSpan)), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+        }
+    }
+    else if (ast instanceof LiteralPrimitive) {
+        return literal(ast.value, undefined, convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof Unary) {
+        switch (ast.operator) {
+            case '+':
+                return new UnaryOperatorExpr(exports.UnaryOperator.Plus, convertAst(ast.expr, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+            case '-':
+                return new UnaryOperatorExpr(exports.UnaryOperator.Minus, convertAst(ast.expr, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+            default:
+                throw new Error(`AssertionError: unknown unary operator ${ast.operator}`);
+        }
+    }
+    else if (ast instanceof Binary) {
+        const operator = BINARY_OPERATORS.get(ast.operation);
+        if (operator === undefined) {
+            throw new Error(`AssertionError: unknown binary operator ${ast.operation}`);
+        }
+        return new BinaryOperatorExpr(operator, convertAst(ast.left, job, baseSourceSpan), convertAst(ast.right, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof ThisReceiver) {
+        // TODO: should context expressions have source maps?
+        return new ContextExpr(job.root.xref);
+    }
+    else if (ast instanceof KeyedRead) {
+        return new ReadKeyExpr(convertAst(ast.receiver, job, baseSourceSpan), convertAst(ast.key, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof Chain) {
+        throw new Error(`AssertionError: Chain in unknown context`);
+    }
+    else if (ast instanceof LiteralMap) {
+        const entries = ast.keys.map((key, idx) => {
+            const value = ast.values[idx];
+            // TODO: should literals have source maps, or do we just map the whole surrounding
+            // expression?
+            return new LiteralMapEntry(key.key, convertAst(value, job, baseSourceSpan), key.quoted);
         });
-        return instructions;
+        return new LiteralMapExpr(entries, undefined, convertSourceSpan(ast.span, baseSourceSpan));
     }
-    _buildClassInputs(valueConverter) {
-        if (this._singleClassInputs) {
-            return this._buildSingleInputs(Identifiers.classProp, this._singleClassInputs, valueConverter, null, true);
+    else if (ast instanceof LiteralArray) {
+        // TODO: should literals have source maps, or do we just map the whole surrounding expression?
+        return new LiteralArrayExpr(ast.expressions.map(expr => convertAst(expr, job, baseSourceSpan)));
+    }
+    else if (ast instanceof Conditional) {
+        return new ConditionalExpr(convertAst(ast.condition, job, baseSourceSpan), convertAst(ast.trueExp, job, baseSourceSpan), convertAst(ast.falseExp, job, baseSourceSpan), undefined, convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof NonNullAssert) {
+        // A non-null assertion shouldn't impact generated instructions, so we can just drop it.
+        return convertAst(ast.expression, job, baseSourceSpan);
+    }
+    else if (ast instanceof BindingPipe) {
+        // TODO: pipes should probably have source maps; figure out details.
+        return new PipeBindingExpr(job.allocateXrefId(), new SlotHandle(), ast.name, [
+            convertAst(ast.exp, job, baseSourceSpan),
+            ...ast.args.map(arg => convertAst(arg, job, baseSourceSpan)),
+        ]);
+    }
+    else if (ast instanceof SafeKeyedRead) {
+        return new SafeKeyedReadExpr(convertAst(ast.receiver, job, baseSourceSpan), convertAst(ast.key, job, baseSourceSpan), convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof SafePropertyRead) {
+        // TODO: source span
+        return new SafePropertyReadExpr(convertAst(ast.receiver, job, baseSourceSpan), ast.name);
+    }
+    else if (ast instanceof SafeCall) {
+        // TODO: source span
+        return new SafeInvokeFunctionExpr(convertAst(ast.receiver, job, baseSourceSpan), ast.args.map(a => convertAst(a, job, baseSourceSpan)));
+    }
+    else if (ast instanceof EmptyExpr$1) {
+        return new EmptyExpr(convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else if (ast instanceof PrefixNot) {
+        return not(convertAst(ast.expression, job, baseSourceSpan), convertSourceSpan(ast.span, baseSourceSpan));
+    }
+    else {
+        throw new Error(`Unhandled expression type "${ast.constructor.name}" in file "${baseSourceSpan?.start.file.url}"`);
+    }
+}
+function convertAstWithInterpolation(job, value, i18nMeta, sourceSpan) {
+    let expression;
+    if (value instanceof Interpolation$1) {
+        expression = new Interpolation(value.strings, value.expressions.map(e => convertAst(e, job, sourceSpan ?? null)), Object.keys(asMessage(i18nMeta)?.placeholders ?? {}));
+    }
+    else if (value instanceof AST) {
+        expression = convertAst(value, job, sourceSpan ?? null);
+    }
+    else {
+        expression = literal(value);
+    }
+    return expression;
+}
+// TODO: Can we populate Template binding kinds in ingest?
+const BINDING_KINDS = new Map([
+    [0 /* e.BindingType.Property */, BindingKind.Property],
+    [5 /* e.BindingType.TwoWay */, BindingKind.TwoWayProperty],
+    [1 /* e.BindingType.Attribute */, BindingKind.Attribute],
+    [2 /* e.BindingType.Class */, BindingKind.ClassName],
+    [3 /* e.BindingType.Style */, BindingKind.StyleProperty],
+    [4 /* e.BindingType.Animation */, BindingKind.Animation],
+]);
+/**
+ * Checks whether the given template is a plain ng-template (as opposed to another kind of template
+ * such as a structural directive template or control flow template). This is checked based on the
+ * tagName. We can expect that only plain ng-templates will come through with a tagName of
+ * 'ng-template'.
+ *
+ * Here are some of the cases we expect:
+ *
+ * | Angular HTML                       | Template tagName   |
+ * | ---------------------------------- | ------------------ |
+ * | `<ng-template>`                    | 'ng-template'      |
+ * | `<div *ngIf="true">`               | 'div'              |
+ * | `<svg><ng-template>`               | 'svg:ng-template'  |
+ * | `@if (true) {`                     | 'Conditional'      |
+ * | `<ng-template *ngIf>` (plain)      | 'ng-template'      |
+ * | `<ng-template *ngIf>` (structural) | null               |
+ */
+function isPlainTemplate(tmpl) {
+    return splitNsName(tmpl.tagName ?? '')[1] === NG_TEMPLATE_TAG_NAME$1;
+}
+/**
+ * Ensures that the i18nMeta, if provided, is an i18n.Message.
+ */
+function asMessage(i18nMeta) {
+    if (i18nMeta == null) {
+        return null;
+    }
+    if (!(i18nMeta instanceof Message)) {
+        throw Error(`Expected i18n meta to be a Message, but got: ${i18nMeta.constructor.name}`);
+    }
+    return i18nMeta;
+}
+/**
+ * Process all of the bindings on an element in the template AST and convert them to their IR
+ * representation.
+ */
+function ingestElementBindings(unit, op, element) {
+    let bindings = new Array();
+    let i18nAttributeBindingNames = new Set();
+    for (const attr of element.attributes) {
+        // Attribute literal bindings, such as `attr.foo="bar"`.
+        const securityContext = domSchema.securityContext(element.name, attr.name, true);
+        bindings.push(createBindingOp(op.xref, BindingKind.Attribute, attr.name, convertAstWithInterpolation(unit.job, attr.value, attr.i18n), null, securityContext, true, false, null, asMessage(attr.i18n), attr.sourceSpan));
+        if (attr.i18n) {
+            i18nAttributeBindingNames.add(attr.name);
         }
-        return [];
     }
-    _buildStyleInputs(valueConverter) {
-        if (this._singleStyleInputs) {
-            return this._buildSingleInputs(Identifiers.styleProp, this._singleStyleInputs, valueConverter, getStylePropInterpolationExpression, false);
+    for (const input of element.inputs) {
+        if (i18nAttributeBindingNames.has(input.name)) {
+            console.error(`On component ${unit.job.componentName}, the binding ${input
+                .name} is both an i18n attribute and a property. You may want to remove the property binding. This will become a compilation error in future versions of Angular.`);
         }
-        return [];
+        // All dynamic bindings (both attribute and property bindings).
+        bindings.push(createBindingOp(op.xref, BINDING_KINDS.get(input.type), input.name, convertAstWithInterpolation(unit.job, astOf(input.value), input.i18n), input.unit, input.securityContext, false, false, null, asMessage(input.i18n) ?? null, input.sourceSpan));
     }
-    /**
-     * Constructs all instructions which contain the expressions that will be placed
-     * into the update block of a template function or a directive hostBindings function.
-     */
-    buildUpdateLevelInstructions(valueConverter) {
-        const instructions = [];
-        if (this.hasBindings) {
-            const styleMapInstruction = this.buildStyleMapInstruction(valueConverter);
-            if (styleMapInstruction) {
-                instructions.push(styleMapInstruction);
+    unit.create.push(bindings.filter((b) => b?.kind === OpKind.ExtractedAttribute));
+    unit.update.push(bindings.filter((b) => b?.kind === OpKind.Binding));
+    for (const output of element.outputs) {
+        if (output.type === 1 /* e.ParsedEventType.Animation */ && output.phase === null) {
+            throw Error('Animation listener should have a phase');
+        }
+        if (output.type === 2 /* e.ParsedEventType.TwoWay */) {
+            unit.create.push(createTwoWayListenerOp(op.xref, op.handle, output.name, op.tag, makeTwoWayListenerHandlerOps(unit, output.handler, output.handlerSpan), output.sourceSpan));
+        }
+        else {
+            unit.create.push(createListenerOp(op.xref, op.handle, output.name, op.tag, makeListenerHandlerOps(unit, output.handler, output.handlerSpan), output.phase, output.target, false, output.sourceSpan));
+        }
+    }
+    // If any of the bindings on this element have an i18n message, then an i18n attrs configuration
+    // op is also required.
+    if (bindings.some(b => b?.i18nMessage) !== null) {
+        unit.create.push(createI18nAttributesOp(unit.job.allocateXrefId(), new SlotHandle(), op.xref));
+    }
+}
+/**
+ * Process all of the bindings on a template in the template AST and convert them to their IR
+ * representation.
+ */
+function ingestTemplateBindings(unit, op, template, templateKind) {
+    let bindings = new Array();
+    for (const attr of template.templateAttrs) {
+        if (attr instanceof TextAttribute) {
+            const securityContext = domSchema.securityContext(NG_TEMPLATE_TAG_NAME$1, attr.name, true);
+            bindings.push(createTemplateBinding(unit, op.xref, 1 /* e.BindingType.Attribute */, attr.name, attr.value, null, securityContext, true, templateKind, asMessage(attr.i18n), attr.sourceSpan));
+        }
+        else {
+            bindings.push(createTemplateBinding(unit, op.xref, attr.type, attr.name, astOf(attr.value), attr.unit, attr.securityContext, true, templateKind, asMessage(attr.i18n), attr.sourceSpan));
+        }
+    }
+    for (const attr of template.attributes) {
+        // Attribute literal bindings, such as `attr.foo="bar"`.
+        const securityContext = domSchema.securityContext(NG_TEMPLATE_TAG_NAME$1, attr.name, true);
+        bindings.push(createTemplateBinding(unit, op.xref, 1 /* e.BindingType.Attribute */, attr.name, attr.value, null, securityContext, false, templateKind, asMessage(attr.i18n), attr.sourceSpan));
+    }
+    for (const input of template.inputs) {
+        // Dynamic bindings (both attribute and property bindings).
+        bindings.push(createTemplateBinding(unit, op.xref, input.type, input.name, astOf(input.value), input.unit, input.securityContext, false, templateKind, asMessage(input.i18n), input.sourceSpan));
+    }
+    unit.create.push(bindings.filter((b) => b?.kind === OpKind.ExtractedAttribute));
+    unit.update.push(bindings.filter((b) => b?.kind === OpKind.Binding));
+    for (const output of template.outputs) {
+        if (output.type === 1 /* e.ParsedEventType.Animation */ && output.phase === null) {
+            throw Error('Animation listener should have a phase');
+        }
+        if (templateKind === TemplateKind.NgTemplate) {
+            if (output.type === 2 /* e.ParsedEventType.TwoWay */) {
+                unit.create.push(createTwoWayListenerOp(op.xref, op.handle, output.name, op.tag, makeTwoWayListenerHandlerOps(unit, output.handler, output.handlerSpan), output.sourceSpan));
             }
-            const classMapInstruction = this.buildClassMapInstruction(valueConverter);
-            if (classMapInstruction) {
-                instructions.push(classMapInstruction);
+            else {
+                unit.create.push(createListenerOp(op.xref, op.handle, output.name, op.tag, makeListenerHandlerOps(unit, output.handler, output.handlerSpan), output.phase, output.target, false, output.sourceSpan));
             }
-            instructions.push(...this._buildStyleInputs(valueConverter));
-            instructions.push(...this._buildClassInputs(valueConverter));
         }
-        return instructions;
+        if (templateKind === TemplateKind.Structural &&
+            output.type !== 1 /* e.ParsedEventType.Animation */) {
+            // Animation bindings are excluded from the structural template's const array.
+            const securityContext = domSchema.securityContext(NG_TEMPLATE_TAG_NAME$1, output.name, false);
+            unit.create.push(createExtractedAttributeOp(op.xref, BindingKind.Property, null, output.name, null, null, null, securityContext));
+        }
     }
-}
-function registerIntoMap(map, key) {
-    if (!map.has(key)) {
-        map.set(key, map.size);
+    // TODO: Perhaps we could do this in a phase? (It likely wouldn't change the slot indices.)
+    if (bindings.some(b => b?.i18nMessage) !== null) {
+        unit.create.push(createI18nAttributesOp(unit.job.allocateXrefId(), new SlotHandle(), op.xref));
     }
 }
-function parseProperty(name) {
-    let hasOverrideFlag = false;
-    const overrideIndex = name.indexOf(IMPORTANT_FLAG);
-    if (overrideIndex !== -1) {
-        name = overrideIndex > 0 ? name.substring(0, overrideIndex) : '';
-        hasOverrideFlag = true;
+/**
+ * Helper to ingest an individual binding on a template, either an explicit `ng-template`, or an
+ * implicit template created via structural directive.
+ *
+ * Bindings on templates are *extremely* tricky. I have tried to isolate all of the confusing edge
+ * cases into this function, and to comment it well to document the behavior.
+ *
+ * Some of this behavior is intuitively incorrect, and we should consider changing it in the future.
+ *
+ * @param view The compilation unit for the view containing the template.
+ * @param xref The xref of the template op.
+ * @param type The binding type, according to the parser. This is fairly reasonable, e.g. both
+ *     dynamic and static attributes have e.BindingType.Attribute.
+ * @param name The binding's name.
+ * @param value The bindings's value, which will either be an input AST expression, or a string
+ *     literal. Note that the input AST expression may or may not be const -- it will only be a
+ *     string literal if the parser considered it a text binding.
+ * @param unit If the binding has a unit (e.g. `px` for style bindings), then this is the unit.
+ * @param securityContext The security context of the binding.
+ * @param isStructuralTemplateAttribute Whether this binding actually applies to the structural
+ *     ng-template. For example, an `ngFor` would actually apply to the structural template. (Most
+ *     bindings on structural elements target the inner element, not the template.)
+ * @param templateKind Whether this is an explicit `ng-template` or an implicit template created by
+ *     a structural directive. This should never be a block template.
+ * @param i18nMessage The i18n metadata for the binding, if any.
+ * @param sourceSpan The source span of the binding.
+ * @returns An IR binding op, or null if the binding should be skipped.
+ */
+function createTemplateBinding(view, xref, type, name, value, unit, securityContext, isStructuralTemplateAttribute, templateKind, i18nMessage, sourceSpan) {
+    const isTextBinding = typeof value === 'string';
+    // If this is a structural template, then several kinds of bindings should not result in an
+    // update instruction.
+    if (templateKind === TemplateKind.Structural) {
+        if (!isStructuralTemplateAttribute) {
+            switch (type) {
+                case 0 /* e.BindingType.Property */:
+                case 2 /* e.BindingType.Class */:
+                case 3 /* e.BindingType.Style */:
+                    // Because this binding doesn't really target the ng-template, it must be a binding on an
+                    // inner node of a structural template. We can't skip it entirely, because we still need
+                    // it on the ng-template's consts (e.g. for the purposes of directive matching). However,
+                    // we should not generate an update instruction for it.
+                    return createExtractedAttributeOp(xref, BindingKind.Property, null, name, null, null, i18nMessage, securityContext);
+                case 5 /* e.BindingType.TwoWay */:
+                    return createExtractedAttributeOp(xref, BindingKind.TwoWayProperty, null, name, null, null, i18nMessage, securityContext);
+            }
+        }
+        if (!isTextBinding && (type === 1 /* e.BindingType.Attribute */ || type === 4 /* e.BindingType.Animation */)) {
+            // Again, this binding doesn't really target the ng-template; it actually targets the element
+            // inside the structural template. In the case of non-text attribute or animation bindings,
+            // the binding doesn't even show up on the ng-template const array, so we just skip it
+            // entirely.
+            return null;
+        }
     }
-    let suffix = null;
-    let property = name;
-    const unitIndex = name.lastIndexOf('.');
-    if (unitIndex > 0) {
-        suffix = name.slice(unitIndex + 1);
-        property = name.substring(0, unitIndex);
+    let bindingType = BINDING_KINDS.get(type);
+    if (templateKind === TemplateKind.NgTemplate) {
+        // We know we are dealing with bindings directly on an explicit ng-template.
+        // Static attribute bindings should be collected into the const array as k/v pairs. Property
+        // bindings should result in a `property` instruction, and `AttributeMarker.Bindings` const
+        // entries.
+        //
+        // The difficulty is with dynamic attribute, style, and class bindings. These don't really make
+        // sense on an `ng-template` and should probably be parser errors. However,
+        // TemplateDefinitionBuilder generates `property` instructions for them, and so we do that as
+        // well.
+        //
+        // Note that we do have a slight behavior difference with TemplateDefinitionBuilder: although
+        // TDB emits `property` instructions for dynamic attributes, styles, and classes, only styles
+        // and classes also get const collected into the `AttributeMarker.Bindings` field. Dynamic
+        // attribute bindings are missing from the consts entirely. We choose to emit them into the
+        // consts field anyway, to avoid creating special cases for something so arcane and nonsensical.
+        if (type === 2 /* e.BindingType.Class */ || type === 3 /* e.BindingType.Style */ ||
+            (type === 1 /* e.BindingType.Attribute */ && !isTextBinding)) {
+            // TODO: These cases should be parse errors.
+            bindingType = BindingKind.Property;
+        }
+    }
+    return createBindingOp(xref, bindingType, name, convertAstWithInterpolation(view.job, value, i18nMessage), unit, securityContext, isTextBinding, isStructuralTemplateAttribute, templateKind, i18nMessage, sourceSpan);
+}
+function makeListenerHandlerOps(unit, handler, handlerSpan) {
+    handler = astOf(handler);
+    const handlerOps = new Array();
+    let handlerExprs = handler instanceof Chain ? handler.expressions : [handler];
+    if (handlerExprs.length === 0) {
+        throw new Error('Expected listener to have non-empty expression list.');
+    }
+    const expressions = handlerExprs.map(expr => convertAst(expr, unit.job, handlerSpan));
+    const returnExpr = expressions.pop();
+    handlerOps.push(...expressions.map(e => createStatementOp(new ExpressionStatement(e, e.sourceSpan))));
+    handlerOps.push(createStatementOp(new ReturnStatement(returnExpr, returnExpr.sourceSpan)));
+    return handlerOps;
+}
+function makeTwoWayListenerHandlerOps(unit, handler, handlerSpan) {
+    handler = astOf(handler);
+    const handlerOps = new Array();
+    if (handler instanceof Chain) {
+        if (handler.expressions.length === 1) {
+            handler = handler.expressions[0];
+        }
+        else {
+            // This is validated during parsing already, but we do it here just in case.
+            throw new Error('Expected two-way listener to have a single expression.');
+        }
     }
-    return { property, suffix, hasOverrideFlag };
+    const handlerExpr = convertAst(handler, unit.job, handlerSpan);
+    const eventReference = new LexicalReadExpr('$event');
+    const twoWaySetExpr = new TwoWayBindingSetExpr(handlerExpr, eventReference);
+    handlerOps.push(createStatementOp(new ExpressionStatement(twoWaySetExpr)));
+    handlerOps.push(createStatementOp(new ReturnStatement(eventReference)));
+    return handlerOps;
+}
+function astOf(ast) {
+    return ast instanceof ASTWithSource ? ast.ast : ast;
 }
 /**
- * Gets the instruction to generate for an interpolated class map.
- * @param interpolation An Interpolation AST
+ * Process all of the local references on an element-like structure in the template AST and
+ * convert them to their IR representation.
  */
-function getClassMapInterpolationExpression(interpolation) {
-    switch (getInterpolationArgsLength(interpolation)) {
-        case 1:
-            return Identifiers.classMap;
-        case 3:
-            return Identifiers.classMapInterpolate1;
-        case 5:
-            return Identifiers.classMapInterpolate2;
-        case 7:
-            return Identifiers.classMapInterpolate3;
-        case 9:
-            return Identifiers.classMapInterpolate4;
-        case 11:
-            return Identifiers.classMapInterpolate5;
-        case 13:
-            return Identifiers.classMapInterpolate6;
-        case 15:
-            return Identifiers.classMapInterpolate7;
-        case 17:
-            return Identifiers.classMapInterpolate8;
-        default:
-            return Identifiers.classMapInterpolateV;
+function ingestReferences(op, element) {
+    assertIsArray(op.localRefs);
+    for (const { name, value } of element.references) {
+        op.localRefs.push({
+            name,
+            target: value,
+        });
     }
 }
 /**
- * Gets the instruction to generate for an interpolated style map.
- * @param interpolation An Interpolation AST
+ * Assert that the given value is an array.
  */
-function getStyleMapInterpolationExpression(interpolation) {
-    switch (getInterpolationArgsLength(interpolation)) {
-        case 1:
-            return Identifiers.styleMap;
-        case 3:
-            return Identifiers.styleMapInterpolate1;
-        case 5:
-            return Identifiers.styleMapInterpolate2;
-        case 7:
-            return Identifiers.styleMapInterpolate3;
-        case 9:
-            return Identifiers.styleMapInterpolate4;
-        case 11:
-            return Identifiers.styleMapInterpolate5;
-        case 13:
-            return Identifiers.styleMapInterpolate6;
-        case 15:
-            return Identifiers.styleMapInterpolate7;
-        case 17:
-            return Identifiers.styleMapInterpolate8;
-        default:
-            return Identifiers.styleMapInterpolateV;
+function assertIsArray(value) {
+    if (!Array.isArray(value)) {
+        throw new Error(`AssertionError: expected an array`);
     }
 }
 /**
- * Gets the instruction to generate for an interpolated style prop.
- * @param interpolation An Interpolation AST
+ * Creates an absolute `ParseSourceSpan` from the relative `ParseSpan`.
+ *
+ * `ParseSpan` objects are relative to the start of the expression.
+ * This method converts these to full `ParseSourceSpan` objects that
+ * show where the span is within the overall source file.
+ *
+ * @param span the relative span to convert.
+ * @param baseSourceSpan a span corresponding to the base of the expression tree.
+ * @returns a `ParseSourceSpan` for the given span or null if no `baseSourceSpan` was provided.
  */
-function getStylePropInterpolationExpression(interpolation) {
-    switch (getInterpolationArgsLength(interpolation)) {
-        case 1:
-            return Identifiers.styleProp;
-        case 3:
-            return Identifiers.stylePropInterpolate1;
-        case 5:
-            return Identifiers.stylePropInterpolate2;
-        case 7:
-            return Identifiers.stylePropInterpolate3;
-        case 9:
-            return Identifiers.stylePropInterpolate4;
-        case 11:
-            return Identifiers.stylePropInterpolate5;
-        case 13:
-            return Identifiers.stylePropInterpolate6;
-        case 15:
-            return Identifiers.stylePropInterpolate7;
-        case 17:
-            return Identifiers.stylePropInterpolate8;
-        default:
-            return Identifiers.stylePropInterpolateV;
+function convertSourceSpan(span, baseSourceSpan) {
+    if (baseSourceSpan === null) {
+        return null;
     }
+    const start = baseSourceSpan.start.moveBy(span.start);
+    const end = baseSourceSpan.start.moveBy(span.end);
+    const fullStart = baseSourceSpan.fullStart.moveBy(span.start);
+    return new ParseSourceSpan(start, end, fullStart);
 }
 /**
- * Checks whether property name is a custom CSS property.
- * See: https://www.w3.org/TR/css-variables-1
+ * With the directive-based control flow users were able to conditionally project content using
+ * the `*` syntax. E.g. `<div *ngIf="expr" projectMe></div>` will be projected into
+ * `<ng-content select="[projectMe]"/>`, because the attributes and tag name from the `div` are
+ * copied to the template via the template creation instruction. With `@if` and `@for` that is
+ * not the case, because the conditional is placed *around* elements, rather than *on* them.
+ * The result is that content projection won't work in the same way if a user converts from
+ * `*ngIf` to `@if`.
+ *
+ * This function aims to cover the most common case by doing the same copying when a control flow
+ * node has *one and only one* root element or template node.
+ *
+ * This approach comes with some caveats:
+ * 1. As soon as any other node is added to the root, the copying behavior won't work anymore.
+ *    A diagnostic will be added to flag cases like this and to explain how to work around it.
+ * 2. If `preserveWhitespaces` is enabled, it's very likely that indentation will break this
+ *    workaround, because it'll include an additional text node as the first child. We can work
+ *    around it here, but in a discussion it was decided not to, because the user explicitly opted
+ *    into preserving the whitespace and we would have to drop it from the generated code.
+ *    The diagnostic mentioned point #1 will flag such cases to users.
+ *
+ * @returns Tag name to be used for the control flow template.
  */
-function isCssCustomProperty(name) {
-    return name.startsWith('--');
-}
-function isEmptyExpression(ast) {
-    if (ast instanceof ASTWithSource) {
-        ast = ast.ast;
+function ingestControlFlowInsertionPoint(unit, xref, node) {
+    let root = null;
+    for (const child of node.children) {
+        // Skip over comment nodes.
+        if (child instanceof Comment$1) {
+            continue;
+        }
+        // We can only infer the tag name/attributes if there's a single root node.
+        if (root !== null) {
+            return null;
+        }
+        // Root nodes can only elements or templates with a tag name (e.g. `<div *foo></div>`).
+        if (child instanceof Element$1 || (child instanceof Template && child.tagName !== null)) {
+            root = child;
+        }
     }
-    return ast instanceof EmptyExpr$1;
+    // If we've found a single root node, its tag name and *static* attributes can be copied
+    // to the surrounding template to be used for content projection. Note that it's important
+    // that we don't copy any bound attributes since they don't participate in content projection
+    // and they can be used in directive matching (in the case of `Template.templateAttrs`).
+    if (root !== null) {
+        for (const attr of root.attributes) {
+            const securityContext = domSchema.securityContext(NG_TEMPLATE_TAG_NAME$1, attr.name, true);
+            unit.update.push(createBindingOp(xref, BindingKind.Attribute, attr.name, literal(attr.value), null, securityContext, true, false, null, asMessage(attr.i18n), attr.sourceSpan));
+        }
+        const tagName = root instanceof Element$1 ? root.name : root.tagName;
+        // Don't pass along `ng-template` tag name since it enables directive matching.
+        return tagName === NG_TEMPLATE_TAG_NAME$1 ? null : tagName;
+    }
+    return null;
 }
 
 class HtmlParser extends Parser {
@@ -24194,7 +25386,7 @@ class BindingParser {
         for (const propName of Object.keys(properties)) {
             const expression = properties[propName];
             if (typeof expression === 'string') {
-                this.parsePropertyBinding(propName, expression, true, sourceSpan, sourceSpan.start.offset, undefined, [], 
+                this.parsePropertyBinding(propName, expression, true, false, sourceSpan, sourceSpan.start.offset, undefined, [], 
                 // Use the `sourceSpan` for  `keySpan`. This isn't really accurate, but neither is the
                 // sourceSpan, as it represents the sourceSpan of the host itself rather than the
                 // source of the host binding (which doesn't exist in the template). Regardless,
@@ -24290,7 +25482,7 @@ class BindingParser {
             else if (binding.value) {
                 const srcSpan = isIvyAst ? bindingSpan : sourceSpan;
                 const valueSpan = moveParseSourceSpan(sourceSpan, binding.value.ast.sourceSpan);
-                this._parsePropertyAst(key, binding.value, srcSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
+                this._parsePropertyAst(key, binding.value, false, srcSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
             }
             else {
                 targetMatchableAttrs.push([key, '' /* value */]);
@@ -24343,7 +25535,7 @@ class BindingParser {
             targetProps.push(new ParsedProperty(name, this._exprParser.wrapLiteralPrimitive(value, '', absoluteOffset), exports.ParsedPropertyType.LITERAL_ATTR, sourceSpan, keySpan, valueSpan));
         }
     }
-    parsePropertyBinding(name, expression, isHost, sourceSpan, absoluteOffset, valueSpan, targetMatchableAttrs, targetProps, keySpan) {
+    parsePropertyBinding(name, expression, isHost, isPartOfAssignmentBinding, sourceSpan, absoluteOffset, valueSpan, targetMatchableAttrs, targetProps, keySpan) {
         if (name.length === 0) {
             this._reportError(`Property name is missing in binding`, sourceSpan);
         }
@@ -24366,20 +25558,20 @@ class BindingParser {
             this._parseAnimation(name, expression, sourceSpan, absoluteOffset, keySpan, valueSpan, targetMatchableAttrs, targetProps);
         }
         else {
-            this._parsePropertyAst(name, this.parseBinding(expression, isHost, valueSpan || sourceSpan, absoluteOffset), sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
+            this._parsePropertyAst(name, this.parseBinding(expression, isHost, valueSpan || sourceSpan, absoluteOffset), isPartOfAssignmentBinding, sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
         }
     }
     parsePropertyInterpolation(name, value, sourceSpan, valueSpan, targetMatchableAttrs, targetProps, keySpan, interpolatedTokens) {
         const expr = this.parseInterpolation(value, valueSpan || sourceSpan, interpolatedTokens);
         if (expr) {
-            this._parsePropertyAst(name, expr, sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
+            this._parsePropertyAst(name, expr, false, sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps);
             return true;
         }
         return false;
     }
-    _parsePropertyAst(name, ast, sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps) {
+    _parsePropertyAst(name, ast, isPartOfAssignmentBinding, sourceSpan, keySpan, valueSpan, targetMatchableAttrs, targetProps) {
         targetMatchableAttrs.push([name, ast.source]);
-        targetProps.push(new ParsedProperty(name, ast, exports.ParsedPropertyType.DEFAULT, sourceSpan, keySpan, valueSpan));
+        targetProps.push(new ParsedProperty(name, ast, isPartOfAssignmentBinding ? exports.ParsedPropertyType.TWO_WAY : exports.ParsedPropertyType.DEFAULT, sourceSpan, keySpan, valueSpan));
     }
     _parseAnimation(name, expression, sourceSpan, absoluteOffset, keySpan, valueSpan, targetMatchableAttrs, targetProps) {
         if (name.length === 0) {
@@ -24449,7 +25641,8 @@ class BindingParser {
             const mappedPropName = this._schemaRegistry.getMappedPropName(boundProp.name);
             boundPropertyName = mapPropertyName ? mappedPropName : boundProp.name;
             securityContexts = calcPossibleSecurityContexts(this._schemaRegistry, elementSelector, mappedPropName, false);
-            bindingType = 0 /* BindingType.Property */;
+            bindingType =
+                boundProp.type === exports.ParsedPropertyType.TWO_WAY ? 5 /* BindingType.TwoWay */ : 0 /* BindingType.Property */;
             if (!skipValidation) {
                 this._validatePropertyOrAttributeName(mappedPropName, boundProp.sourceSpan, false);
             }
@@ -24466,7 +25659,7 @@ class BindingParser {
             if (keySpan !== undefined) {
                 keySpan = moveParseSourceSpan(keySpan, new AbsoluteSourceSpan(keySpan.start.offset + 1, keySpan.end.offset));
             }
-            this._parseAnimationEvent(name, expression, isAssignmentEvent, sourceSpan, handlerSpan, targetEvents, keySpan);
+            this._parseAnimationEvent(name, expression, sourceSpan, handlerSpan, targetEvents, keySpan);
         }
         else {
             this._parseRegularEvent(name, expression, isAssignmentEvent, sourceSpan, handlerSpan, targetMatchableAttrs, targetEvents, keySpan);
@@ -24476,11 +25669,11 @@ class BindingParser {
         const prop = this._schemaRegistry.getMappedPropName(propName);
         return calcPossibleSecurityContexts(this._schemaRegistry, selector, prop, isAttribute);
     }
-    _parseAnimationEvent(name, expression, isAssignmentEvent, sourceSpan, handlerSpan, targetEvents, keySpan) {
+    _parseAnimationEvent(name, expression, sourceSpan, handlerSpan, targetEvents, keySpan) {
         const matches = splitAtPeriod(name, [name, '']);
         const eventName = matches[0];
         const phase = matches[1].toLowerCase();
-        const ast = this._parseAction(expression, isAssignmentEvent, handlerSpan);
+        const ast = this._parseAction(expression, handlerSpan);
         targetEvents.push(new ParsedEvent(eventName, phase, 1 /* ParsedEventType.Animation */, ast, sourceSpan, handlerSpan, keySpan));
         if (eventName.length === 0) {
             this._reportError(`Animation event name is missing in binding`, sourceSpan);
@@ -24497,17 +25690,24 @@ class BindingParser {
     _parseRegularEvent(name, expression, isAssignmentEvent, sourceSpan, handlerSpan, targetMatchableAttrs, targetEvents, keySpan) {
         // long format: 'target: eventName'
         const [target, eventName] = splitAtColon(name, [null, name]);
-        const ast = this._parseAction(expression, isAssignmentEvent, handlerSpan);
+        const prevErrorCount = this.errors.length;
+        const ast = this._parseAction(expression, handlerSpan);
+        const isValid = this.errors.length === prevErrorCount;
         targetMatchableAttrs.push([name, ast.source]);
-        targetEvents.push(new ParsedEvent(eventName, target, 0 /* ParsedEventType.Regular */, ast, sourceSpan, handlerSpan, keySpan));
+        // Don't try to validate assignment events if there were other
+        // parsing errors to avoid adding more noise to the error logs.
+        if (isAssignmentEvent && isValid && !this._isAllowedAssignmentEvent(ast)) {
+            this._reportError('Unsupported expression in a two-way binding', sourceSpan);
+        }
+        targetEvents.push(new ParsedEvent(eventName, target, isAssignmentEvent ? 2 /* ParsedEventType.TwoWay */ : 0 /* ParsedEventType.Regular */, ast, sourceSpan, handlerSpan, keySpan));
         // Don't detect directives for event names for now,
         // so don't add the event name to the matchableAttrs
     }
-    _parseAction(value, isAssignmentEvent, sourceSpan) {
+    _parseAction(value, sourceSpan) {
         const sourceInfo = (sourceSpan && sourceSpan.start || '(unknown').toString();
         const absoluteOffset = (sourceSpan && sourceSpan.start) ? sourceSpan.start.offset : 0;
         try {
-            const ast = this._exprParser.parseAction(value, isAssignmentEvent, sourceInfo, absoluteOffset, this._interpolationConfig);
+            const ast = this._exprParser.parseAction(value, sourceInfo, absoluteOffset, this._interpolationConfig);
             if (ast) {
                 this._reportExpressionParserErrors(ast.errors, sourceSpan);
             }
@@ -24542,6 +25742,26 @@ class BindingParser {
             this._reportError(report.msg, sourceSpan, exports.ParseErrorLevel.ERROR);
         }
     }
+    /**
+     * Returns whether a parsed AST is allowed to be used within the event side of a two-way binding.
+     * @param ast Parsed AST to be checked.
+     */
+    _isAllowedAssignmentEvent(ast) {
+        if (ast instanceof ASTWithSource) {
+            return this._isAllowedAssignmentEvent(ast.ast);
+        }
+        if (ast instanceof NonNullAssert) {
+            return this._isAllowedAssignmentEvent(ast.expression);
+        }
+        if (ast instanceof PropertyRead || ast instanceof KeyedRead) {
+            return true;
+        }
+        if (ast instanceof Binary) {
+            return (ast.operation === '&&' || ast.operation === '||' || ast.operation === '??') &&
+                (ast.right instanceof PropertyRead || ast.right instanceof KeyedRead);
+        }
+        return ast instanceof Conditional || ast instanceof PrefixNot;
+    }
 }
 function isAnimationLabel(name) {
     return name[0] == '@';
@@ -24662,11 +25882,16 @@ const FOR_LOOP_EXPRESSION_PATTERN = /^\s*([0-9A-Za-z_$]*)\s+of\s+([\S\s]*)/;
 /** Pattern for the tracking expression in a for loop block. */
 const FOR_LOOP_TRACK_PATTERN = /^track\s+([\S\s]*)/;
 /** Pattern for the `as` expression in a conditional block. */
-const CONDITIONAL_ALIAS_PATTERN = /^as\s+(.*)/;
+const CONDITIONAL_ALIAS_PATTERN = /^(as\s)+(.*)/;
 /** Pattern used to identify an `else if` block. */
 const ELSE_IF_PATTERN = /^else[^\S\r\n]+if/;
 /** Pattern used to identify a `let` parameter. */
 const FOR_LOOP_LET_PATTERN = /^let\s+([\S\s]*)/;
+/**
+ * Pattern to group a string into leading whitespace, non whitespace, and trailing whitespace.
+ * Useful for getting the variable name span when a span can contain leading and trailing space.
+ */
+const CHARACTERS_IN_SURROUNDING_WHITESPACE_PATTERN = /(\s*)(\S+)(\s*)/;
 /** Names of variables that are allowed to be used in the `let` expression of a `for` loop. */
 const ALLOWED_FOR_LOOP_LET_VARIABLES = new Set(['$index', '$first', '$last', '$even', '$odd', '$count']);
 /**
@@ -24806,8 +26031,13 @@ function parseForLoopParameters(block, errors, bindingParser) {
         return null;
     }
     const [, itemName, rawExpression] = match;
+    // `expressionParam.expression` contains the variable declaration and the expression of the
+    // for...of statement, i.e. 'user of users' The variable of a ForOfStatement is _only_ the "const
+    // user" part and does not include "of x".
+    const variableName = expressionParam.expression.split(' ')[0];
+    const variableSpan = new ParseSourceSpan(expressionParam.sourceSpan.start, expressionParam.sourceSpan.start.moveBy(variableName.length));
     const result = {
-        itemName: new Variable(itemName, '$implicit', expressionParam.sourceSpan, expressionParam.sourceSpan),
+        itemName: new Variable(itemName, '$implicit', variableSpan, variableSpan),
         trackBy: null,
         expression: parseBlockParameterToBinding(expressionParam, bindingParser, rawExpression),
         context: {},
@@ -24815,7 +26045,8 @@ function parseForLoopParameters(block, errors, bindingParser) {
     for (const param of secondaryParams) {
         const letMatch = param.expression.match(FOR_LOOP_LET_PATTERN);
         if (letMatch !== null) {
-            parseLetParameter(param.sourceSpan, letMatch[1], param.sourceSpan, result.context, errors);
+            const variablesSpan = new ParseSourceSpan(param.sourceSpan.start.moveBy(letMatch[0].length - letMatch[1].length), param.sourceSpan.end);
+            parseLetParameter(param.sourceSpan, letMatch[1], variablesSpan, result.context, errors);
             continue;
         }
         const trackMatch = param.expression.match(FOR_LOOP_TRACK_PATTERN);
@@ -24825,6 +26056,9 @@ function parseForLoopParameters(block, errors, bindingParser) {
             }
             else {
                 const expression = parseBlockParameterToBinding(param, bindingParser, trackMatch[1]);
+                if (expression.ast instanceof EmptyExpr$1) {
+                    errors.push(new ParseError(param.sourceSpan, '@for loop must have a "track" expression'));
+                }
                 const keywordSpan = new ParseSourceSpan(param.sourceSpan.start, param.sourceSpan.start.moveBy('track'.length));
                 result.trackBy = { expression, keywordSpan };
             }
@@ -24846,6 +26080,7 @@ function parseForLoopParameters(block, errors, bindingParser) {
 /** Parses the `let` parameter of a `for` loop block. */
 function parseLetParameter(sourceSpan, expression, span, context, errors) {
     const parts = expression.split(',');
+    let startSpan = span.start;
     for (const part of parts) {
         const expressionParts = part.split('=');
         const name = expressionParts.length === 2 ? expressionParts[0].trim() : '';
@@ -24860,8 +26095,26 @@ function parseLetParameter(sourceSpan, expression, span, context, errors) {
             errors.push(new ParseError(sourceSpan, `Duplicate "let" parameter variable "${variableName}"`));
         }
         else {
-            context[variableName] = new Variable(name, variableName, span, span);
+            const [, keyLeadingWhitespace, keyName] = expressionParts[0].match(CHARACTERS_IN_SURROUNDING_WHITESPACE_PATTERN) ?? [];
+            const keySpan = keyLeadingWhitespace !== undefined && expressionParts.length === 2 ?
+                new ParseSourceSpan(
+                /* strip leading spaces */
+                startSpan.moveBy(keyLeadingWhitespace.length), 
+                /* advance to end of the variable name */
+                startSpan.moveBy(keyLeadingWhitespace.length + keyName.length)) :
+                span;
+            let valueSpan = undefined;
+            if (expressionParts.length === 2) {
+                const [, valueLeadingWhitespace, implicit] = expressionParts[1].match(CHARACTERS_IN_SURROUNDING_WHITESPACE_PATTERN) ?? [];
+                valueSpan = valueLeadingWhitespace !== undefined ?
+                    new ParseSourceSpan(startSpan.moveBy(expressionParts[0].length + 1 + valueLeadingWhitespace.length), startSpan.moveBy(expressionParts[0].length + 1 + valueLeadingWhitespace.length +
+                        implicit.length)) :
+                    undefined;
+            }
+            const sourceSpan = new ParseSourceSpan(keySpan.start, valueSpan?.end ?? keySpan.end);
+            context[variableName] = new Variable(name, variableName, sourceSpan, keySpan, valueSpan);
         }
+        startSpan = startSpan.moveBy(part.length + 1 /* add 1 to move past the comma */);
     }
 }
 /**
@@ -24973,8 +26226,10 @@ function parseConditionalBlockParameters(block, errors, bindingParser) {
             errors.push(new ParseError(param.sourceSpan, 'Conditional can only have one "as" expression'));
         }
         else {
-            const name = aliasMatch[1].trim();
-            expressionAlias = new Variable(name, name, param.sourceSpan, param.sourceSpan);
+            const name = aliasMatch[2].trim();
+            const variableStart = param.sourceSpan.start.moveBy(aliasMatch[1].length);
+            const variableSpan = new ParseSourceSpan(variableStart, variableStart.moveBy(name.length));
+            expressionAlias = new Variable(name, name, variableSpan, variableSpan);
         }
     }
     return { expression, expressionAlias };
@@ -25835,7 +27090,7 @@ class HtmlAstToIvyAst {
             if (bindParts[KW_BIND_IDX] != null) {
                 const identifier = bindParts[IDENT_KW_IDX];
                 const keySpan = createKeySpan(srcSpan, bindParts[KW_BIND_IDX], identifier);
-                this.bindingParser.parsePropertyBinding(identifier, value, false, srcSpan, absoluteOffset, attribute.valueSpan, matchableAttributes, parsedProperties, keySpan);
+                this.bindingParser.parsePropertyBinding(identifier, value, false, false, srcSpan, absoluteOffset, attribute.valueSpan, matchableAttributes, parsedProperties, keySpan);
             }
             else if (bindParts[KW_LET_IDX]) {
                 if (isTemplateElement) {
@@ -25862,7 +27117,7 @@ class HtmlAstToIvyAst {
             else if (bindParts[KW_BINDON_IDX]) {
                 const identifier = bindParts[IDENT_KW_IDX];
                 const keySpan = createKeySpan(srcSpan, bindParts[KW_BINDON_IDX], identifier);
-                this.bindingParser.parsePropertyBinding(identifier, value, false, srcSpan, absoluteOffset, attribute.valueSpan, matchableAttributes, parsedProperties, keySpan);
+                this.bindingParser.parsePropertyBinding(identifier, value, false, true, srcSpan, absoluteOffset, attribute.valueSpan, matchableAttributes, parsedProperties, keySpan);
                 this.parseAssignmentEvent(identifier, value, srcSpan, attribute.valueSpan, matchableAttributes, boundEvents, keySpan);
             }
             else if (bindParts[KW_AT_IDX]) {
@@ -25892,11 +27147,11 @@ class HtmlAstToIvyAst {
             const identifier = name.substring(delims.start.length, name.length - delims.end.length);
             const keySpan = createKeySpan(srcSpan, delims.start, identifier);
             if (delims.start === BINDING_DELIMS.BANANA_BOX.start) {
-                this.bindingParser.parsePropertyBinding(identifier, value, false, srcSpan, absoluteOffset, attribute.valueSpan, matchableAttributes, parsedProperties, keySpan);
+                this.bindingParser.parsePropertyBinding(identifier, value, false, true, srcSpan, absoluteOffset, attribute.valueSpan, matchableAttributes, parsedProperties, keySpan);
                 this.parseAssignmentEvent(identifier, value, srcSpan, attribute.valueSpan, matchableAttributes, boundEvents, keySpan);
             }
             else if (delims.start === BINDING_DELIMS.PROPERTY.start) {
-                this.bindingParser.parsePropertyBinding(identifier, value, false, srcSpan, absoluteOffset, attribute.valueSpan, matchableAttributes, parsedProperties, keySpan);
+                this.bindingParser.parsePropertyBinding(identifier, value, false, false, srcSpan, absoluteOffset, attribute.valueSpan, matchableAttributes, parsedProperties, keySpan);
             }
             else {
                 const events = [];
@@ -25938,7 +27193,7 @@ class HtmlAstToIvyAst {
     }
     parseAssignmentEvent(name, expression, sourceSpan, valueSpan, targetMatchableAttrs, boundEvents, keySpan) {
         const events = [];
-        this.bindingParser.parseEvent(`${name}Change`, `${expression} =$event`, /* isAssignmentEvent */ true, sourceSpan, valueSpan || sourceSpan, targetMatchableAttrs, events, keySpan);
+        this.bindingParser.parseEvent(`${name}Change`, expression, /* isAssignmentEvent */ true, sourceSpan, valueSpan || sourceSpan, targetMatchableAttrs, events, keySpan);
         addEvents(events, boundEvents);
     }
     reportError(message, sourceSpan, level = exports.ParseErrorLevel.ERROR) {
@@ -26217,6 +27472,535 @@ function serializePlaceholderValue(value) {
     }
 }
 
+const IMPORTANT_FLAG = '!important';
+/**
+ * Minimum amount of binding slots required in the runtime for style/class bindings.
+ *
+ * Styling in Angular uses up two slots in the runtime LView/TData data structures to
+ * record binding data, property information and metadata.
+ *
+ * When a binding is registered it will place the following information in the `LView`:
+ *
+ * slot 1) binding value
+ * slot 2) cached value (all other values collected before it in string form)
+ *
+ * When a binding is registered it will place the following information in the `TData`:
+ *
+ * slot 1) prop name
+ * slot 2) binding index that points to the previous style/class binding (and some extra config
+ * values)
+ *
+ * Let's imagine we have a binding that looks like so:
+ *
+ * ```
+ * <div [style.width]="x" [style.height]="y">
+ * ```
+ *
+ * Our `LView` and `TData` data-structures look like so:
+ *
+ * ```typescript
+ * LView = [
+ *   // ...
+ *   x, // value of x
+ *   "width: x",
+ *
+ *   y, // value of y
+ *   "width: x; height: y",
+ *   // ...
+ * ];
+ *
+ * TData = [
+ *   // ...
+ *   "width", // binding slot 20
+ *   0,
+ *
+ *   "height",
+ *   20,
+ *   // ...
+ * ];
+ * ```
+ *
+ * */
+const MIN_STYLING_BINDING_SLOTS_REQUIRED = 2;
+/**
+ * Produces creation/update instructions for all styling bindings (class and style)
+ *
+ * It also produces the creation instruction to register all initial styling values
+ * (which are all the static class="..." and style="..." attribute values that exist
+ * on an element within a template).
+ *
+ * The builder class below handles producing instructions for the following cases:
+ *
+ * - Static style/class attributes (style="..." and class="...")
+ * - Dynamic style/class map bindings ([style]="map" and [class]="map|string")
+ * - Dynamic style/class property bindings ([style.prop]="exp" and [class.name]="exp")
+ *
+ * Due to the complex relationship of all of these cases, the instructions generated
+ * for these attributes/properties/bindings must be done so in the correct order. The
+ * order which these must be generated is as follows:
+ *
+ * if (createMode) {
+ *   styling(...)
+ * }
+ * if (updateMode) {
+ *   styleMap(...)
+ *   classMap(...)
+ *   styleProp(...)
+ *   classProp(...)
+ * }
+ *
+ * The creation/update methods within the builder class produce these instructions.
+ */
+class StylingBuilder {
+    constructor(_directiveExpr) {
+        this._directiveExpr = _directiveExpr;
+        /** Whether or not there are any static styling values present */
+        this._hasInitialValues = false;
+        /**
+         *  Whether or not there are any styling bindings present
+         *  (i.e. `[style]`, `[class]`, `[style.prop]` or `[class.name]`)
+         */
+        this.hasBindings = false;
+        this.hasBindingsWithPipes = false;
+        /** the input for [class] (if it exists) */
+        this._classMapInput = null;
+        /** the input for [style] (if it exists) */
+        this._styleMapInput = null;
+        /** an array of each [style.prop] input */
+        this._singleStyleInputs = null;
+        /** an array of each [class.name] input */
+        this._singleClassInputs = null;
+        this._lastStylingInput = null;
+        this._firstStylingInput = null;
+        // maps are used instead of hash maps because a Map will
+        // retain the ordering of the keys
+        /**
+         * Represents the location of each style binding in the template
+         * (e.g. `<div [style.width]="w" [style.height]="h">` implies
+         * that `width=0` and `height=1`)
+         */
+        this._stylesIndex = new Map();
+        /**
+         * Represents the location of each class binding in the template
+         * (e.g. `<div [class.big]="b" [class.hidden]="h">` implies
+         * that `big=0` and `hidden=1`)
+         */
+        this._classesIndex = new Map();
+        this._initialStyleValues = [];
+        this._initialClassValues = [];
+    }
+    /**
+     * Registers a given input to the styling builder to be later used when producing AOT code.
+     *
+     * The code below will only accept the input if it is somehow tied to styling (whether it be
+     * style/class bindings or static style/class attributes).
+     */
+    registerBoundInput(input) {
+        // [attr.style] or [attr.class] are skipped in the code below,
+        // they should not be treated as styling-based bindings since
+        // they are intended to be written directly to the attr and
+        // will therefore skip all style/class resolution that is present
+        // with style="", [style]="" and [style.prop]="", class="",
+        // [class.prop]="". [class]="" assignments
+        let binding = null;
+        let name = input.name;
+        switch (input.type) {
+            case 0 /* BindingType.Property */:
+                binding = this.registerInputBasedOnName(name, input.value, input.sourceSpan);
+                break;
+            case 3 /* BindingType.Style */:
+                binding = this.registerStyleInput(name, false, input.value, input.sourceSpan, input.unit);
+                break;
+            case 2 /* BindingType.Class */:
+                binding = this.registerClassInput(name, false, input.value, input.sourceSpan);
+                break;
+        }
+        return binding ? true : false;
+    }
+    registerInputBasedOnName(name, expression, sourceSpan) {
+        let binding = null;
+        const prefix = name.substring(0, 6);
+        const isStyle = name === 'style' || prefix === 'style.' || prefix === 'style!';
+        const isClass = !isStyle && (name === 'class' || prefix === 'class.' || prefix === 'class!');
+        if (isStyle || isClass) {
+            const isMapBased = name.charAt(5) !== '.'; // style.prop or class.prop makes this a no
+            const property = name.slice(isMapBased ? 5 : 6); // the dot explains why there's a +1
+            if (isStyle) {
+                binding = this.registerStyleInput(property, isMapBased, expression, sourceSpan);
+            }
+            else {
+                binding = this.registerClassInput(property, isMapBased, expression, sourceSpan);
+            }
+        }
+        return binding;
+    }
+    registerStyleInput(name, isMapBased, value, sourceSpan, suffix) {
+        if (isEmptyExpression(value)) {
+            return null;
+        }
+        // CSS custom properties are case-sensitive so we shouldn't normalize them.
+        // See: https://www.w3.org/TR/css-variables-1/#defining-variables
+        if (!isCssCustomProperty(name)) {
+            name = hyphenate(name);
+        }
+        const { property, hasOverrideFlag, suffix: bindingSuffix } = parseProperty(name);
+        suffix = typeof suffix === 'string' && suffix.length !== 0 ? suffix : bindingSuffix;
+        const entry = { name: property, suffix: suffix, value, sourceSpan, hasOverrideFlag };
+        if (isMapBased) {
+            this._styleMapInput = entry;
+        }
+        else {
+            (this._singleStyleInputs = this._singleStyleInputs || []).push(entry);
+            registerIntoMap(this._stylesIndex, property);
+        }
+        this._lastStylingInput = entry;
+        this._firstStylingInput = this._firstStylingInput || entry;
+        this._checkForPipes(value);
+        this.hasBindings = true;
+        return entry;
+    }
+    registerClassInput(name, isMapBased, value, sourceSpan) {
+        if (isEmptyExpression(value)) {
+            return null;
+        }
+        const { property, hasOverrideFlag } = parseProperty(name);
+        const entry = { name: property, value, sourceSpan, hasOverrideFlag, suffix: null };
+        if (isMapBased) {
+            this._classMapInput = entry;
+        }
+        else {
+            (this._singleClassInputs = this._singleClassInputs || []).push(entry);
+            registerIntoMap(this._classesIndex, property);
+        }
+        this._lastStylingInput = entry;
+        this._firstStylingInput = this._firstStylingInput || entry;
+        this._checkForPipes(value);
+        this.hasBindings = true;
+        return entry;
+    }
+    _checkForPipes(value) {
+        if ((value instanceof ASTWithSource) && (value.ast instanceof BindingPipe)) {
+            this.hasBindingsWithPipes = true;
+        }
+    }
+    /**
+     * Registers the element's static style string value to the builder.
+     *
+     * @param value the style string (e.g. `width:100px; height:200px;`)
+     */
+    registerStyleAttr(value) {
+        this._initialStyleValues = parse(value);
+        this._hasInitialValues = true;
+    }
+    /**
+     * Registers the element's static class string value to the builder.
+     *
+     * @param value the className string (e.g. `disabled gold zoom`)
+     */
+    registerClassAttr(value) {
+        this._initialClassValues = value.trim().split(/\s+/g);
+        this._hasInitialValues = true;
+    }
+    /**
+     * Appends all styling-related expressions to the provided attrs array.
+     *
+     * @param attrs an existing array where each of the styling expressions
+     * will be inserted into.
+     */
+    populateInitialStylingAttrs(attrs) {
+        // [CLASS_MARKER, 'foo', 'bar', 'baz' ...]
+        if (this._initialClassValues.length) {
+            attrs.push(literal(1 /* AttributeMarker.Classes */));
+            for (let i = 0; i < this._initialClassValues.length; i++) {
+                attrs.push(literal(this._initialClassValues[i]));
+            }
+        }
+        // [STYLE_MARKER, 'width', '200px', 'height', '100px', ...]
+        if (this._initialStyleValues.length) {
+            attrs.push(literal(2 /* AttributeMarker.Styles */));
+            for (let i = 0; i < this._initialStyleValues.length; i += 2) {
+                attrs.push(literal(this._initialStyleValues[i]), literal(this._initialStyleValues[i + 1]));
+            }
+        }
+    }
+    /**
+     * Builds an instruction with all the expressions and parameters for `elementHostAttrs`.
+     *
+     * The instruction generation code below is used for producing the AOT statement code which is
+     * responsible for registering initial styles (within a directive hostBindings' creation block),
+     * as well as any of the provided attribute values, to the directive host element.
+     */
+    assignHostAttrs(attrs, definitionMap) {
+        if (this._directiveExpr && (attrs.length || this._hasInitialValues)) {
+            this.populateInitialStylingAttrs(attrs);
+            definitionMap.set('hostAttrs', literalArr(attrs));
+        }
+    }
+    /**
+     * Builds an instruction with all the expressions and parameters for `classMap`.
+     *
+     * The instruction data will contain all expressions for `classMap` to function
+     * which includes the `[class]` expression params.
+     */
+    buildClassMapInstruction(valueConverter) {
+        if (this._classMapInput) {
+            return this._buildMapBasedInstruction(valueConverter, true, this._classMapInput);
+        }
+        return null;
+    }
+    /**
+     * Builds an instruction with all the expressions and parameters for `styleMap`.
+     *
+     * The instruction data will contain all expressions for `styleMap` to function
+     * which includes the `[style]` expression params.
+     */
+    buildStyleMapInstruction(valueConverter) {
+        if (this._styleMapInput) {
+            return this._buildMapBasedInstruction(valueConverter, false, this._styleMapInput);
+        }
+        return null;
+    }
+    _buildMapBasedInstruction(valueConverter, isClassBased, stylingInput) {
+        // each styling binding value is stored in the LView
+        // map-based bindings allocate two slots: one for the
+        // previous binding value and another for the previous
+        // className or style attribute value.
+        let totalBindingSlotsRequired = MIN_STYLING_BINDING_SLOTS_REQUIRED;
+        // these values must be outside of the update block so that they can
+        // be evaluated (the AST visit call) during creation time so that any
+        // pipes can be picked up in time before the template is built
+        const mapValue = stylingInput.value.visit(valueConverter);
+        let reference;
+        if (mapValue instanceof Interpolation$1) {
+            totalBindingSlotsRequired += mapValue.expressions.length;
+            reference = isClassBased ? getClassMapInterpolationExpression(mapValue) :
+                getStyleMapInterpolationExpression(mapValue);
+        }
+        else {
+            reference = isClassBased ? Identifiers.classMap : Identifiers.styleMap;
+        }
+        return {
+            reference,
+            calls: [{
+                    supportsInterpolation: true,
+                    sourceSpan: stylingInput.sourceSpan,
+                    allocateBindingSlots: totalBindingSlotsRequired,
+                    params: (convertFn) => {
+                        const convertResult = convertFn(mapValue);
+                        const params = Array.isArray(convertResult) ? convertResult : [convertResult];
+                        return params;
+                    }
+                }]
+        };
+    }
+    _buildSingleInputs(reference, inputs, valueConverter, getInterpolationExpressionFn, isClassBased) {
+        const instructions = [];
+        inputs.forEach(input => {
+            const previousInstruction = instructions[instructions.length - 1];
+            const value = input.value.visit(valueConverter);
+            let referenceForCall = reference;
+            // each styling binding value is stored in the LView
+            // but there are two values stored for each binding:
+            //   1) the value itself
+            //   2) an intermediate value (concatenation of style up to this point).
+            //      We need to store the intermediate value so that we don't allocate
+            //      the strings on each CD.
+            let totalBindingSlotsRequired = MIN_STYLING_BINDING_SLOTS_REQUIRED;
+            if (value instanceof Interpolation$1) {
+                totalBindingSlotsRequired += value.expressions.length;
+                if (getInterpolationExpressionFn) {
+                    referenceForCall = getInterpolationExpressionFn(value);
+                }
+            }
+            const call = {
+                sourceSpan: input.sourceSpan,
+                allocateBindingSlots: totalBindingSlotsRequired,
+                supportsInterpolation: !!getInterpolationExpressionFn,
+                params: (convertFn) => {
+                    // params => stylingProp(propName, value, suffix)
+                    const params = [];
+                    params.push(literal(input.name));
+                    const convertResult = convertFn(value);
+                    if (Array.isArray(convertResult)) {
+                        params.push(...convertResult);
+                    }
+                    else {
+                        params.push(convertResult);
+                    }
+                    // [style.prop] bindings may use suffix values (e.g. px, em, etc...), therefore,
+                    // if that is detected then we need to pass that in as an optional param.
+                    if (!isClassBased && input.suffix !== null) {
+                        params.push(literal(input.suffix));
+                    }
+                    return params;
+                }
+            };
+            // If we ended up generating a call to the same instruction as the previous styling property
+            // we can chain the calls together safely to save some bytes, otherwise we have to generate
+            // a separate instruction call. This is primarily a concern with interpolation instructions
+            // where we may start off with one `reference`, but end up using another based on the
+            // number of interpolations.
+            if (previousInstruction && previousInstruction.reference === referenceForCall) {
+                previousInstruction.calls.push(call);
+            }
+            else {
+                instructions.push({ reference: referenceForCall, calls: [call] });
+            }
+        });
+        return instructions;
+    }
+    _buildClassInputs(valueConverter) {
+        if (this._singleClassInputs) {
+            return this._buildSingleInputs(Identifiers.classProp, this._singleClassInputs, valueConverter, null, true);
+        }
+        return [];
+    }
+    _buildStyleInputs(valueConverter) {
+        if (this._singleStyleInputs) {
+            return this._buildSingleInputs(Identifiers.styleProp, this._singleStyleInputs, valueConverter, getStylePropInterpolationExpression, false);
+        }
+        return [];
+    }
+    /**
+     * Constructs all instructions which contain the expressions that will be placed
+     * into the update block of a template function or a directive hostBindings function.
+     */
+    buildUpdateLevelInstructions(valueConverter) {
+        const instructions = [];
+        if (this.hasBindings) {
+            const styleMapInstruction = this.buildStyleMapInstruction(valueConverter);
+            if (styleMapInstruction) {
+                instructions.push(styleMapInstruction);
+            }
+            const classMapInstruction = this.buildClassMapInstruction(valueConverter);
+            if (classMapInstruction) {
+                instructions.push(classMapInstruction);
+            }
+            instructions.push(...this._buildStyleInputs(valueConverter));
+            instructions.push(...this._buildClassInputs(valueConverter));
+        }
+        return instructions;
+    }
+}
+function registerIntoMap(map, key) {
+    if (!map.has(key)) {
+        map.set(key, map.size);
+    }
+}
+function parseProperty(name) {
+    let hasOverrideFlag = false;
+    const overrideIndex = name.indexOf(IMPORTANT_FLAG);
+    if (overrideIndex !== -1) {
+        name = overrideIndex > 0 ? name.substring(0, overrideIndex) : '';
+        hasOverrideFlag = true;
+    }
+    let suffix = null;
+    let property = name;
+    const unitIndex = name.lastIndexOf('.');
+    if (unitIndex > 0) {
+        suffix = name.slice(unitIndex + 1);
+        property = name.substring(0, unitIndex);
+    }
+    return { property, suffix, hasOverrideFlag };
+}
+/**
+ * Gets the instruction to generate for an interpolated class map.
+ * @param interpolation An Interpolation AST
+ */
+function getClassMapInterpolationExpression(interpolation) {
+    switch (getInterpolationArgsLength(interpolation)) {
+        case 1:
+            return Identifiers.classMap;
+        case 3:
+            return Identifiers.classMapInterpolate1;
+        case 5:
+            return Identifiers.classMapInterpolate2;
+        case 7:
+            return Identifiers.classMapInterpolate3;
+        case 9:
+            return Identifiers.classMapInterpolate4;
+        case 11:
+            return Identifiers.classMapInterpolate5;
+        case 13:
+            return Identifiers.classMapInterpolate6;
+        case 15:
+            return Identifiers.classMapInterpolate7;
+        case 17:
+            return Identifiers.classMapInterpolate8;
+        default:
+            return Identifiers.classMapInterpolateV;
+    }
+}
+/**
+ * Gets the instruction to generate for an interpolated style map.
+ * @param interpolation An Interpolation AST
+ */
+function getStyleMapInterpolationExpression(interpolation) {
+    switch (getInterpolationArgsLength(interpolation)) {
+        case 1:
+            return Identifiers.styleMap;
+        case 3:
+            return Identifiers.styleMapInterpolate1;
+        case 5:
+            return Identifiers.styleMapInterpolate2;
+        case 7:
+            return Identifiers.styleMapInterpolate3;
+        case 9:
+            return Identifiers.styleMapInterpolate4;
+        case 11:
+            return Identifiers.styleMapInterpolate5;
+        case 13:
+            return Identifiers.styleMapInterpolate6;
+        case 15:
+            return Identifiers.styleMapInterpolate7;
+        case 17:
+            return Identifiers.styleMapInterpolate8;
+        default:
+            return Identifiers.styleMapInterpolateV;
+    }
+}
+/**
+ * Gets the instruction to generate for an interpolated style prop.
+ * @param interpolation An Interpolation AST
+ */
+function getStylePropInterpolationExpression(interpolation) {
+    switch (getInterpolationArgsLength(interpolation)) {
+        case 1:
+            return Identifiers.styleProp;
+        case 3:
+            return Identifiers.stylePropInterpolate1;
+        case 5:
+            return Identifiers.stylePropInterpolate2;
+        case 7:
+            return Identifiers.stylePropInterpolate3;
+        case 9:
+            return Identifiers.stylePropInterpolate4;
+        case 11:
+            return Identifiers.stylePropInterpolate5;
+        case 13:
+            return Identifiers.stylePropInterpolate6;
+        case 15:
+            return Identifiers.stylePropInterpolate7;
+        case 17:
+            return Identifiers.stylePropInterpolate8;
+        default:
+            return Identifiers.stylePropInterpolateV;
+    }
+}
+/**
+ * Checks whether property name is a custom CSS property.
+ * See: https://www.w3.org/TR/css-variables-1
+ */
+function isCssCustomProperty(name) {
+    return name.startsWith('--');
+}
+function isEmptyExpression(ast) {
+    if (ast instanceof ASTWithSource) {
+        ast = ast.ast;
+    }
+    return ast instanceof EmptyExpr$1;
+}
+
 // Selector attribute name of `<ng-content>`
 const NG_CONTENT_SELECT_ATTR = 'select';
 // Attribute name of `ngProjectAs`.
@@ -26243,7 +28027,9 @@ function prepareEventListenerParameters(eventAst, handlerName = null, scope = nu
     const implicitReceiverExpr = (scope === null || scope.bindingLevel === 0) ?
         variable(CONTEXT_NAME) :
         scope.getOrCreateSharedContextVar(0);
-    const bindingStatements = convertActionBinding(scope, implicitReceiverExpr, handler, 'b', eventAst.handlerSpan, implicitReceiverAccesses, EVENT_BINDING_SCOPE_GLOBALS);
+    const bindingStatements = eventAst.type === 2 /* ParsedEventType.TwoWay */ ?
+        convertAssignmentActionBinding(scope, implicitReceiverExpr, handler, 'b', eventAst.handlerSpan, implicitReceiverAccesses, EVENT_BINDING_SCOPE_GLOBALS) :
+        convertActionBinding(scope, implicitReceiverExpr, handler, 'b', eventAst.handlerSpan, implicitReceiverAccesses, EVENT_BINDING_SCOPE_GLOBALS);
     const statements = [];
     const variableDeclarations = scope?.variableDeclarations();
     const restoreViewStatement = scope?.restoreViewStatement();
@@ -26765,7 +28551,8 @@ class TemplateDefinitionBuilder {
         element.inputs.forEach(input => {
             const stylingInputWasSet = stylingBuilder.registerBoundInput(input);
             if (!stylingInputWasSet) {
-                if (input.type === 0 /* BindingType.Property */ && input.i18n) {
+                if ((input.type === 0 /* BindingType.Property */ || input.type === 5 /* BindingType.TwoWay */) &&
+                    input.i18n) {
                     boundI18nAttrs.push(input);
                 }
                 else {
@@ -26810,7 +28597,7 @@ class TemplateDefinitionBuilder {
             // Generate Listeners (outputs)
             if (element.outputs.length > 0) {
                 for (const outputAst of element.outputs) {
-                    this.creationInstruction(outputAst.sourceSpan, Identifiers.listener, this.prepareListenerParameter(element.name, outputAst, elementIndex));
+                    this.creationInstruction(outputAst.sourceSpan, outputAst.type === 2 /* ParsedEventType.TwoWay */ ? Identifiers.twoWayListener : Identifiers.listener, this.prepareListenerParameter(element.name, outputAst, elementIndex));
                 }
             }
             // Note: it's important to keep i18n/i18nStart instructions after i18nAttributes and
@@ -26853,6 +28640,7 @@ class TemplateDefinitionBuilder {
                 this.allocateBindingSlots(value);
                 propertyBindings.push({
                     span: input.sourceSpan,
+                    reference: Identifiers.property,
                     paramsOrFn: getBindingFunctionParams(() => hasValue ? this.convertPropertyBinding(value) : emptyValueBindInstruction, prepareSyntheticPropertyName(input.name))
                 });
             }
@@ -26891,7 +28679,9 @@ class TemplateDefinitionBuilder {
                         }
                     }
                     this.allocateBindingSlots(value);
-                    if (inputType === 0 /* BindingType.Property */) {
+                    // Note: we don't separate two-way property bindings and regular ones,
+                    // because their assignment order needs to be maintained.
+                    if (inputType === 0 /* BindingType.Property */ || inputType === 5 /* BindingType.TwoWay */) {
                         if (value instanceof Interpolation$1) {
                             // prop="{{value}}" and friends
                             this.interpolatedUpdateInstruction(getPropertyInterpolationExpression(value), elementIndex, attrName, input, value, params);
@@ -26901,6 +28691,7 @@ class TemplateDefinitionBuilder {
                             // Collect all the properties so that we can chain into a single function at the end.
                             propertyBindings.push({
                                 span: input.sourceSpan,
+                                reference: inputType === 5 /* BindingType.TwoWay */ ? Identifiers.twoWayProperty : Identifiers.property,
                                 paramsOrFn: getBindingFunctionParams(() => this.convertPropertyBinding(value), attrName, params)
                             });
                         }
@@ -26933,7 +28724,7 @@ class TemplateDefinitionBuilder {
             }
         });
         for (const propertyBinding of propertyBindings) {
-            this.updateInstructionWithAdvance(elementIndex, propertyBinding.span, Identifiers.property, propertyBinding.paramsOrFn);
+            this.updateInstructionWithAdvance(elementIndex, propertyBinding.span, propertyBinding.reference, propertyBinding.paramsOrFn);
         }
         for (const attributeBinding of attributeBindings) {
             this.updateInstructionWithAdvance(elementIndex, attributeBinding.span, Identifiers.attribute, attributeBinding.paramsOrFn);
@@ -26966,7 +28757,9 @@ class TemplateDefinitionBuilder {
             }
         }
         const contextName = `${this.contextName}${contextNameSuffix}_${index}`;
-        const name = `${contextName}_Template`;
+        // Note: For the unique name, we don't include an unique suffix, unless really needed.
+        // This keeps the generated output more clean as most of the time, we don't expect conflicts.
+        const name = this.constantPool.uniqueName(`${contextName}_Template`, /** alwaysIncludeSuffix */ false);
         // Create the template function
         const visitor = new TemplateDefinitionBuilder(this.constantPool, this._bindingScope, this.level + 1, contextName, this.i18n, index, name, this._namespace, this.fileBasedI18nSuffix, this.i18nUseExternalIds, this.deferBlocks, this.elementLocations, this.allDeferrableDepsFn, this._constants);
         // Nested templates must not be visited until after their parent templates have completed
@@ -27029,7 +28822,7 @@ class TemplateDefinitionBuilder {
             }
             // Generate listeners for directive output
             for (const outputAst of template.outputs) {
-                this.creationInstruction(outputAst.sourceSpan, Identifiers.listener, this.prepareListenerParameter('ng_template', outputAst, templateIndex));
+                this.creationInstruction(outputAst.sourceSpan, outputAst.type === 2 /* ParsedEventType.TwoWay */ ? Identifiers.twoWayListener : Identifiers.listener, this.prepareListenerParameter('ng_template', outputAst, templateIndex));
             }
         }
     }
@@ -27283,7 +29076,9 @@ class TemplateDefinitionBuilder {
         for (const deferredDep of metadata.deps) {
             if (deferredDep.isDeferrable) {
                 // Callback function, e.g. `m () => m.MyCmp;`.
-                const innerFn = arrowFn([new FnParam('m', DYNAMIC_TYPE)], variable('m').prop(deferredDep.symbolName));
+                const innerFn = arrowFn([new FnParam('m', DYNAMIC_TYPE)], 
+                // Default imports are always accessed through the `default` property.
+                variable('m').prop(deferredDep.isDefaultImport ? 'default' : deferredDep.symbolName));
                 // Dynamic import, e.g. `import('./a').then(...)`.
                 const importExpr = (new DynamicImportExpr(deferredDep.importPath)).prop('then').callFn([innerFn]);
                 dependencyExp.push(importExpr);
@@ -28525,6 +30320,171 @@ function createClosureModeGuard() {
         .and(variable(NG_I18N_CLOSURE_MODE));
 }
 
+/**
+ * Translates query flags into `TQueryFlags` type in
+ * packages/core/src/render3/interfaces/query.ts
+ * @param query
+ */
+function toQueryFlags(query) {
+    return ((query.descendants ? 1 /* QueryFlags.descendants */ : 0 /* QueryFlags.none */) |
+        (query.static ? 2 /* QueryFlags.isStatic */ : 0 /* QueryFlags.none */) |
+        (query.emitDistinctChangesOnly ? 4 /* QueryFlags.emitDistinctChangesOnly */ : 0 /* QueryFlags.none */));
+}
+function getQueryPredicate(query, constantPool) {
+    if (Array.isArray(query.predicate)) {
+        let predicate = [];
+        query.predicate.forEach((selector) => {
+            // Each item in predicates array may contain strings with comma-separated refs
+            // (for ex. 'ref, ref1, ..., refN'), thus we extract individual refs and store them
+            // as separate array entities
+            const selectors = selector.split(',').map((token) => literal(token.trim()));
+            predicate.push(...selectors);
+        });
+        return constantPool.getConstLiteral(literalArr(predicate), true);
+    }
+    else {
+        // The original predicate may have been wrapped in a `forwardRef()` call.
+        switch (query.predicate.forwardRef) {
+            case 0 /* ForwardRefHandling.None */:
+            case 2 /* ForwardRefHandling.Unwrapped */:
+                return query.predicate.expression;
+            case 1 /* ForwardRefHandling.Wrapped */:
+                return importExpr(Identifiers.resolveForwardRef).callFn([query.predicate.expression]);
+        }
+    }
+}
+function createQueryCreateCall(query, constantPool, queryTypeFns, prependParams) {
+    const parameters = [];
+    if (prependParams !== undefined) {
+        parameters.push(...prependParams);
+    }
+    if (query.isSignal) {
+        parameters.push(new ReadPropExpr(variable(CONTEXT_NAME), query.propertyName));
+    }
+    parameters.push(getQueryPredicate(query, constantPool), literal(toQueryFlags(query)));
+    if (query.read) {
+        parameters.push(query.read);
+    }
+    const queryCreateFn = query.isSignal ? queryTypeFns.signalBased : queryTypeFns.nonSignal;
+    return importExpr(queryCreateFn).callFn(parameters);
+}
+const queryAdvancePlaceholder = Symbol('queryAdvancePlaceholder');
+/**
+ * Collapses query advance placeholders in a list of statements.
+ *
+ * This allows for less generated code because multiple sibling query advance
+ * statements can be collapsed into a single call with the count as argument.
+ *
+ * e.g.
+ *
+ * ```ts
+ *   bla();
+ *   queryAdvance();
+ *   queryAdvance();
+ *   bla();
+ * ```
+ *
+ *   --> will turn into
+ *
+ * ```
+ *   bla();
+ *   queryAdvance(2);
+ *   bla();
+ * ```
+ */
+function collapseAdvanceStatements(statements) {
+    const result = [];
+    let advanceCollapseCount = 0;
+    const flushAdvanceCount = () => {
+        if (advanceCollapseCount > 0) {
+            result.unshift(importExpr(Identifiers.queryAdvance)
+                .callFn(advanceCollapseCount === 1 ? [] : [literal(advanceCollapseCount)])
+                .toStmt());
+            advanceCollapseCount = 0;
+        }
+    };
+    // Iterate through statements in reverse and collapse advance placeholders.
+    for (let i = statements.length - 1; i >= 0; i--) {
+        const st = statements[i];
+        if (st === queryAdvancePlaceholder) {
+            advanceCollapseCount++;
+        }
+        else {
+            flushAdvanceCount();
+            result.unshift(st);
+        }
+    }
+    flushAdvanceCount();
+    return result;
+}
+// Define and update any view queries
+function createViewQueriesFunction(viewQueries, constantPool, name) {
+    const createStatements = [];
+    const updateStatements = [];
+    const tempAllocator = temporaryAllocator(st => updateStatements.push(st), TEMPORARY_NAME);
+    viewQueries.forEach((query) => {
+        // creation call, e.g. r3.viewQuery(somePredicate, true) or
+        //                r3.viewQuerySignal(ctx.prop, somePredicate, true);
+        const queryDefinitionCall = createQueryCreateCall(query, constantPool, {
+            signalBased: Identifiers.viewQuerySignal,
+            nonSignal: Identifiers.viewQuery,
+        });
+        createStatements.push(queryDefinitionCall.toStmt());
+        // Signal queries update lazily and we just advance the index.
+        if (query.isSignal) {
+            updateStatements.push(queryAdvancePlaceholder);
+            return;
+        }
+        // update, e.g. (r3.queryRefresh(tmp = r3.loadQuery()) && (ctx.someDir = tmp));
+        const temporary = tempAllocator();
+        const getQueryList = importExpr(Identifiers.loadQuery).callFn([]);
+        const refresh = importExpr(Identifiers.queryRefresh).callFn([temporary.set(getQueryList)]);
+        const updateDirective = variable(CONTEXT_NAME)
+            .prop(query.propertyName)
+            .set(query.first ? temporary.prop('first') : temporary);
+        updateStatements.push(refresh.and(updateDirective).toStmt());
+    });
+    const viewQueryFnName = name ? `${name}_Query` : null;
+    return fn([new FnParam(RENDER_FLAGS, NUMBER_TYPE), new FnParam(CONTEXT_NAME, null)], [
+        renderFlagCheckIfStmt(1 /* core.RenderFlags.Create */, createStatements),
+        renderFlagCheckIfStmt(2 /* core.RenderFlags.Update */, collapseAdvanceStatements(updateStatements))
+    ], INFERRED_TYPE, null, viewQueryFnName);
+}
+// Define and update any content queries
+function createContentQueriesFunction(queries, constantPool, name) {
+    const createStatements = [];
+    const updateStatements = [];
+    const tempAllocator = temporaryAllocator(st => updateStatements.push(st), TEMPORARY_NAME);
+    for (const query of queries) {
+        // creation, e.g. r3.contentQuery(dirIndex, somePredicate, true, null) or
+        //                r3.contentQuerySignal(dirIndex, propName, somePredicate, <flags>, <read>).
+        createStatements.push(createQueryCreateCall(query, constantPool, { nonSignal: Identifiers.contentQuery, signalBased: Identifiers.contentQuerySignal }, 
+        /* prependParams */ [variable('dirIndex')])
+            .toStmt());
+        // Signal queries update lazily and we just advance the index.
+        if (query.isSignal) {
+            updateStatements.push(queryAdvancePlaceholder);
+            continue;
+        }
+        // update, e.g. (r3.queryRefresh(tmp = r3.loadQuery()) && (ctx.someDir = tmp));
+        const temporary = tempAllocator();
+        const getQueryList = importExpr(Identifiers.loadQuery).callFn([]);
+        const refresh = importExpr(Identifiers.queryRefresh).callFn([temporary.set(getQueryList)]);
+        const updateDirective = variable(CONTEXT_NAME)
+            .prop(query.propertyName)
+            .set(query.first ? temporary.prop('first') : temporary);
+        updateStatements.push(refresh.and(updateDirective).toStmt());
+    }
+    const contentQueriesFnName = name ? `${name}_ContentQueries` : null;
+    return fn([
+        new FnParam(RENDER_FLAGS, NUMBER_TYPE), new FnParam(CONTEXT_NAME, null),
+        new FnParam('dirIndex', null)
+    ], [
+        renderFlagCheckIfStmt(1 /* core.RenderFlags.Create */, createStatements),
+        renderFlagCheckIfStmt(2 /* core.RenderFlags.Update */, collapseAdvanceStatements(updateStatements)),
+    ], INFERRED_TYPE, null, contentQueriesFnName);
+}
+
 // This regex matches any binding names that contain the "attr." prefix, e.g. "attr.required"
 // If there is a match, the first matching group will contain the attribute name to bind.
 const ATTR_REGEX = /attr\.([^\]]+)/;
@@ -28625,9 +30585,9 @@ function compileDirectiveFromMetadata(meta, constantPool, bindingParser) {
 function createDeferredDepsFunction(constantPool, name, deps) {
     // This defer block has deps for which we need to generate dynamic imports.
     const dependencyExp = [];
-    for (const [symbolName, importPath] of deps) {
+    for (const [symbolName, { importPath, isDefaultImport }] of deps) {
         // Callback function, e.g. `m () => m.MyCmp;`.
-        const innerFn = arrowFn([new FnParam('m', DYNAMIC_TYPE)], variable('m').prop(symbolName));
+        const innerFn = arrowFn([new FnParam('m', DYNAMIC_TYPE)], variable('m').prop(isDefaultImport ? 'default' : symbolName));
         // Dynamic import, e.g. `import('./a').then(...)`.
         const importExpr = (new DynamicImportExpr(importPath)).prop('then').callFn([innerFn]);
         dependencyExp.push(importExpr);
@@ -28656,16 +30616,16 @@ function compileComponentFromMetadata(meta, constantPool, bindingParser) {
     // e.g. `template: function MyComponent_Template(_ctx, _cm) {...}`
     const templateTypeName = meta.name;
     const templateName = templateTypeName ? `${templateTypeName}_Template` : null;
+    let allDeferrableDepsFn = null;
+    if (meta.deferBlocks.size > 0 && meta.deferrableTypes.size > 0 &&
+        meta.deferBlockDepsEmitMode === 1 /* DeferBlockDepsEmitMode.PerComponent */) {
+        const fnName = `${templateTypeName}_DeferFn`;
+        allDeferrableDepsFn = createDeferredDepsFunction(constantPool, fnName, meta.deferrableTypes);
+    }
     // Template compilation is currently conditional as we're in the process of rewriting it.
-    {
+    if (!meta.useTemplatePipeline) {
         // This is the main path currently used in compilation, which compiles the template with the
         // legacy `TemplateDefinitionBuilder`.
-        let allDeferrableDepsFn = null;
-        if (meta.deferBlocks.size > 0 && meta.deferrableTypes.size > 0 &&
-            meta.deferBlockDepsEmitMode === 1 /* DeferBlockDepsEmitMode.PerComponent */) {
-            const fnName = `${templateTypeName}_DeferFn`;
-            allDeferrableDepsFn = createDeferredDepsFunction(constantPool, fnName, meta.deferrableTypes);
-        }
         const template = meta.template;
         const templateBuilder = new TemplateDefinitionBuilder(constantPool, BindingScope.createRootScope(), 0, templateTypeName, null, null, templateName, Identifiers.namespaceHTML, meta.relativeContextFilePath, meta.i18nUseExternalIds, meta.deferBlocks, new Map(), allDeferrableDepsFn);
         const templateFunctionExpression = templateBuilder.buildTemplateFunction(template.nodes, []);
@@ -28699,6 +30659,31 @@ function compileComponentFromMetadata(meta, constantPool, bindingParser) {
         }
         definitionMap.set('template', templateFunctionExpression);
     }
+    else {
+        // This path compiles the template using the prototype template pipeline. First the template is
+        // ingested into IR:
+        const tpl = ingestComponent(meta.name, meta.template.nodes, constantPool, meta.relativeContextFilePath, meta.i18nUseExternalIds, meta.deferBlocks, allDeferrableDepsFn);
+        // Then the IR is transformed to prepare it for cod egeneration.
+        transform(tpl, CompilationJobKind.Tmpl);
+        // Finally we emit the template function:
+        const templateFn = emitTemplateFn(tpl, constantPool);
+        if (tpl.contentSelectors !== null) {
+            definitionMap.set('ngContentSelectors', tpl.contentSelectors);
+        }
+        definitionMap.set('decls', literal(tpl.root.decls));
+        definitionMap.set('vars', literal(tpl.root.vars));
+        if (tpl.consts.length > 0) {
+            if (tpl.constsInitializers.length > 0) {
+                definitionMap.set('consts', arrowFn([], [
+                    ...tpl.constsInitializers, new ReturnStatement(literalArr(tpl.consts))
+                ]));
+            }
+            else {
+                definitionMap.set('consts', literalArr(tpl.consts));
+            }
+        }
+        definitionMap.set('template', templateFn);
+    }
     if (meta.declarationListEmitMode !== 3 /* DeclarationListEmitMode.RuntimeResolved */ &&
         meta.declarations.length > 0) {
         definitionMap.set('dependencies', compileDeclarationList(literalArr(meta.declarations.map(decl => decl.type)), meta.declarationListEmitMode));
@@ -28794,22 +30779,6 @@ function compileDeclarationList(list, mode) {
             throw new Error(`Unsupported with an array of pre-resolved dependencies`);
     }
 }
-function prepareQueryParams(query, constantPool) {
-    const parameters = [getQueryPredicate(query, constantPool), literal(toQueryFlags(query))];
-    if (query.read) {
-        parameters.push(query.read);
-    }
-    return parameters;
-}
-/**
- * Translates query flags into `TQueryFlags` type in packages/core/src/render3/interfaces/query.ts
- * @param query
- */
-function toQueryFlags(query) {
-    return (query.descendants ? 1 /* QueryFlags.descendants */ : 0 /* QueryFlags.none */) |
-        (query.static ? 2 /* QueryFlags.isStatic */ : 0 /* QueryFlags.none */) |
-        (query.emitDistinctChangesOnly ? 4 /* QueryFlags.emitDistinctChangesOnly */ : 0 /* QueryFlags.none */);
-}
 function convertAttributesToExpressions(attributes) {
     const values = [];
     for (let key of Object.getOwnPropertyNames(attributes)) {
@@ -28818,34 +30787,6 @@ function convertAttributesToExpressions(attributes) {
     }
     return values;
 }
-// Define and update any content queries
-function createContentQueriesFunction(queries, constantPool, name) {
-    const createStatements = [];
-    const updateStatements = [];
-    const tempAllocator = temporaryAllocator(updateStatements, TEMPORARY_NAME);
-    for (const query of queries) {
-        // creation, e.g. r3.contentQuery(dirIndex, somePredicate, true, null);
-        createStatements.push(importExpr(Identifiers.contentQuery)
-            .callFn([variable('dirIndex'), ...prepareQueryParams(query, constantPool)])
-            .toStmt());
-        // update, e.g. (r3.queryRefresh(tmp = r3.loadQuery()) && (ctx.someDir = tmp));
-        const temporary = tempAllocator();
-        const getQueryList = importExpr(Identifiers.loadQuery).callFn([]);
-        const refresh = importExpr(Identifiers.queryRefresh).callFn([temporary.set(getQueryList)]);
-        const updateDirective = variable(CONTEXT_NAME)
-            .prop(query.propertyName)
-            .set(query.first ? temporary.prop('first') : temporary);
-        updateStatements.push(refresh.and(updateDirective).toStmt());
-    }
-    const contentQueriesFnName = name ? `${name}_ContentQueries` : null;
-    return fn([
-        new FnParam(RENDER_FLAGS, NUMBER_TYPE), new FnParam(CONTEXT_NAME, null),
-        new FnParam('dirIndex', null)
-    ], [
-        renderFlagCheckIfStmt(1 /* core.RenderFlags.Create */, createStatements),
-        renderFlagCheckIfStmt(2 /* core.RenderFlags.Update */, updateStatements)
-    ], INFERRED_TYPE, null, contentQueriesFnName);
-}
 function stringAsType(str) {
     return expressionType(literal(str));
 }
@@ -28911,35 +30852,39 @@ function createDirectiveType(meta) {
     }
     return expressionType(importExpr(Identifiers.DirectiveDeclaration, typeParams));
 }
-// Define and update any view queries
-function createViewQueriesFunction(viewQueries, constantPool, name) {
-    const createStatements = [];
-    const updateStatements = [];
-    const tempAllocator = temporaryAllocator(updateStatements, TEMPORARY_NAME);
-    viewQueries.forEach((query) => {
-        // creation, e.g. r3.viewQuery(somePredicate, true);
-        const queryDefinition = importExpr(Identifiers.viewQuery).callFn(prepareQueryParams(query, constantPool));
-        createStatements.push(queryDefinition.toStmt());
-        // update, e.g. (r3.queryRefresh(tmp = r3.loadQuery()) && (ctx.someDir = tmp));
-        const temporary = tempAllocator();
-        const getQueryList = importExpr(Identifiers.loadQuery).callFn([]);
-        const refresh = importExpr(Identifiers.queryRefresh).callFn([temporary.set(getQueryList)]);
-        const updateDirective = variable(CONTEXT_NAME)
-            .prop(query.propertyName)
-            .set(query.first ? temporary.prop('first') : temporary);
-        updateStatements.push(refresh.and(updateDirective).toStmt());
-    });
-    const viewQueryFnName = name ? `${name}_Query` : null;
-    return fn([new FnParam(RENDER_FLAGS, NUMBER_TYPE), new FnParam(CONTEXT_NAME, null)], [
-        renderFlagCheckIfStmt(1 /* core.RenderFlags.Create */, createStatements),
-        renderFlagCheckIfStmt(2 /* core.RenderFlags.Update */, updateStatements)
-    ], INFERRED_TYPE, null, viewQueryFnName);
-}
 // Return a host binding function or null if one is not necessary.
 function createHostBindingsFunction(hostBindingsMetadata, typeSourceSpan, bindingParser, constantPool, selector, name, definitionMap) {
     const bindings = bindingParser.createBoundHostProperties(hostBindingsMetadata.properties, typeSourceSpan);
     // Calculate host event bindings
     const eventBindings = bindingParser.createDirectiveHostEventAsts(hostBindingsMetadata.listeners, typeSourceSpan);
+    if (hostBindingsMetadata.useTemplatePipeline) {
+        // The parser for host bindings treats class and style attributes specially -- they are
+        // extracted into these separate fields. This is not the case for templates, so the compiler can
+        // actually already handle these special attributes internally. Therefore, we just drop them
+        // into the attributes map.
+        if (hostBindingsMetadata.specialAttributes.styleAttr) {
+            hostBindingsMetadata.attributes['style'] =
+                literal(hostBindingsMetadata.specialAttributes.styleAttr);
+        }
+        if (hostBindingsMetadata.specialAttributes.classAttr) {
+            hostBindingsMetadata.attributes['class'] =
+                literal(hostBindingsMetadata.specialAttributes.classAttr);
+        }
+        const hostJob = ingestHostBinding({
+            componentName: name,
+            componentSelector: selector,
+            properties: bindings,
+            events: eventBindings,
+            attributes: hostBindingsMetadata.attributes,
+        }, bindingParser, constantPool);
+        transform(hostJob, CompilationJobKind.Host);
+        definitionMap.set('hostAttrs', hostJob.root.attributes);
+        const varCount = hostJob.root.vars;
+        if (varCount !== null && varCount > 0) {
+            definitionMap.set('hostVars', literal(varCount));
+        }
+        return emitHostBindingFunction(hostJob);
+    }
     let bindingId = 0;
     const getNextBindingId = () => `${bindingId++}`;
     const bindingContext = variable(CONTEXT_NAME);
@@ -29345,7 +31290,7 @@ class R3TargetBinder {
         // Finally, run the TemplateBinder to bind references, variables, and other entities within the
         // template. This extracts all the metadata that doesn't depend on directive matching.
         const { expressions, symbols, nestingLevel, usedPipes, eagerPipes, deferBlocks } = TemplateBinder.applyWithScope(target.template, scope);
-        return new R3BoundTarget(target, directives, eagerDirectives, bindings, references, expressions, symbols, nestingLevel, scopedNodeEntities, usedPipes, eagerPipes, deferBlocks, scope);
+        return new R3BoundTarget(target, directives, eagerDirectives, bindings, references, expressions, symbols, nestingLevel, scopedNodeEntities, usedPipes, eagerPipes, deferBlocks);
     }
 }
 /**
@@ -29741,7 +31686,7 @@ class TemplateBinder extends RecursiveAstVisitor {
         const usedPipes = new Set();
         const eagerPipes = new Set();
         const template = nodes instanceof Template ? nodes : null;
-        const deferBlocks = new Set();
+        const deferBlocks = new Map();
         // The top-level template has nesting level 0.
         const binder = new TemplateBinder(expressions, symbols, usedPipes, eagerPipes, deferBlocks, nestingLevel, scope, template, 0);
         binder.ingest(nodes);
@@ -29770,8 +31715,16 @@ class TemplateBinder extends RecursiveAstVisitor {
             nodeOrNodes.children.forEach(this.visitNode);
             this.nestingLevel.set(nodeOrNodes, this.level);
         }
+        else if (nodeOrNodes instanceof DeferredBlock) {
+            if (this.scope.rootNode !== nodeOrNodes) {
+                throw new Error(`Assertion error: resolved incorrect scope for deferred block ${nodeOrNodes}`);
+            }
+            this.deferBlocks.set(nodeOrNodes, this.scope);
+            nodeOrNodes.children.forEach(node => node.visit(this));
+            this.nestingLevel.set(nodeOrNodes, this.level);
+        }
         else if (nodeOrNodes instanceof SwitchBlockCase || nodeOrNodes instanceof ForLoopBlockEmpty ||
-            nodeOrNodes instanceof DeferredBlock || nodeOrNodes instanceof DeferredBlockError ||
+            nodeOrNodes instanceof DeferredBlockError ||
             nodeOrNodes instanceof DeferredBlockPlaceholder ||
             nodeOrNodes instanceof DeferredBlockLoading) {
             nodeOrNodes.children.forEach(node => node.visit(this));
@@ -29828,7 +31781,6 @@ class TemplateBinder extends RecursiveAstVisitor {
         event.handler.visit(this);
     }
     visitDeferredBlock(deferred) {
-        this.deferBlocks.add(deferred);
         this.ingestScopedNode(deferred);
         deferred.triggers.when?.value.visit(this);
         deferred.prefetchTriggers.when?.value.visit(this);
@@ -29917,7 +31869,7 @@ class TemplateBinder extends RecursiveAstVisitor {
  * See `BoundTarget` for documentation on the individual methods.
  */
 class R3BoundTarget {
-    constructor(target, directives, eagerDirectives, bindings, references, exprTargets, symbols, nestingLevel, scopedNodeEntities, usedPipes, eagerPipes, deferredBlocks, rootScope) {
+    constructor(target, directives, eagerDirectives, bindings, references, exprTargets, symbols, nestingLevel, scopedNodeEntities, usedPipes, eagerPipes, deferBlocks) {
         this.target = target;
         this.directives = directives;
         this.eagerDirectives = eagerDirectives;
@@ -29929,8 +31881,7 @@ class R3BoundTarget {
         this.scopedNodeEntities = scopedNodeEntities;
         this.usedPipes = usedPipes;
         this.eagerPipes = eagerPipes;
-        this.deferredBlocks = deferredBlocks;
-        this.rootScope = rootScope;
+        this.deferBlocks = deferBlocks;
     }
     getEntitiesInScope(node) {
         return this.scopedNodeEntities.get(node) ?? new Set();
@@ -29969,7 +31920,7 @@ class R3BoundTarget {
         return Array.from(this.eagerPipes);
     }
     getDeferBlocks() {
-        return Array.from(this.deferredBlocks);
+        return Array.from(this.deferBlocks.keys());
     }
     getDeferredTriggerTarget(block, trigger) {
         // Only triggers that refer to DOM nodes can be resolved.
@@ -30021,10 +31972,14 @@ class R3BoundTarget {
         return null;
     }
     isDeferred(element) {
-        for (const deferBlock of this.deferredBlocks) {
-            const scope = this.rootScope.childScopes.get(deferBlock);
-            if (scope && scope.elementsInScope.has(element)) {
-                return true;
+        for (const deferredScope of this.deferBlocks.values()) {
+            const stack = [deferredScope];
+            while (stack.length > 0) {
+                const current = stack.pop();
+                if (current.elementsInScope.has(element)) {
+                    return true;
+                }
+                stack.push(...current.childScopes.values());
             }
         }
         return false;
@@ -30096,6 +32051,7 @@ function extractScopedNodeEntities(rootScope) {
 class ResourceLoader {
 }
 
+const SHOULD_USE_TEMPLATE_PIPELINE_FOR_JIT = true;
 class CompilerFacadeImpl {
     constructor(jitEvaluator = new JitEvaluator()) {
         this.jitEvaluator = jitEvaluator;
@@ -30229,6 +32185,7 @@ class CompilerFacadeImpl {
                 null,
             relativeContextFilePath: '',
             i18nUseExternalIds: true,
+            useTemplatePipeline: SHOULD_USE_TEMPLATE_PIPELINE_FOR_JIT,
         };
         const jitExpressionSourceMap = `ng:///${facade.name}.js`;
         return this.compileComponentFromMeta(angularCoreEnv, jitExpressionSourceMap, meta);
@@ -30292,6 +32249,7 @@ class CompilerFacadeImpl {
 function convertToR3QueryMetadata(facade) {
     return {
         ...facade,
+        isSignal: facade.isSignal,
         predicate: convertQueryPredicate(facade.predicate),
         read: facade.read ? new WrappedNodeExpr(facade.read) : null,
         static: facade.static,
@@ -30307,6 +32265,7 @@ function convertQueryDeclarationToMetadata(declaration) {
         read: declaration.read ? new WrappedNodeExpr(declaration.read) : null,
         static: declaration.static ?? false,
         emitDistinctChangesOnly: declaration.emitDistinctChangesOnly ?? true,
+        isSignal: !!declaration.isSignal,
     };
 }
 function convertQueryPredicate(predicate) {
@@ -30349,7 +32308,10 @@ function convertDirectiveFacadeToMetadata(facade) {
         typeSourceSpan: facade.typeSourceSpan,
         type: wrapReference(facade.type),
         deps: null,
-        host: extractHostBindings(facade.propMetadata, facade.typeSourceSpan, facade.host),
+        host: {
+            ...extractHostBindings(facade.propMetadata, facade.typeSourceSpan, facade.host),
+            useTemplatePipeline: SHOULD_USE_TEMPLATE_PIPELINE_FOR_JIT,
+        },
         inputs: { ...inputsFromMetadata, ...inputsFromType },
         outputs: { ...outputsFromMetadata, ...outputsFromType },
         queries: facade.queries.map(convertToR3QueryMetadata),
@@ -30392,6 +32354,7 @@ function convertHostDeclarationToMetadata(host = {}) {
             classAttr: host.classAttribute,
             styleAttr: host.styleAttribute,
         },
+        useTemplatePipeline: SHOULD_USE_TEMPLATE_PIPELINE_FOR_JIT,
     };
 }
 function convertHostDirectivesToMetadata(metadata) {
@@ -30464,6 +32427,7 @@ function convertDeclareComponentFacadeToMetadata(decl, typeSourceSpan, sourceMap
         declarationListEmitMode: 2 /* DeclarationListEmitMode.ClosureResolved */,
         relativeContextFilePath: '',
         i18nUseExternalIds: true,
+        useTemplatePipeline: SHOULD_USE_TEMPLATE_PIPELINE_FOR_JIT,
     };
 }
 function convertDeclarationFacadeToMetadata(declaration) {
@@ -30745,7 +32709,7 @@ function publishFacade(global) {
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-const VERSION = new Version('17.1.0');
+const VERSION = new Version('17.3.0');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = exports.ViewEncapsulation.Emulated, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -32246,9 +34210,11 @@ function compileComponentClassMetadata(metadata, deferrableTypes) {
     }
     const dynamicImports = [];
     const importedSymbols = [];
-    for (const [symbolName, importPath] of deferrableTypes) {
+    for (const [symbolName, { importPath, isDefaultImport }] of deferrableTypes) {
         // e.g. `(m) => m.CmpA`
-        const innerFn = arrowFn([new FnParam('m', DYNAMIC_TYPE)], variable('m').prop(symbolName));
+        const innerFn = 
+        // Default imports are always accessed through the `default` property.
+        arrowFn([new FnParam('m', DYNAMIC_TYPE)], variable('m').prop(isDefaultImport ? 'default' : symbolName));
         // e.g. `import('./cmp-a').then(...)`
         const importExpr = (new DynamicImportExpr(importPath)).prop('then').callFn([innerFn]);
         dynamicImports.push(importExpr);
@@ -32311,7 +34277,7 @@ const MINIMUM_PARTIAL_LINKER_VERSION$5 = '12.0.0';
 function compileDeclareClassMetadata(metadata) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$5));
-    definitionMap.set('version', literal('17.1.0'));
+    definitionMap.set('version', literal('17.3.0'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -32407,7 +34373,7 @@ function createDirectiveDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     const minVersion = getMinimumVersionForPartialOutput(meta);
     definitionMap.set('minVersion', literal(minVersion));
-    definitionMap.set('version', literal('17.1.0'));
+    definitionMap.set('version', literal('17.3.0'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -32475,6 +34441,11 @@ function getMinimumVersionForPartialOutput(meta) {
     if (needsNewInputPartialOutput(meta)) {
         minVersion = '17.1.0';
     }
+    // If there are signal-based queries, partial output generates an extra field
+    // that should be parsed by linkers. Ensure a proper minimum linker version.
+    if (meta.queries.some(q => q.isSignal) || meta.viewQueries.some(q => q.isSignal)) {
+        minVersion = '17.2.0';
+    }
     return minVersion;
 }
 /**
@@ -32508,6 +34479,9 @@ function compileQuery(query) {
     if (query.static) {
         meta.set('static', literal(true));
     }
+    if (query.isSignal) {
+        meta.set('isSignal', literal(true));
+    }
     return meta.toLiteralMap();
 }
 /**
@@ -32788,7 +34762,7 @@ const MINIMUM_PARTIAL_LINKER_VERSION$4 = '12.0.0';
 function compileDeclareFactoryFunction(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$4));
-    definitionMap.set('version', literal('17.1.0'));
+    definitionMap.set('version', literal('17.3.0'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -32823,7 +34797,7 @@ function compileDeclareInjectableFromMetadata(meta) {
 function createInjectableDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$3));
-    definitionMap.set('version', literal('17.1.0'));
+    definitionMap.set('version', literal('17.3.0'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -32874,7 +34848,7 @@ function compileDeclareInjectorFromMetadata(meta) {
 function createInjectorDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$2));
-    definitionMap.set('version', literal('17.1.0'));
+    definitionMap.set('version', literal('17.3.0'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -32907,7 +34881,7 @@ function createNgModuleDefinitionMap(meta) {
         throw new Error('Invalid path! Local compilation mode should not get into the partial compilation path');
     }
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$1));
-    definitionMap.set('version', literal('17.1.0'));
+    definitionMap.set('version', literal('17.3.0'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // We only generate the keys in the metadata if the arrays contain values.
@@ -32958,7 +34932,7 @@ function compileDeclarePipeFromMetadata(meta) {
 function createPipeDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION));
-    definitionMap.set('version', literal('17.1.0'));
+    definitionMap.set('version', literal('17.3.0'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);
@@ -33095,6 +35069,7 @@ exports.TemplateLiteral = TemplateLiteral;
 exports.TemplateLiteralElement = TemplateLiteralElement;
 exports.Text = Text;
 exports.ThisReceiver = ThisReceiver;
+exports.TmplAstBlockNode = BlockNode;
 exports.TmplAstBoundAttribute = BoundAttribute;
 exports.TmplAstBoundDeferredTrigger = BoundDeferredTrigger;
 exports.TmplAstBoundEvent = BoundEvent;
@@ -33145,7 +35120,6 @@ exports.Xliff2 = Xliff2;
 exports.Xmb = Xmb;
 exports.XmlParser = XmlParser;
 exports.Xtb = Xtb;
-exports._ParseAST = _ParseAST;
 exports.compileClassDebugInfo = compileClassDebugInfo;
 exports.compileClassMetadata = compileClassMetadata;
 exports.compileComponentClassMetadata = compileComponentClassMetadata;
@@ -33194,5 +35168,6 @@ exports.publishFacade = publishFacade;
 exports.r3JitTypeSourceSpan = r3JitTypeSourceSpan;
 exports.sanitizeIdentifier = sanitizeIdentifier;
 exports.splitNsName = splitNsName;
+exports.tmplAstVisitAll = visitAll$1;
 exports.verifyHostBindings = verifyHostBindings;
 exports.visitAll = visitAll;