refactor(compiler): allow directives to be resolved on host element (#62965)

crisbeto · crisbeto · commit 17c110e61851 · 2025-08-05T10:04:26.000+02:00
Allows the target binder to resolve directives set on the host element. PR Close #62965
diff --git a/packages/compiler/src/render3/view/t2_api.ts b/packages/compiler/src/render3/view/t2_api.ts
@@ -48,15 +48,15 @@ export type ScopedNode =
 
 /** Possible values that a reference can be resolved to. */
 export type ReferenceTarget<DirectiveT> =
-  | {directive: DirectiveT; node: DirectiveOwner}
+  | {directive: DirectiveT; node: Exclude<DirectiveOwner, HostElement>}
   | Element
   | Template;
 
 /** Entity that is local to the template and defined within the template. */
 export type TemplateEntity = Reference | Variable | LetDeclaration;
 
 /** Nodes that can have directives applied to them. */
-export type DirectiveOwner = Element | Template | Component | Directive;
+export type DirectiveOwner = Element | Template | Component | Directive | HostElement;
 
 /*
  * t2 is the replacement for the `TemplateDefinitionBuilder`. It handles the operations of
@@ -70,9 +70,12 @@ export type DirectiveOwner = Element | Template | Component | Directive;
 /**
  * A logical target for analysis, which could contain a template or other types of bindings.
  */
-export interface Target {
+export interface Target<DirectiveT> {
   template?: Node[];
-  host?: HostElement;
+  host?: {
+    node: HostElement;
+    directives: DirectiveT[];
+  };
 }
 
 /**
@@ -162,7 +165,7 @@ export interface DirectiveMeta {
  * The returned `BoundTarget` has an API for extracting information about the processed target.
  */
 export interface TargetBinder<D extends DirectiveMeta> {
-  bind(target: Target): BoundTarget<D>;
+  bind(target: Target<D>): BoundTarget<D>;
 }
 
 /**
@@ -177,7 +180,7 @@ export interface BoundTarget<DirectiveT extends DirectiveMeta> {
   /**
    * Get the original `Target` that was bound.
    */
-  readonly target: Target;
+  readonly target: Target<DirectiveT>;
 
   /**
    * For a given template node (either an `Element` or a `Template`), get the set of directives
diff --git a/packages/compiler/src/render3/view/t2_binder.ts b/packages/compiler/src/render3/view/t2_binder.ts
@@ -84,7 +84,7 @@ type BindingsMap<DirectiveT> = Map<
 /** Shorthand for a map between a reference AST node and the entity it's targeting. */
 type ReferenceMap<DirectiveT> = Map<
   Reference,
-  Template | Element | {directive: DirectiveT; node: DirectiveOwner}
+  Template | Element | {directive: DirectiveT; node: Exclude<DirectiveOwner, HostElement>}
 >;
 
 /** Mapping between AST nodes and the directives that have been matched on them. */
@@ -171,7 +171,7 @@ export class R3TargetBinder<DirectiveT extends DirectiveMeta> implements TargetB
    * Perform a binding operation on the given `Target` and return a `BoundTarget` which contains
    * metadata about the types referenced in the template.
    */
-  bind(target: Target): BoundTarget<DirectiveT> {
+  bind(target: Target<DirectiveT>): BoundTarget<DirectiveT> {
     if (!target.template && !target.host) {
       throw new Error('Empty bound targets are not supported');
     }
@@ -229,9 +229,10 @@ export class R3TargetBinder<DirectiveT extends DirectiveMeta> implements TargetB
     // Bind the host element in a separate scope. Note that it only uses the
     // `TemplateBinder` since directives don't apply inside a host context.
     if (target.host) {
+      directives.set(target.host.node, target.host.directives);
       TemplateBinder.applyWithScope(
-        target.host,
-        Scope.apply(target.host),
+        target.host.node,
+        Scope.apply(target.host.node),
         expressions,
         symbols,
         nestingLevel,
@@ -1029,7 +1030,7 @@ class R3BoundTarget<DirectiveT extends DirectiveMeta> implements BoundTarget<Dir
   private deferredScopes: Map<DeferredBlock, Scope>;
 
   constructor(
-    readonly target: Target,
+    readonly target: Target<DirectiveT>,
     private directives: MatchedDirectives<DirectiveT>,
     private eagerDirectives: DirectiveT[],
     private missingDirectives: Set<string>,
@@ -1217,7 +1218,8 @@ class R3BoundTarget<DirectiveT extends DirectiveMeta> implements BoundTarget<Dir
     if (
       target instanceof Template ||
       target.node instanceof Component ||
-      target.node instanceof Directive
+      target.node instanceof Directive ||
+      target.node instanceof HostElement
     ) {
       return null;
     }
