@angular/compiler 17.0.6 → 17.0.7

package/fesm2022/compiler.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v17.0.6
+ * @license Angular v17.0.7
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -9064,23 +9064,27 @@ var ExpressionKind;
      * 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"] = 21] = "SlotLiteralExpr";
+    ExpressionKind[ExpressionKind["SlotLiteralExpr"] = 22] = "SlotLiteralExpr";
     /**
      * A test expression for a conditional op.
      */
-    ExpressionKind[ExpressionKind["ConditionalCase"] = 22] = "ConditionalCase";
+    ExpressionKind[ExpressionKind["ConditionalCase"] = 23] = "ConditionalCase";
     /**
      * A variable for use inside a repeater, providing one of the ambiently-available context
      * properties ($even, $first, etc.).
      */
-    ExpressionKind[ExpressionKind["DerivedRepeaterVar"] = 23] = "DerivedRepeaterVar";
+    ExpressionKind[ExpressionKind["DerivedRepeaterVar"] = 24] = "DerivedRepeaterVar";
     /**
      * An expression that will be automatically extracted to the component const array.
      */
-    ExpressionKind[ExpressionKind["ConstCollected"] = 24] = "ConstCollected";
+    ExpressionKind[ExpressionKind["ConstCollected"] = 25] = "ConstCollected";
 })(ExpressionKind || (ExpressionKind = {}));
 var VariableFlags;
 (function (VariableFlags) {
@@ -9124,18 +9128,6 @@ var CompatibilityMode;
     CompatibilityMode[CompatibilityMode["Normal"] = 0] = "Normal";
     CompatibilityMode[CompatibilityMode["TemplateDefinitionBuilder"] = 1] = "TemplateDefinitionBuilder";
 })(CompatibilityMode || (CompatibilityMode = {}));
-/**
- * Represents functions used to sanitize different pieces of a template.
- */
-var SanitizerFn;
-(function (SanitizerFn) {
-    SanitizerFn[SanitizerFn["Html"] = 0] = "Html";
-    SanitizerFn[SanitizerFn["Script"] = 1] = "Script";
-    SanitizerFn[SanitizerFn["Style"] = 2] = "Style";
-    SanitizerFn[SanitizerFn["Url"] = 3] = "Url";
-    SanitizerFn[SanitizerFn["ResourceUrl"] = 4] = "ResourceUrl";
-    SanitizerFn[SanitizerFn["IframeAttribute"] = 5] = "IframeAttribute";
-})(SanitizerFn || (SanitizerFn = {}));
 /**
  * Enumeration of the different kinds of `@defer` secondary blocks.
  */
@@ -9414,7 +9406,7 @@ class Interpolation {
 /**
  * Create a `BindingOp`, not yet transformed into a particular type of binding.
  */
-function createBindingOp(target, kind, name, expression, unit, securityContext, isTextAttribute, isStructuralTemplate, i18nContext, sourceSpan) {
+function createBindingOp(target, kind, name, expression, unit, securityContext, isTextAttribute, isStructuralTemplateAttribute, templateKind, i18nMessage, sourceSpan) {
     return {
         kind: OpKind.Binding,
         bindingKind: kind,
@@ -9424,8 +9416,10 @@ function createBindingOp(target, kind, name, expression, unit, securityContext,
         unit,
         securityContext,
         isTextAttribute,
-        isStructuralTemplate: isStructuralTemplate,
-        i18nContext,
+        isStructuralTemplateAttribute,
+        templateKind,
+        i18nContext: null,
+        i18nMessage,
         sourceSpan,
         ...NEW_OP,
     };
@@ -9433,7 +9427,7 @@ function createBindingOp(target, kind, name, expression, unit, securityContext,
 /**
  * Create a `PropertyOp`.
  */
-function createPropertyOp(target, name, expression, isAnimationTrigger, securityContext, isStructuralTemplate, i18nContext, sourceSpan) {
+function createPropertyOp(target, name, expression, isAnimationTrigger, securityContext, isStructuralTemplateAttribute, templateKind, i18nContext, i18nMessage, sourceSpan) {
     return {
         kind: OpKind.Property,
         target,
@@ -9442,8 +9436,10 @@ function createPropertyOp(target, name, expression, isAnimationTrigger, security
         isAnimationTrigger,
         securityContext,
         sanitizer: null,
-        isStructuralTemplate,
+        isStructuralTemplateAttribute,
+        templateKind,
         i18nContext,
+        i18nMessage,
         sourceSpan,
         ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
         ...TRAIT_CONSUMES_VARS,
@@ -9508,7 +9504,7 @@ function createClassMapOp(xref, expression, sourceSpan) {
 /**
  * Create an `AttributeOp`.
  */
-function createAttributeOp(target, name, expression, securityContext, isTextAttribute, isStructuralTemplate, i18nContext, sourceSpan) {
+function createAttributeOp(target, name, expression, securityContext, isTextAttribute, isStructuralTemplateAttribute, templateKind, i18nMessage, sourceSpan) {
     return {
         kind: OpKind.Attribute,
         target,
@@ -9517,8 +9513,10 @@ function createAttributeOp(target, name, expression, securityContext, isTextAttr
         securityContext,
         sanitizer: null,
         isTextAttribute,
-        isStructuralTemplate,
-        i18nContext,
+        isStructuralTemplateAttribute,
+        templateKind,
+        i18nContext: null,
+        i18nMessage,
         sourceSpan,
         ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
         ...TRAIT_CONSUMES_VARS,
@@ -10152,24 +10150,6 @@ class ReadTemporaryExpr extends ExpressionBase {
         return r;
     }
 }
-class SanitizerExpr extends ExpressionBase {
-    constructor(fn) {
-        super();
-        this.fn = fn;
-        this.kind = ExpressionKind.SanitizerExpr;
-    }
-    visitExpression(visitor, context) { }
-    isEquivalent(e) {
-        return e instanceof SanitizerExpr && e.fn === this.fn;
-    }
-    isConstant() {
-        return true;
-    }
-    clone() {
-        return new SanitizerExpr(this.fn);
-    }
-    transformInternalExpressions() { }
-}
 class SlotLiteralExpr extends ExpressionBase {
     constructor(slot) {
         super();
@@ -10300,7 +10280,6 @@ function transformExpressionsInOp(op, transform, flags) {
         case OpKind.ClassProp:
         case OpKind.ClassMap:
         case OpKind.Binding:
-        case OpKind.HostProperty:
             if (op.expression instanceof Interpolation) {
                 transformExpressionsInInterpolation(op.expression, transform, flags);
             }
@@ -10309,6 +10288,7 @@ function transformExpressionsInOp(op, transform, flags) {
             }
             break;
         case OpKind.Property:
+        case OpKind.HostProperty:
         case OpKind.Attribute:
             if (op.expression instanceof Interpolation) {
                 transformExpressionsInInterpolation(op.expression, transform, flags);
@@ -10354,6 +10334,8 @@ function transformExpressionsInOp(op, transform, flags) {
         case OpKind.ExtractedAttribute:
             op.expression =
                 op.expression && transformExpressionsInExpression(op.expression, transform, flags);
+            op.trustedValueFn = op.trustedValueFn &&
+                transformExpressionsInExpression(op.trustedValueFn, transform, flags);
             break;
         case OpKind.RepeaterCreate:
             op.track = transformExpressionsInExpression(op.track, transform, flags);
@@ -10485,6 +10467,14 @@ function transformExpressionsInExpression(expr, transform, flags) {
     else if (expr instanceof NotExpr) {
         expr.condition = transformExpressionsInExpression(expr.condition, transform, flags);
     }
+    else if (expr instanceof TaggedTemplateExpr) {
+        expr.tag = transformExpressionsInExpression(expr.tag, transform, flags);
+        expr.template.expressions =
+            expr.template.expressions.map(e => transformExpressionsInExpression(e, transform, flags));
+    }
+    else if (expr instanceof WrappedNodeExpr) {
+        // TODO: Do we need to transform any TS nodes nested inside of this expression?
+    }
     else if (expr instanceof ReadVarExpr || expr instanceof ExternalExpr ||
         expr instanceof LiteralExpr) {
         // No action for these types.
@@ -10846,7 +10836,7 @@ function createTemplateOp(xref, templateKind, tag, functionNameSuffix, namespace
         ...NEW_OP,
     };
 }
-function createRepeaterCreateOp(primaryView, emptyView, tag, track, varNames, sourceSpan) {
+function createRepeaterCreateOp(primaryView, emptyView, tag, track, varNames, i18nPlaceholder, emptyI18nPlaceholder, sourceSpan) {
     return {
         kind: OpKind.RepeaterCreate,
         attributes: null,
@@ -10864,6 +10854,8 @@ function createRepeaterCreateOp(primaryView, emptyView, tag, track, varNames, so
         vars: null,
         varNames,
         usesComponentInstance: false,
+        i18nPlaceholder,
+        emptyI18nPlaceholder,
         sourceSpan,
         ...TRAIT_CONSUMES_SLOT,
         ...NEW_OP,
@@ -10912,7 +10904,9 @@ function createTextOp(xref, initialValue, sourceSpan) {
 /**
  * Create a `ListenerOp`. Host bindings reuse all the listener logic.
  */
-function createListenerOp(target, targetSlot, name, tag, animationPhase, hostListener, sourceSpan) {
+function createListenerOp(target, targetSlot, name, tag, handlerOps, animationPhase, eventTarget, hostListener, sourceSpan) {
+    const handlerList = new OpList();
+    handlerList.push(handlerOps);
     return {
         kind: OpKind.Listener,
         target,
@@ -10920,11 +10914,12 @@ function createListenerOp(target, targetSlot, name, tag, animationPhase, hostLis
         tag,
         hostListener,
         name,
-        handlerOps: new OpList(),
+        handlerOps: handlerList,
         handlerFnName: null,
         consumesDollarEvent: false,
         isAnimationListener: animationPhase !== null,
-        animationPhase: animationPhase,
+        animationPhase,
+        eventTarget,
         sourceSpan,
         ...NEW_OP,
     };
@@ -10971,7 +10966,7 @@ function createProjectionOp(xref, selector, i18nPlaceholder, attributes, sourceS
 /**
  * Create an `ExtractedAttributeOp`.
  */
-function createExtractedAttributeOp(target, bindingKind, name, expression, i18nContext) {
+function createExtractedAttributeOp(target, bindingKind, name, expression, i18nContext, i18nMessage, securityContext) {
     return {
         kind: OpKind.ExtractedAttribute,
         target,
@@ -10979,6 +10974,9 @@ function createExtractedAttributeOp(target, bindingKind, name, expression, i18nC
         name,
         expression,
         i18nContext,
+        i18nMessage,
+        securityContext,
+        trustedValueFn: null,
         ...NEW_OP,
     };
 }
@@ -11121,13 +11119,15 @@ function literalOrArrayLiteral$1(value) {
     return literal(value, INFERRED_TYPE);
 }
 
-function createHostPropertyOp(name, expression, isAnimationTrigger, i18nContext, sourceSpan) {
+function createHostPropertyOp(name, expression, isAnimationTrigger, i18nContext, securityContext, sourceSpan) {
     return {
         kind: OpKind.HostProperty,
         name,
         expression,
         isAnimationTrigger,
         i18nContext,
+        securityContext,
+        sanitizer: null,
         sourceSpan,
         ...TRAIT_CONSUMES_VARS,
         ...NEW_OP,
@@ -11407,68 +11407,52 @@ function needsApplication(i18nContexts, op) {
  * after the last update instruction that depends on that slot.
  */
 function assignI18nSlotDependencies(job) {
-    const i18nLastSlotConsumers = new Map();
-    let lastSlotConsumer = null;
-    let currentI18nOp = null;
     for (const unit of job.units) {
-        // Record the last consumed slot before each i18n end instruction.
-        for (const op of unit.create) {
-            if (hasConsumesSlotTrait(op)) {
-                lastSlotConsumer = op.xref;
+        // The first update op.
+        let updateOp = unit.update.head;
+        // I18n expressions currently being moved during the iteration.
+        let i18nExpressionsInProgress = [];
+        // Non-null  while we are iterating through an i18nStart/i18nEnd pair
+        let state = null;
+        for (const createOp of unit.create) {
+            if (createOp.kind === OpKind.I18nStart) {
+                state = {
+                    blockXref: createOp.xref,
+                    lastSlotConsumer: createOp.xref,
+                };
             }
-            switch (op.kind) {
-                case OpKind.I18nStart:
-                    currentI18nOp = op;
-                    break;
-                case OpKind.I18nEnd:
-                    if (currentI18nOp === null) {
-                        throw new Error('AssertionError: Expected an active I18n block while calculating last slot consumers');
+            else if (createOp.kind === OpKind.I18nEnd) {
+                for (const op of i18nExpressionsInProgress) {
+                    op.target = state.lastSlotConsumer;
+                    OpList.insertBefore(op, updateOp);
+                }
+                i18nExpressionsInProgress.length = 0;
+                state = null;
+            }
+            if (hasConsumesSlotTrait(createOp)) {
+                if (state !== null) {
+                    state.lastSlotConsumer = createOp.xref;
+                }
+                while (true) {
+                    if (updateOp.next === null) {
+                        break;
                     }
-                    if (lastSlotConsumer === null) {
-                        throw new Error('AssertionError: Expected a last slot consumer while calculating last slot consumers');
+                    if (state !== null && updateOp.kind === OpKind.I18nExpression &&
+                        updateOp.usage === I18nExpressionFor.I18nText &&
+                        updateOp.i18nOwner === state.blockXref) {
+                        const opToRemove = updateOp;
+                        updateOp = updateOp.next;
+                        OpList.remove(opToRemove);
+                        i18nExpressionsInProgress.push(opToRemove);
+                        continue;
                     }
-                    i18nLastSlotConsumers.set(currentI18nOp.xref, lastSlotConsumer);
-                    currentI18nOp = null;
-                    break;
-            }
-        }
-        // Expresions that are currently being moved.
-        let opsToMove = [];
-        // Previously we found the last slot-consuming create mode op in the i18n block. That op will be
-        // the new target for any moved i18n expresion inside the i18n block, and that op's slot is
-        // stored here.
-        let moveAfterTarget = null;
-        // This is the last target in the create IR that we saw during iteration. Eventally, it will be
-        // equal to moveAfterTarget. But wait! We need to find the *last* such op whose target is equal
-        // to `moveAfterTarget`.
-        let previousTarget = null;
-        for (const op of unit.update) {
-            if (hasDependsOnSlotContextTrait(op)) {
-                // We've found an op that depends on another slot other than the one that we want to move
-                // the expressions to, after previously having seen the one we want to move to.
-                if (moveAfterTarget !== null && previousTarget === moveAfterTarget &&
-                    op.target !== previousTarget) {
-                    OpList.insertBefore(opsToMove, op);
-                    moveAfterTarget = null;
-                    opsToMove = [];
-                }
-                previousTarget = op.target;
-            }
-            if (op.kind === OpKind.I18nExpression && op.usage === I18nExpressionFor.I18nText) {
-                // This is an I18nExpressionOps that is used for text (not attributes).
-                OpList.remove(op);
-                opsToMove.push(op);
-                const target = i18nLastSlotConsumers.get(op.i18nOwner);
-                if (target === undefined) {
-                    throw new Error('AssertionError: Expected to find a last slot consumer for an I18nExpressionOp');
+                    if (hasDependsOnSlotContextTrait(updateOp) && updateOp.target !== createOp.xref) {
+                        break;
+                    }
+                    updateOp = updateOp.next;
                 }
-                op.target = target;
-                moveAfterTarget = op.target;
             }
         }
-        if (moveAfterTarget !== null) {
-            unit.update.push(opsToMove);
-        }
     }
 }
 
@@ -11501,19 +11485,21 @@ function extractAttributes(job) {
                 case OpKind.Property:
                     if (!op.isAnimationTrigger) {
                         let bindingKind;
-                        if (op.i18nContext !== null) {
+                        if (op.i18nMessage !== null && op.templateKind === null) {
                             // If the binding has an i18n context, it is an i18n attribute, and should have that
                             // kind in the consts array.
                             bindingKind = BindingKind.I18n;
                         }
-                        else if (op.isStructuralTemplate) {
-                            // TODO: How do i18n attributes on templates work?!
+                        else if (op.isStructuralTemplateAttribute) {
                             bindingKind = BindingKind.Template;
                         }
                         else {
                             bindingKind = BindingKind.Property;
                         }
-                        OpList.insertBefore(createExtractedAttributeOp(op.target, bindingKind, op.name, null, null), lookupElement$2(elements, op.target));
+                        OpList.insertBefore(
+                        // Deliberaly null i18nMessage value
+                        createExtractedAttributeOp(op.target, bindingKind, op.name, /* expression */ null, /* i18nContext */ null, 
+                        /* i18nMessage */ null, op.securityContext), lookupElement$2(elements, op.target));
                     }
                     break;
                 case OpKind.StyleProp:
@@ -11524,12 +11510,16 @@ function extractAttributes(job) {
                     // mode.
                     if (unit.job.compatibility === CompatibilityMode.TemplateDefinitionBuilder &&
                         op.expression instanceof EmptyExpr) {
-                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.Property, op.name, null, null), lookupElement$2(elements, op.target));
+                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.Property, op.name, /* expression */ null, 
+                        /* i18nContext */ null, 
+                        /* i18nMessage */ null, SecurityContext.STYLE), lookupElement$2(elements, op.target));
                     }
                     break;
                 case OpKind.Listener:
                     if (!op.isAnimationListener) {
-                        const extractedAttributeOp = createExtractedAttributeOp(op.target, BindingKind.Property, op.name, null, null);
+                        const extractedAttributeOp = createExtractedAttributeOp(op.target, BindingKind.Property, op.name, /* expression */ null, 
+                        /* i18nContext */ null, 
+                        /* i18nMessage */ null, SecurityContext.NONE);
                         if (job.kind === CompilationJobKind.Host) {
                             // This attribute will apply to the enclosing host binding compilation unit, so order
                             // doesn't matter.
@@ -11578,7 +11568,7 @@ function extractAttributeOp(unit, op, elements) {
         }
     }
     if (extractable) {
-        const extractedAttributeOp = createExtractedAttributeOp(op.target, op.isStructuralTemplate ? BindingKind.Template : BindingKind.Attribute, op.name, op.expression, op.i18nContext);
+        const extractedAttributeOp = createExtractedAttributeOp(op.target, op.isStructuralTemplateAttribute ? BindingKind.Template : BindingKind.Attribute, op.name, op.expression, op.i18nContext, op.i18nMessage, op.securityContext);
         if (unit.job.kind === CompilationJobKind.Host) {
             // This attribute will apply to the enclosing host binding compilation unit, so order doesn't
             // matter.
@@ -11625,16 +11615,16 @@ function specializeBindings(job) {
                         target.nonBindable = true;
                     }
                     else {
-                        OpList.replace(op, createAttributeOp(op.target, op.name, op.expression, op.securityContext, op.isTextAttribute, op.isStructuralTemplate, op.i18nContext, op.sourceSpan));
+                        OpList.replace(op, createAttributeOp(op.target, op.name, op.expression, op.securityContext, op.isTextAttribute, op.isStructuralTemplateAttribute, op.templateKind, op.i18nMessage, op.sourceSpan));
                     }
                     break;
                 case BindingKind.Property:
                 case BindingKind.Animation:
                     if (job.kind === CompilationJobKind.Host) {
-                        OpList.replace(op, createHostPropertyOp(op.name, op.expression, op.bindingKind === BindingKind.Animation, op.i18nContext, op.sourceSpan));
+                        OpList.replace(op, createHostPropertyOp(op.name, op.expression, op.bindingKind === BindingKind.Animation, op.i18nContext, op.securityContext, op.sourceSpan));
                     }
                     else {
-                        OpList.replace(op, createPropertyOp(op.target, op.name, op.expression, op.bindingKind === BindingKind.Animation, op.securityContext, op.isStructuralTemplate, op.i18nContext, op.sourceSpan));
+                        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.I18n:
@@ -11871,7 +11861,7 @@ function collectElementConsts(job) {
             if (op.kind === OpKind.ExtractedAttribute) {
                 const attributes = allElementAttributes.get(op.target) || new ElementAttributes();
                 allElementAttributes.set(op.target, attributes);
-                attributes.add(op.bindingKind, op.name, op.expression);
+                attributes.add(op.bindingKind, op.name, op.expression, op.trustedValueFn);
                 OpList.remove(op);
             }
         }
@@ -11937,11 +11927,12 @@ class ElementAttributes {
     get i18n() {
         return this.byKind.get(BindingKind.I18n) ?? FLYWEIGHT_ARRAY;
     }
-    add(kind, name, value) {
+    add(kind, name, value, trustedValueFn) {
         if (this.known.has(name)) {
             return;
         }
         this.known.add(name);
+        // TODO: Can this be its own phase
         if (name === 'ngProjectAs') {
             if (value === null || !(value instanceof LiteralExpr) || (value.value == null) ||
                 (typeof value.value?.toString() !== 'string')) {
@@ -11957,7 +11948,15 @@ class ElementAttributes {
             if (value === null) {
                 throw Error('Attribute, i18n attribute, & style element attributes must have a value');
             }
-            array.push(value);
+            if (trustedValueFn !== null) {
+                if (!isStringLiteral(value)) {
+                    throw Error('AssertionError: extracted attribute value should be string literal');
+                }
+                array.push(taggedTemplate(trustedValueFn, new TemplateLiteral([new TemplateLiteralElement(value.value)], []), undefined, value.sourceSpan));
+            }
+            else {
+                array.push(value);
+            }
         }
     }
     arrayFor(kind) {
@@ -12101,6 +12100,9 @@ function createI18nContexts(job) {
     const rootContexts = new Map();
     let currentI18nOp = null;
     let xref;
+    // We use the message instead of the message ID, because placeholder values might differ even
+    // when IDs are the same.
+    const messageToContext = new Map();
     for (const unit of job.units) {
         for (const op of unit.create) {
             switch (op.kind) {
@@ -12138,6 +12140,25 @@ function createI18nContexts(job) {
                     break;
             }
         }
+        for (const op of unit.ops()) {
+            switch (op.kind) {
+                case OpKind.Binding:
+                case OpKind.Property:
+                case OpKind.Attribute:
+                case OpKind.ExtractedAttribute:
+                    if (!op.i18nMessage) {
+                        continue;
+                    }
+                    if (!messageToContext.has(op.i18nMessage)) {
+                        // create the context
+                        const i18nContext = job.allocateXrefId();
+                        unit.create.push(createI18nContextOp(I18nContextKind.Attr, i18nContext, null, op.i18nMessage, null));
+                        messageToContext.set(op.i18nMessage, i18nContext);
+                    }
+                    op.i18nContext = messageToContext.get(op.i18nMessage);
+                    break;
+            }
+        }
     }
     // Assign contexts to child i18n blocks, now that all root i18n blocks have their context
     // assigned.
@@ -12812,9 +12833,15 @@ function recursivelyProcessView(view, parentScope) {
     for (const op of view.create) {
         switch (op.kind) {
             case OpKind.Template:
+                // Descend into child embedded views.
+                recursivelyProcessView(view.job.views.get(op.xref), scope);
+                break;
             case OpKind.RepeaterCreate:
                 // Descend into child embedded views.
                 recursivelyProcessView(view.job.views.get(op.xref), scope);
+                if (op.emptyView) {
+                    recursivelyProcessView(view.job.views.get(op.emptyView), scope);
+                }
                 break;
             case OpKind.Listener:
                 // Prepend variables to listener handler functions.
@@ -19954,7 +19981,7 @@ const ESCAPE = '\uFFFD';
 function collectI18nConsts(job) {
     const fileBasedI18nSuffix = job.relativeContextFilePath.replace(/[^A-Za-z0-9]/g, '_').toUpperCase() + '_';
     // Step One: Build up various lookup maps we need to collect all the consts.
-    // Context Xref -> Extracted Attribute Op
+    // Context Xref -> Extracted Attribute Ops
     const extractedAttributesByI18nContext = new Map();
     // Element/ElementStart Xref -> I18n Attributes config op
     const i18nAttributesByElement = new Map();
@@ -19965,7 +19992,9 @@ function collectI18nConsts(job) {
     for (const unit of job.units) {
         for (const op of unit.ops()) {
             if (op.kind === OpKind.ExtractedAttribute && op.i18nContext !== null) {
-                extractedAttributesByI18nContext.set(op.i18nContext, op);
+                const attributes = extractedAttributesByI18nContext.get(op.i18nContext) ?? [];
+                attributes.push(op);
+                extractedAttributesByI18nContext.set(op.i18nContext, attributes);
             }
             else if (op.kind === OpKind.I18nAttributes) {
                 i18nAttributesByElement.set(op.target, op);
@@ -20010,9 +20039,11 @@ function collectI18nConsts(job) {
                         i18nValuesByContext.set(op.i18nContext, mainVar);
                         // This i18n message may correspond to an individual extracted attribute. If so, The
                         // value of that attribute is updated to read the extracted i18n variable.
-                        const attributeForMessage = extractedAttributesByI18nContext.get(op.i18nContext);
-                        if (attributeForMessage !== undefined) {
-                            attributeForMessage.expression = mainVar;
+                        const attributesForMessage = extractedAttributesByI18nContext.get(op.i18nContext);
+                        if (attributesForMessage !== undefined) {
+                            for (const attr of attributesForMessage) {
+                                attr.expression = mainVar.clone();
+                            }
                         }
                     }
                 }
@@ -20800,14 +20831,14 @@ function parseExtractedStyles(job) {
                 if (op.name === 'style') {
                     const parsedStyles = parse(op.expression.value);
                     for (let i = 0; i < parsedStyles.length - 1; i += 2) {
-                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.StyleProperty, parsedStyles[i], literal(parsedStyles[i + 1]), null), op);
+                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.StyleProperty, parsedStyles[i], literal(parsedStyles[i + 1]), null, null, SecurityContext.STYLE), op);
                     }
                     OpList.remove(op);
                 }
                 else if (op.name === 'class') {
                     const parsedClasses = op.expression.value.trim().split(/\s+/g);
                     for (const parsedClass of parsedClasses) {
-                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.ClassName, parsedClass, null, null), op);
+                        OpList.insertBefore(createExtractedAttributeOp(op.target, BindingKind.ClassName, parsedClass, null, null, null, SecurityContext.NONE), op);
                     }
                     OpList.remove(op);
                 }
@@ -20973,22 +21004,37 @@ function propagateI18nBlocksToTemplates(unit, subTemplateIndex) {
                 i18nBlock = null;
                 break;
             case OpKind.Template:
-                const templateView = unit.job.views.get(op.xref);
-                // We found an <ng-template> inside an i18n block; increment the sub-template counter and
-                // wrap the template's view in a child i18n block.
-                if (op.i18nPlaceholder !== undefined) {
-                    if (i18nBlock === null) {
-                        throw Error('Expected template with i18n placeholder to be in an i18n block.');
-                    }
-                    subTemplateIndex++;
-                    wrapTemplateWithI18n(templateView, i18nBlock);
+                subTemplateIndex = propagateI18nBlocksForView(unit.job.views.get(op.xref), i18nBlock, op.i18nPlaceholder, subTemplateIndex);
+                break;
+            case OpKind.RepeaterCreate:
+                // Propagate i18n blocks to the @for template.
+                const forView = unit.job.views.get(op.xref);
+                subTemplateIndex = propagateI18nBlocksForView(unit.job.views.get(op.xref), 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);
                 }
-                // Continue traversing inside the template's view.
-                subTemplateIndex = propagateI18nBlocksToTemplates(templateView, subTemplateIndex);
+                break;
         }
     }
     return subTemplateIndex;
 }
+/**
+ * Propagate i18n blocks for a view.
+ */
+function propagateI18nBlocksForView(view, i18nBlock, i18nPlaceholder, subTemplateIndex) {
+    // We found an <ng-template> inside an i18n block; increment the sub-template counter and
+    // wrap the template's view in a child i18n block.
+    if (i18nPlaceholder !== undefined) {
+        if (i18nBlock === null) {
+            throw Error('Expected template with i18n placeholder to be in an i18n block.');
+        }
+        subTemplateIndex++;
+        wrapTemplateWithI18n(view, i18nBlock);
+    }
+    // Continue traversing inside the template's view.
+    return propagateI18nBlocksToTemplates(view, subTemplateIndex);
+}
 /**
  * Wraps a template view with i18n start and end ops.
  */
@@ -21154,17 +21200,13 @@ function disableBindings() {
 function enableBindings() {
     return call(Identifiers.enableBindings, [], null);
 }
-function listener(name, handlerFn, sourceSpan) {
-    return call(Identifiers.listener, [
-        literal(name),
-        handlerFn,
-    ], sourceSpan);
-}
-function syntheticHostListener(name, handlerFn, sourceSpan) {
-    return call(Identifiers.syntheticHostListener, [
-        literal(name),
-        handlerFn,
-    ], sourceSpan);
+function listener(name, handlerFn, eventTargetResolver, syntheticHost, sourceSpan) {
+    const args = [literal(name), handlerFn];
+    if (eventTargetResolver !== null) {
+        args.push(literal(false)); // `useCapture` flag, defaults to `false`
+        args.push(importExpr(eventTargetResolver));
+    }
+    return call(syntheticHost ? Identifiers.syntheticHostListener : Identifiers.listener, args, sourceSpan);
 }
 function pipe(slot, name) {
     return call(Identifiers.pipe, [
@@ -21425,8 +21467,12 @@ function classMapInterpolate(strings, expressions, sourceSpan) {
     const interpolationArgs = collateInterpolationArgs(strings, expressions);
     return callVariadicInstruction(CLASS_MAP_INTERPOLATE_CONFIG, [], interpolationArgs, [], sourceSpan);
 }
-function hostProperty(name, expression, sourceSpan) {
-    return call(Identifiers.hostProperty, [literal(name), expression], sourceSpan);
+function hostProperty(name, expression, sanitizer, sourceSpan) {
+    const args = [literal(name), expression];
+    if (sanitizer !== null) {
+        args.push(sanitizer);
+    }
+    return call(Identifiers.hostProperty, args, sourceSpan);
 }
 function syntheticHostProperty(name, expression, sourceSpan) {
     return call(Identifiers.syntheticHostProperty, [literal(name), expression], sourceSpan);
@@ -21644,14 +21690,12 @@ function callVariadicInstruction(config, baseArgs, interpolationArgs, extraArgs,
 }
 
 /**
- * Map of sanitizers to their identifier.
+ * Map of target resolvers for event listeners.
  */
-const sanitizerIdentifierMap = new Map([
-    [SanitizerFn.Html, Identifiers.sanitizeHtml],
-    [SanitizerFn.IframeAttribute, Identifiers.validateIframeAttribute],
-    [SanitizerFn.ResourceUrl, Identifiers.sanitizeResourceUrl],
-    [SanitizerFn.Script, Identifiers.sanitizeScript],
-    [SanitizerFn.Style, Identifiers.sanitizeStyle], [SanitizerFn.Url, Identifiers.sanitizeUrl]
+const GLOBAL_TARGET_RESOLVERS$1 = new Map([
+    ['window', Identifiers.resolveWindow],
+    ['document', Identifiers.resolveDocument],
+    ['body', Identifiers.resolveBody],
 ]);
 /**
  * Compiles semantic operations across all views and generates output `o.Statement`s with actual
@@ -21728,10 +21772,11 @@ function reifyCreateOperations(unit, ops) {
                 break;
             case OpKind.Listener:
                 const listenerFn = reifyListenerHandler(unit, op.handlerFnName, op.handlerOps, op.consumesDollarEvent);
-                const reified = op.hostListener && op.isAnimationListener ?
-                    syntheticHostListener(op.name, listenerFn, op.sourceSpan) :
-                    listener(op.name, listenerFn, op.sourceSpan);
-                OpList.replace(op, reified);
+                const eventTargetResolver = op.eventTarget ? GLOBAL_TARGET_RESOLVERS$1.get(op.eventTarget) : null;
+                if (eventTargetResolver === undefined) {
+                    throw new Error(`AssertionError: unknown event target ${op.eventTarget}`);
+                }
+                OpList.replace(op, listener(op.name, listenerFn, eventTargetResolver, op.hostListener && op.isAnimationListener, op.sourceSpan));
                 break;
             case OpKind.Variable:
                 if (op.variable.name === null) {
@@ -21894,7 +21939,7 @@ function reifyUpdateOperations(_unit, ops) {
                         OpList.replace(op, syntheticHostProperty(op.name, op.expression, op.sourceSpan));
                     }
                     else {
-                        OpList.replace(op, hostProperty(op.name, op.expression, op.sourceSpan));
+                        OpList.replace(op, hostProperty(op.name, op.expression, op.sanitizer, op.sourceSpan));
                     }
                 }
                 break;
@@ -21973,8 +22018,6 @@ function reifyIrExpression(expr) {
             return pipeBind(expr.targetSlot.slot, expr.varOffset, expr.args);
         case ExpressionKind.PipeBindingVariadic:
             return pipeBindV(expr.targetSlot.slot, expr.varOffset, expr.args);
-        case ExpressionKind.SanitizerExpr:
-            return importExpr(sanitizerIdentifierMap.get(expr.fn));
         case ExpressionKind.SlotLiteralExpr:
             return literal(expr.slot.slot);
         default:
@@ -22267,10 +22310,11 @@ function resolvePlaceholdersForView(job, unit, i18nContexts, elements, pendingSt
                 }
                 break;
             case OpKind.Template:
+                const view = job.views.get(op.xref);
                 if (op.i18nPlaceholder === undefined) {
                     // If there is no i18n placeholder, just recurse into the view in case it contains i18n
                     // blocks.
-                    resolvePlaceholdersForView(job, job.views.get(op.xref), i18nContexts, elements);
+                    resolvePlaceholdersForView(job, view, i18nContexts, elements);
                 }
                 else {
                     if (currentOps === null) {
@@ -22281,14 +22325,59 @@ function resolvePlaceholdersForView(job, unit, i18nContexts, elements, pendingSt
                         // the current template as a pending structural directive to be recorded when we find
                         // the element, content, or template it belongs to. This allows us to create combined
                         // values that represent, e.g. the start of a template and element at the same time.
-                        resolvePlaceholdersForView(job, job.views.get(op.xref), i18nContexts, elements, op);
+                        resolvePlaceholdersForView(job, view, i18nContexts, elements, op);
                     }
                     else {
                         // If this is some other kind of template, we can record its start, recurse into its
                         // view, and then record its end.
-                        recordTemplateStart(job, op, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
-                        resolvePlaceholdersForView(job, job.views.get(op.xref), i18nContexts, elements);
-                        recordTemplateClose(job, op, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                        recordTemplateStart(job, view, op.handle.slot, op.i18nPlaceholder, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                        resolvePlaceholdersForView(job, view, i18nContexts, elements);
+                        recordTemplateClose(job, view, op.handle.slot, op.i18nPlaceholder, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                        pendingStructuralDirective = undefined;
+                    }
+                }
+                break;
+            case OpKind.RepeaterCreate:
+                if (pendingStructuralDirective !== undefined) {
+                    throw Error('AssertionError: Unexpected structural directive associated with @for block');
+                }
+                // RepeaterCreate has 3 slots: the first is for the op itself, the second is for the @for
+                // template and the (optional) third is for the @empty template.
+                const forSlot = op.handle.slot + 1;
+                const forView = job.views.get(op.xref);
+                // First record all of the placeholders for the @for template.
+                if (op.i18nPlaceholder === undefined) {
+                    // If there is no i18n placeholder, just recurse into the view in case it contains i18n
+                    // blocks.
+                    resolvePlaceholdersForView(job, forView, i18nContexts, elements);
+                }
+                else {
+                    if (currentOps === null) {
+                        throw Error('i18n tag placeholder should only occur inside an i18n block');
+                    }
+                    recordTemplateStart(job, forView, forSlot, op.i18nPlaceholder, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                    resolvePlaceholdersForView(job, forView, i18nContexts, elements);
+                    recordTemplateClose(job, forView, forSlot, op.i18nPlaceholder, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                    pendingStructuralDirective = undefined;
+                }
+                // Then if there's an @empty template, add its placeholders as well.
+                if (op.emptyView !== null) {
+                    // RepeaterCreate has 3 slots: the first is for the op itself, the second is for the @for
+                    // template and the (optional) third is for the @empty template.
+                    const emptySlot = op.handle.slot + 2;
+                    const emptyView = job.views.get(op.emptyView);
+                    if (op.emptyI18nPlaceholder === undefined) {
+                        // If there is no i18n placeholder, just recurse into the view in case it contains i18n
+                        // blocks.
+                        resolvePlaceholdersForView(job, emptyView, i18nContexts, elements);
+                    }
+                    else {
+                        if (currentOps === null) {
+                            throw Error('i18n tag placeholder should only occur inside an i18n block');
+                        }
+                        recordTemplateStart(job, emptyView, emptySlot, op.emptyI18nPlaceholder, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
+                        resolvePlaceholdersForView(job, emptyView, i18nContexts, elements);
+                        recordTemplateClose(job, emptyView, emptySlot, op.emptyI18nPlaceholder, currentOps.i18nContext, currentOps.i18nBlock, pendingStructuralDirective);
                         pendingStructuralDirective = undefined;
                     }
                 }
@@ -22336,8 +22425,8 @@ function recordElementClose(op, i18nContext, i18nBlock, structuralDirective) {
 /**
  * Records an i18n param value for the start of a template.
  */
-function recordTemplateStart(job, op, i18nContext, i18nBlock, structuralDirective) {
-    let { startName, closeName } = op.i18nPlaceholder;
+function recordTemplateStart(job, view, slot, i18nPlaceholder, i18nContext, i18nBlock, structuralDirective) {
+    let { startName, closeName } = i18nPlaceholder;
     let flags = I18nParamValueFlags.TemplateTag | I18nParamValueFlags.OpenTag;
     // For self-closing tags, there is no close tag placeholder. Instead, the start tag
     // placeholder accounts for the start and close of the element.
@@ -22352,20 +22441,20 @@ function recordTemplateStart(job, op, i18nContext, i18nBlock, structuralDirectiv
     }
     // Record the start of the template. For the sub-template index, pass the index for the template's
     // view, rather than the current i18n block's index.
-    addParam(i18nContext.params, startName, op.handle.slot, getSubTemplateIndexForTemplateTag(job, i18nBlock, op), flags);
+    addParam(i18nContext.params, startName, slot, getSubTemplateIndexForTemplateTag(job, i18nBlock, view), flags);
 }
 /**
  * Records an i18n param value for the closing of a template.
  */
-function recordTemplateClose(job, op, i18nContext, i18nBlock, structuralDirective) {
-    const { startName, closeName } = op.i18nPlaceholder;
+function recordTemplateClose(job, view, slot, i18nPlaceholder, i18nContext, i18nBlock, structuralDirective) {
+    const { startName, 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.
     if (closeName) {
         // Record the closing of the template. For the sub-template index, pass the index for the
         // template's view, rather than the current i18n block's index.
-        addParam(i18nContext.params, closeName, op.handle.slot, getSubTemplateIndexForTemplateTag(job, i18nBlock, op), flags);
+        addParam(i18nContext.params, closeName, slot, getSubTemplateIndexForTemplateTag(job, i18nBlock, view), flags);
         // If the template is associated with a structural directive, record the structural directive's
         // closing after. Since this template must be in the structural directive's view, we can just
         // directly use the current i18n block's sub-template index.
@@ -22378,8 +22467,8 @@ function recordTemplateClose(job, op, i18nContext, i18nBlock, structuralDirectiv
  * Get the subTemplateIndex for the given template op. For template ops, use the subTemplateIndex of
  * the child i18n block inside the template.
  */
-function getSubTemplateIndexForTemplateTag(job, i18nOp, op) {
-    for (const childOp of job.views.get(op.xref).create) {
+function getSubTemplateIndexForTemplateTag(job, i18nOp, view) {
+    for (const childOp of view.create) {
         if (childOp.kind === OpKind.I18nStart) {
             return childOp.subTemplateIndex;
         }
@@ -22596,12 +22685,20 @@ function processLexicalScope(unit, ops, savedView) {
 }
 
 /**
- * Mapping of security contexts to sanitizer function for that context.
+ * Map of security contexts to their sanitizer function.
  */
-const sanitizers = new Map([
-    [SecurityContext.HTML, SanitizerFn.Html], [SecurityContext.SCRIPT, SanitizerFn.Script],
-    [SecurityContext.STYLE, SanitizerFn.Style], [SecurityContext.URL, SanitizerFn.Url],
-    [SecurityContext.RESOURCE_URL, SanitizerFn.ResourceUrl]
+const sanitizerFns = new Map([
+    [SecurityContext.HTML, Identifiers.sanitizeHtml],
+    [SecurityContext.RESOURCE_URL, Identifiers.sanitizeResourceUrl],
+    [SecurityContext.SCRIPT, Identifiers.sanitizeScript],
+    [SecurityContext.STYLE, Identifiers.sanitizeStyle], [SecurityContext.URL, Identifiers.sanitizeUrl]
+]);
+/**
+ * Map of security contexts to their trusted value function.
+ */
+const trustedValueFns = new Map([
+    [SecurityContext.HTML, Identifiers.trustConstantHtml],
+    [SecurityContext.RESOURCE_URL, Identifiers.trustConstantResourceUrl],
 ]);
 /**
  * Resolves sanitization functions for ops that need them.
@@ -22609,24 +22706,61 @@ const sanitizers = new Map([
 function resolveSanitizers(job) {
     for (const unit of job.units) {
         const elements = createOpXrefMap(unit);
-        let sanitizerFn;
+        // For normal element bindings we create trusted values for security sensitive constant
+        // attributes. However, for host bindings we skip this step (this matches what
+        // TemplateDefinitionBuilder does).
+        // TODO: Is the TDB behavior correct here?
+        if (job.kind !== CompilationJobKind.Host) {
+            for (const op of unit.create) {
+                if (op.kind === OpKind.ExtractedAttribute) {
+                    const trustedValueFn = trustedValueFns.get(getOnlySecurityContext(op.securityContext)) ?? null;
+                    op.trustedValueFn = trustedValueFn !== null ? importExpr(trustedValueFn) : null;
+                }
+            }
+        }
         for (const op of unit.update) {
             switch (op.kind) {
                 case OpKind.Property:
                 case OpKind.Attribute:
-                    sanitizerFn = sanitizers.get(op.securityContext) || null;
-                    op.sanitizer = sanitizerFn ? new SanitizerExpr(sanitizerFn) : null;
+                case OpKind.HostProperty:
+                    let sanitizerFn = null;
+                    if (Array.isArray(op.securityContext) && op.securityContext.length === 2 &&
+                        op.securityContext.indexOf(SecurityContext.URL) > -1 &&
+                        op.securityContext.indexOf(SecurityContext.RESOURCE_URL) > -1) {
+                        // When the host element isn't known, some URL attributes (such as "src" and "href") may
+                        // be part of multiple different security contexts. In this case we use special
+                        // sanitization function and select the actual sanitizer at runtime based on a tag name
+                        // that is provided while invoking sanitization function.
+                        sanitizerFn = Identifiers.sanitizeUrlOrResourceUrl;
+                    }
+                    else {
+                        sanitizerFn = sanitizerFns.get(getOnlySecurityContext(op.securityContext)) ?? null;
+                    }
+                    op.sanitizer = sanitizerFn !== null ? importExpr(sanitizerFn) : null;
                     // If there was no sanitization function found based on the security context of an
                     // attribute/property, check whether this attribute/property is one of the
                     // security-sensitive <iframe> attributes (and that the current element is actually an
                     // <iframe>).
                     if (op.sanitizer === null) {
-                        const ownerOp = elements.get(op.target);
-                        if (ownerOp === undefined || !isElementOrContainerOp(ownerOp)) {
-                            throw Error('Property should have an element-like owner');
+                        let isIframe = false;
+                        if (job.kind === CompilationJobKind.Host || op.kind === OpKind.HostProperty) {
+                            // Note: for host bindings defined on a directive, we do not try to find all
+                            // possible places where it can be matched, so we can not determine whether
+                            // the host element is an <iframe>. In this case, we just assume it is and append a
+                            // validation function, which is invoked at runtime and would have access to the
+                            // underlying DOM element to check if it's an <iframe> and if so - run extra checks.
+                            isIframe = true;
+                        }
+                        else {
+                            // For a normal binding we can just check if the element its on is an iframe.
+                            const ownerOp = elements.get(op.target);
+                            if (ownerOp === undefined || !isElementOrContainerOp(ownerOp)) {
+                                throw Error('Property should have an element-like owner');
+                            }
+                            isIframe = isIframeElement$1(ownerOp);
                         }
-                        if (isIframeElement$1(ownerOp) && isIframeSecuritySensitiveAttr(op.name)) {
-                            op.sanitizer = new SanitizerExpr(SanitizerFn.IframeAttribute);
+                        if (isIframe && isIframeSecuritySensitiveAttr(op.name)) {
+                            op.sanitizer = importExpr(Identifiers.validateIframeAttribute);
                         }
                     }
                     break;
@@ -22640,6 +22774,22 @@ function resolveSanitizers(job) {
 function isIframeElement$1(op) {
     return op.kind === OpKind.ElementStart && op.tag?.toLowerCase() === 'iframe';
 }
+/**
+ * Asserts that there is only a single security context and returns it.
+ */
+function getOnlySecurityContext(securityContext) {
+    if (Array.isArray(securityContext)) {
+        if (securityContext.length > 1) {
+            // TODO: What should we do here? TDB just took the first one, but this feels like something we
+            // would want to know about and create a special case for like we did for Url/ResourceUrl. My
+            // guess is that, outside of the Url/ResourceUrl case, this never actually happens. If there
+            // do turn out to be other cases, throwing an error until we can address it feels safer.
+            throw Error(`AssertionError: Ambiguous security context`);
+        }
+        return securityContext[0] || SecurityContext.NONE;
+    }
+    return securityContext;
+}
 
 /**
  * When inside of a listener, we may need access to one or more enclosing views. Therefore, each
@@ -22743,6 +22893,8 @@ function allocateSlots(job) {
                 // operation itself, so it can be emitted later.
                 const childView = job.views.get(op.xref);
                 op.decls = childView.decls;
+                // TODO: currently we handle the decls for the RepeaterCreate empty template in the reify
+                // phase. We should handle that here instead.
             }
         }
     }
@@ -23066,6 +23218,8 @@ function countVariables(job) {
                 }
                 const childView = job.views.get(op.xref);
                 op.vars = childView.vars;
+                // TODO: currently we handle the vars for the RepeaterCreate empty template in the reify
+                // phase. We should handle that here instead.
             }
         }
     }
@@ -23587,10 +23741,10 @@ const phases = [
     { kind: CompilationJobKind.Tmpl, fn: emitNamespaceChanges },
     { kind: CompilationJobKind.Tmpl, fn: propagateI18nBlocks },
     { kind: CompilationJobKind.Tmpl, fn: wrapI18nIcus },
-    { kind: CompilationJobKind.Tmpl, fn: createI18nContexts },
     { kind: CompilationJobKind.Both, fn: specializeStyleBindings },
     { kind: CompilationJobKind.Both, fn: specializeBindings },
     { kind: CompilationJobKind.Both, fn: extractAttributes },
+    { kind: CompilationJobKind.Tmpl, fn: createI18nContexts },
     { kind: CompilationJobKind.Both, fn: parseExtractedStyles },
     { kind: CompilationJobKind.Tmpl, fn: removeEmptyBindings },
     { kind: CompilationJobKind.Both, fn: collapseSingletonInterpolations },
@@ -23608,7 +23762,7 @@ const phases = [
     { kind: CompilationJobKind.Tmpl, fn: generateProjectionDefs },
     { kind: CompilationJobKind.Tmpl, fn: generateVariables },
     { kind: CompilationJobKind.Tmpl, fn: saveAndRestoreView },
-    { kind: CompilationJobKind.Tmpl, fn: deleteAnyCasts },
+    { kind: CompilationJobKind.Both, fn: deleteAnyCasts },
     { kind: CompilationJobKind.Both, fn: resolveDollarEvent },
     { kind: CompilationJobKind.Tmpl, fn: generateRepeaterDerivedVars },
     { kind: CompilationJobKind.Tmpl, fn: generateTrackVariables },
@@ -23616,7 +23770,7 @@ const phases = [
     { kind: CompilationJobKind.Tmpl, fn: resolveDeferTargetNames },
     { kind: CompilationJobKind.Tmpl, fn: optimizeTrackFns },
     { kind: CompilationJobKind.Both, fn: resolveContexts },
-    { kind: CompilationJobKind.Tmpl, fn: resolveSanitizers },
+    { kind: CompilationJobKind.Both, fn: resolveSanitizers },
     { kind: CompilationJobKind.Tmpl, fn: liftLocalRefs },
     { kind: CompilationJobKind.Both, fn: generateNullishCoalesceExpressions },
     { kind: CompilationJobKind.Both, fn: expandSafeReads },
@@ -23752,6 +23906,10 @@ function emitHostBindingFunction(job) {
 }
 
 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.
@@ -23769,10 +23927,24 @@ function ingestComponent(componentName, template, constantPool, relativeContextF
 function ingestHostBinding(input, bindingParser, constantPool) {
     const job = new HostBindingCompilationJob(input.componentName, constantPool, compatibilityMode);
     for (const property of input.properties ?? []) {
-        ingestHostProperty(job, property, false);
+        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;
+        }
+        if (property.isAnimation) {
+            bindingKind = BindingKind.Animation;
+        }
+        const securityContexts = bindingParser
+            .calcPossibleSecurityContexts(input.componentSelector, property.name, bindingKind === BindingKind.Attribute)
+            .filter(context => context !== SecurityContext.NONE);
+        ingestHostProperty(job, property, bindingKind, false, securityContexts);
     }
     for (const [name, expr] of Object.entries(input.attributes) ?? []) {
-        ingestHostAttribute(job, name, expr);
+        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);
@@ -23781,7 +23953,7 @@ function ingestHostBinding(input, bindingParser, constantPool) {
 }
 // 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, isTextAttribute) {
+function ingestHostProperty(job, property, bindingKind, isTextAttribute, securityContexts) {
     let expression;
     const ast = property.expression.ast;
     if (ast instanceof Interpolation$1) {
@@ -23790,26 +23962,18 @@ function ingestHostProperty(job, property, isTextAttribute) {
     else {
         expression = convertAst(ast, job, property.sourceSpan);
     }
-    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;
-    }
-    if (property.isAnimation) {
-        bindingKind = BindingKind.Animation;
-    }
-    job.root.update.push(createBindingOp(job.root.xref, bindingKind, property.name, expression, null, SecurityContext
-        .NONE /* TODO: what should we pass as security context? Passing NONE for now. */, isTextAttribute, false, /* TODO: How do Host bindings handle i18n attrs? */ null, property.sourceSpan));
+    job.root.update.push(createBindingOp(job.root.xref, bindingKind, property.name, expression, null, securityContexts, isTextAttribute, false, null, /* TODO: How do Host bindings handle i18n attrs? */ null, property.sourceSpan));
 }
-function ingestHostAttribute(job, name, value) {
-    const attrBinding = createBindingOp(job.root.xref, BindingKind.Attribute, name, value, null, SecurityContext.NONE, true, false, 
+function ingestHostAttribute(job, name, value, securityContexts) {
+    const attrBinding = createBindingOp(job.root.xref, BindingKind.Attribute, name, value, null, securityContexts, true, false, null, 
     /* TODO */ null, 
     /* TODO: host attribute source spans */ null);
     job.root.update.push(attrBinding);
 }
 function ingestHostEvent(job, event) {
-    const eventBinding = createListenerOp(job.root.xref, new SlotHandle(), event.name, null, event.targetOrPhase, true, event.sourceSpan);
+    const [phase, target] = event.type === 0 /* e.ParsedEventType.Regular */ ? [null, event.targetOrPhase] :
+        [event.targetOrPhase, null];
+    const eventBinding = createListenerOp(job.root.xref, new SlotHandle(), event.name, null, [], phase, target, true, event.sourceSpan);
     // TODO: Can this be a chain?
     eventBinding.handlerOps.push(createStatementOp(new ReturnStatement(convertAst(event.handler.ast, job, event.sourceSpan), event.handlerSpan)));
     job.root.create.push(eventBinding);
@@ -23866,8 +24030,14 @@ function ingestElement(unit, element) {
     const [namespaceKey, elementName] = splitNsName(element.name);
     const startOp = createElementStartOp(elementName, id, namespaceForKey(namespaceKey), element.i18n instanceof TagPlaceholder ? element.i18n : undefined, element.startSourceSpan);
     unit.create.push(startOp);
-    ingestBindings(unit, startOp, element);
+    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));
+    }
     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
@@ -23877,9 +24047,7 @@ function ingestElement(unit, 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 (element.i18n instanceof Message) {
-        const i18nBlockId = unit.job.allocateXrefId();
-        OpList.insertAfter(createI18nStartOp(i18nBlockId, element.i18n), startOp);
+    if (i18nBlockId !== null) {
         OpList.insertBefore(createI18nEndOp(i18nBlockId), endOp);
     }
 }
@@ -23905,7 +24073,7 @@ function ingestTemplate(unit, tmpl) {
     const templateKind = isPlainTemplate(tmpl) ? TemplateKind.NgTemplate : TemplateKind.Structural;
     const templateOp = createTemplateOp(childView.xref, templateKind, tagNameWithoutNamespace, functionNameSuffix, namespace, i18nPlaceholder, tmpl.startSourceSpan);
     unit.create.push(templateOp);
-    ingestBindings(unit, templateOp, tmpl);
+    ingestTemplateBindings(unit, templateOp, tmpl, templateKind);
     ingestReferences(templateOp, tmpl);
     ingestNodes(childView, tmpl.children);
     for (const { name, value } of tmpl.variables) {
@@ -23921,7 +24089,7 @@ function ingestTemplate(unit, tmpl) {
     }
 }
 /**
- * Ingest a literal text node from the AST into the given `ViewCompilation`.
+ * Ingest a content node from the AST into the given `ViewCompilation`.
  */
 function ingestContent(unit, content) {
     if (content.i18n !== undefined && !(content.i18n instanceof TagPlaceholder)) {
@@ -23930,7 +24098,8 @@ function ingestContent(unit, content) {
     const attrs = content.attributes.flatMap(a => [a.name, a.value]);
     const op = createProjectionOp(unit.job.allocateXrefId(), content.selector, content.i18n, attrs, content.sourceSpan);
     for (const attr of content.attributes) {
-        ingestBinding(unit, op.xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, BindingFlags.TextValue, attr.i18n);
+        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));
     }
     unit.create.push(op);
 }
@@ -24045,13 +24214,16 @@ function ingestSwitchBlock(unit, switchBlock) {
     const conditional = createConditionalOp(firstXref, firstSlotHandle, convertAst(switchBlock.expression, unit.job, null), conditions, switchBlock.sourceSpan);
     unit.update.push(conditional);
 }
-function ingestDeferView(unit, suffix, children, sourceSpan) {
+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;
     }
     const secondaryView = unit.job.allocateView(unit.xref);
     ingestNodes(secondaryView, children);
-    const templateOp = createTemplateOp(secondaryView.xref, TemplateKind.Block, null, `Defer${suffix}`, Namespace.HTML, undefined, sourceSpan);
+    const templateOp = createTemplateOp(secondaryView.xref, TemplateKind.Block, null, `Defer${suffix}`, Namespace.HTML, i18nMeta, sourceSpan);
     unit.create.push(templateOp);
     return templateOp;
 }
@@ -24061,10 +24233,10 @@ function ingestDeferBlock(unit, deferBlock) {
         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.children, deferBlock.sourceSpan);
-    const loading = ingestDeferView(unit, 'Loading', deferBlock.loading?.children, deferBlock.loading?.sourceSpan);
-    const placeholder = ingestDeferView(unit, 'Placeholder', deferBlock.placeholder?.children, deferBlock.placeholder?.sourceSpan);
-    const error = ingestDeferView(unit, 'Error', deferBlock.error?.children, deferBlock.error?.sourceSpan);
+    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, deferBlock.sourceSpan);
@@ -24198,8 +24370,17 @@ function ingestForBlock(unit, forBlock) {
         $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, forBlock.sourceSpan);
+    const repeaterCreate = createRepeaterCreateOp(repeaterView.xref, emptyView?.xref ?? null, tagName, track, varNames, i18nPlaceholder, emptyI18nPlaceholder, 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);
@@ -24317,6 +24498,27 @@ function convertAst(ast, job, baseSourceSpan) {
         throw new Error(`Unhandled expression type "${ast.constructor.name}" in file "${baseSourceSpan?.start.file.url}"`);
     }
 }
+function convertAstWithInterpolation(job, value, i18nMeta) {
+    let expression;
+    if (value instanceof Interpolation$1) {
+        expression = new Interpolation(value.strings, value.expressions.map(e => convertAst(e, job, null)), Object.keys(asMessage(i18nMeta)?.placeholders ?? {}));
+    }
+    else if (value instanceof AST) {
+        expression = convertAst(value, job, 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],
+    [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
@@ -24335,149 +24537,184 @@ function convertAst(ast, job, baseSourceSpan) {
  * | `<ng-template *ngIf>` (structural) | null               |
  */
 function isPlainTemplate(tmpl) {
-    return splitNsName(tmpl.tagName ?? '')[1] === 'ng-template';
+    return splitNsName(tmpl.tagName ?? '')[1] === NG_TEMPLATE_TAG_NAME$1;
 }
 /**
- * Process all of the bindings on an element-like structure in the template AST and convert them
- * to their IR representation.
+ * Ensures that the i18nMeta, if provided, is an i18n.Message.
  */
-function ingestBindings(unit, op, element) {
-    let flags = BindingFlags.None;
-    let hasI18nAttributes = false;
-    if (element instanceof Template) {
-        flags |= BindingFlags.OnNgTemplateElement;
-        if (element instanceof Template && isPlainTemplate(element)) {
-            flags |= BindingFlags.BindingTargetsTemplate;
-        }
-        const templateAttrFlags = flags | BindingFlags.BindingTargetsTemplate | BindingFlags.IsStructuralTemplateAttribute;
-        for (const attr of element.templateAttrs) {
-            if (attr instanceof TextAttribute) {
-                ingestBinding(unit, op.xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, templateAttrFlags | BindingFlags.TextValue, attr.i18n);
-                hasI18nAttributes ||= attr.i18n !== undefined;
-            }
-            else {
-                ingestBinding(unit, op.xref, attr.name, attr.value, attr.type, attr.unit, attr.securityContext, attr.sourceSpan, templateAttrFlags, attr.i18n);
-                hasI18nAttributes ||= attr.i18n !== undefined;
-            }
-        }
+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();
     for (const attr of element.attributes) {
-        // This is only attribute TextLiteral bindings, such as `attr.foo="bar"`. This can never be
-        // `[attr.foo]="bar"` or `attr.foo="{{bar}}"`, both of which will be handled as inputs with
-        // `BindingType.Attribute`.
-        ingestBinding(unit, op.xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, flags | BindingFlags.TextValue, attr.i18n);
-        hasI18nAttributes ||= attr.i18n !== undefined;
+        // 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));
     }
     for (const input of element.inputs) {
-        ingestBinding(unit, op.xref, input.name, input.value, input.type, input.unit, input.securityContext, input.sourceSpan, flags, input.i18n);
-        hasI18nAttributes ||= input.i18n !== undefined;
+        // 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));
     }
+    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) {
-        let listenerOp;
-        if (output.type === 1 /* e.ParsedEventType.Animation */) {
-            if (output.phase === null) {
-                throw Error('Animation listener should have a phase');
-            }
+        if (output.type === 1 /* e.ParsedEventType.Animation */ && output.phase === null) {
+            throw Error('Animation listener should have a phase');
         }
-        if (element instanceof Template && !isPlainTemplate(element)) {
-            unit.create.push(createExtractedAttributeOp(op.xref, BindingKind.Property, output.name, null, null));
-            continue;
-        }
-        listenerOp = createListenerOp(op.xref, op.handle, output.name, op.tag, output.phase, false, output.sourceSpan);
-        // if output.handler is a chain, then push each statement from the chain separately, and
-        // return the last one?
-        let handlerExprs;
-        let handler = output.handler;
-        if (handler instanceof ASTWithSource) {
-            handler = handler.ast;
-        }
-        if (handler instanceof Chain) {
-            handlerExprs = handler.expressions;
+        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 {
-            handlerExprs = [handler];
+            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 (handlerExprs.length === 0) {
-            throw new Error('Expected listener to have non-empty expression list.');
+        if (templateKind === TemplateKind.NgTemplate) {
+            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));
         }
-        const expressions = handlerExprs.map(expr => convertAst(expr, unit.job, output.handlerSpan));
-        const returnExpr = expressions.pop();
-        for (const expr of expressions) {
-            const stmtOp = createStatementOp(new ExpressionStatement(expr, expr.sourceSpan));
-            listenerOp.handlerOps.push(stmtOp);
+        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, output.name, null, null, null, securityContext));
         }
-        listenerOp.handlerOps.push(createStatementOp(new ReturnStatement(returnExpr, returnExpr.sourceSpan)));
-        unit.create.push(listenerOp);
     }
     // TODO: Perhaps we could do this in a phase? (It likely wouldn't change the slot indices.)
-    if (hasI18nAttributes) {
+    if (bindings.some(b => b?.i18nMessage) !== null) {
         unit.create.push(createI18nAttributesOp(unit.job.allocateXrefId(), new SlotHandle(), op.xref));
     }
 }
-const BINDING_KINDS = 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],
-]);
-var BindingFlags;
-(function (BindingFlags) {
-    BindingFlags[BindingFlags["None"] = 0] = "None";
-    /**
-     * The binding is to a static text literal and not to an expression.
-     */
-    BindingFlags[BindingFlags["TextValue"] = 1] = "TextValue";
-    /**
-     * The binding belongs to the `<ng-template>` side of a `t.Template`.
-     */
-    BindingFlags[BindingFlags["BindingTargetsTemplate"] = 2] = "BindingTargetsTemplate";
-    /**
-     * The binding is on a structural directive.
-     */
-    BindingFlags[BindingFlags["IsStructuralTemplateAttribute"] = 4] = "IsStructuralTemplateAttribute";
-    /**
-     * The binding is on a `t.Template`.
-     */
-    BindingFlags[BindingFlags["OnNgTemplateElement"] = 8] = "OnNgTemplateElement";
-})(BindingFlags || (BindingFlags = {}));
-function ingestBinding(view, xref, name, value, type, unit, securityContext, sourceSpan, flags, i18nMeta) {
-    if (value instanceof ASTWithSource) {
-        value = value.ast;
-    }
-    let i18nContext = null;
-    if (i18nMeta !== undefined) {
-        if (!(i18nMeta instanceof Message)) {
-            throw Error(`Unhandled i18n metadata type for binding: ${i18nMeta.constructor.name}`);
+/**
+ * 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 &&
+            (type === 0 /* e.BindingType.Property */ || type === 2 /* e.BindingType.Class */ ||
+                type === 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, 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;
         }
-        i18nContext = view.job.allocateXrefId();
-        view.create.push(createI18nContextOp(I18nContextKind.Attr, i18nContext, null, i18nMeta, null));
-    }
-    if (flags & BindingFlags.OnNgTemplateElement && !(flags & BindingFlags.BindingTargetsTemplate) &&
-        type === 0 /* e.BindingType.Property */) {
-        // This binding only exists for later const extraction, and is not an actual binding to be
-        // created.
-        view.create.push(createExtractedAttributeOp(xref, BindingKind.Property, name, null, i18nContext));
-        return;
     }
-    let expression;
-    // TODO: We could easily generate source maps for subexpressions in these cases, but
-    // TemplateDefinitionBuilder does not. Should we do so?
-    if (value instanceof Interpolation$1) {
-        let i18nPlaceholders = [];
-        if (i18nMeta !== undefined) {
-            i18nPlaceholders = Object.keys(i18nMeta.placeholders);
+    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;
         }
-        expression = new Interpolation(value.strings, value.expressions.map(expr => convertAst(expr, view.job, null)), i18nPlaceholders);
-    }
-    else if (value instanceof AST) {
-        expression = convertAst(value, view.job, null);
     }
-    else {
-        expression = value;
+    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 kind = BINDING_KINDS.get(type);
-    view.update.push(createBindingOp(xref, kind, name, expression, unit, securityContext, !!(flags & BindingFlags.TextValue), !!(flags & BindingFlags.IsStructuralTemplateAttribute), i18nContext, sourceSpan));
+    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 astOf(ast) {
+    return ast instanceof ASTWithSource ? ast.ast : ast;
 }
 /**
  * Process all of the local references on an element-like structure in the template AST and
@@ -24565,11 +24802,12 @@ function ingestControlFlowInsertionPoint(unit, xref, node) {
     // and they can be used in directive matching (in the case of `Template.templateAttrs`).
     if (root !== null) {
         for (const attr of root.attributes) {
-            ingestBinding(unit, xref, attr.name, literal(attr.value), 1 /* e.BindingType.Attribute */, null, SecurityContext.NONE, attr.sourceSpan, BindingFlags.TextValue, attr.i18n);
+            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' ? null : tagName;
+        return tagName === NG_TEMPLATE_TAG_NAME$1 ? null : tagName;
     }
     return null;
 }
@@ -29996,6 +30234,7 @@ function createHostBindingsFunction(hostBindingsMetadata, typeSourceSpan, bindin
         }
         const hostJob = ingestHostBinding({
             componentName: name,
+            componentSelector: selector,
             properties: bindings,
             events: eventBindings,
             attributes: hostBindingsMetadata.attributes,
@@ -31755,7 +31994,7 @@ function publishFacade(global) {
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-const VERSION = new Version('17.0.6');
+const VERSION = new Version('17.0.7');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = ViewEncapsulation.Emulated, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -33321,7 +33560,7 @@ const MINIMUM_PARTIAL_LINKER_VERSION$6 = '12.0.0';
 function compileDeclareClassMetadata(metadata) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$6));
-    definitionMap.set('version', literal('17.0.6'));
+    definitionMap.set('version', literal('17.0.7'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -33429,7 +33668,7 @@ function createDirectiveDefinitionMap(meta) {
     // in 16.1 is actually used.
     const minVersion = hasTransformFunctions ? MINIMUM_PARTIAL_LINKER_VERSION$5 : '14.0.0';
     definitionMap.set('minVersion', literal(minVersion));
-    definitionMap.set('version', literal('17.0.6'));
+    definitionMap.set('version', literal('17.0.7'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -33706,7 +33945,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.0.6'));
+    definitionMap.set('version', literal('17.0.7'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -33741,7 +33980,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.0.6'));
+    definitionMap.set('version', literal('17.0.7'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -33792,7 +34031,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.0.6'));
+    definitionMap.set('version', literal('17.0.7'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -33825,7 +34064,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.0.6'));
+    definitionMap.set('version', literal('17.0.7'));
     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.
@@ -33876,7 +34115,7 @@ function compileDeclarePipeFromMetadata(meta) {
 function createPipeDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION));
-    definitionMap.set('version', literal('17.0.6'));
+    definitionMap.set('version', literal('17.0.7'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);