angular · crisbeto · Feb 26, 2025 · Feb 26, 2025 · Feb 26, 2025 · Feb 26, 2025
diff --git a/goldens/public-api/core/errors.api.md b/goldens/public-api/core/errors.api.md
@@ -63,6 +63,8 @@ export const enum RuntimeErrorCode {
     // (undocumented)
     INJECTOR_ALREADY_DESTROYED = 205,
     // (undocumented)
+    INVALID_BINDING_TARGET = 316,
+    // (undocumented)
     INVALID_DIFFER_INPUT = 900,
     // (undocumented)
     INVALID_EVENT_BINDING = 306,
@@ -77,6 +79,8 @@ export const enum RuntimeErrorCode {
     // (undocumented)
     INVALID_MULTI_PROVIDER = -209,
     // (undocumented)
+    INVALID_SET_INPUT_CALL = 317,
+    // (undocumented)
     INVALID_SKIP_HYDRATION_HOST = -504,
     // (undocumented)
     LOOP_TRACK_DUPLICATE_KEYS = -955,
@@ -109,6 +113,8 @@ export const enum RuntimeErrorCode {
     // (undocumented)
     MULTIPLE_PLATFORMS = 400,
     // (undocumented)
+    NO_BINDING_TARGET = 315,
+    // (undocumented)
     NO_SUPPORTING_DIFFER_FACTORY = 901,
     // (undocumented)
     OUTPUT_REF_DESTROYED = 953,

diff --git a/goldens/public-api/core/index.api.md b/goldens/public-api/core/index.api.md
@@ -295,7 +295,7 @@ export interface ComponentDecorator {
 // @public @deprecated
 export abstract class ComponentFactory<C> {
     abstract get componentType(): Type<any>;
-    abstract create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string | any, environmentInjector?: EnvironmentInjector | NgModuleRef<any>): ComponentRef<C>;
+    abstract create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string | any, environmentInjector?: EnvironmentInjector | NgModuleRef<any>, directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[], bindings?: Binding[]): ComponentRef<C>;
     abstract get inputs(): {
         propName: string;
         templateName: string;
@@ -454,6 +454,8 @@ export function createComponent<C>(component: Type<C>, options: {
     hostElement?: Element;
     elementInjector?: Injector;
     projectableNodes?: Node[][];
+    directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[];
+    bindings?: Binding[];
 }): ComponentRef<C>;
 
 // @public
@@ -994,6 +996,9 @@ export const Input: InputDecorator;
 // @public
 export const input: InputFunction;
 
+// @public
+export function inputBinding(publicName: string, value: () => unknown): Binding;
+
 // @public (undocumented)
 export interface InputDecorator {
     (arg?: string | Input): any;
@@ -1358,6 +1363,9 @@ export const Output: OutputDecorator;
 // @public
 export function output<T = void>(opts?: OutputOptions): OutputEmitterRef<T>;
 
+// @public
+export function outputBinding<T>(eventName: string, listener: (event: T) => unknown): Binding;
+
 // @public
 export interface OutputDecorator {
     (alias?: string): any;
@@ -1980,9 +1988,11 @@ export abstract class ViewContainerRef {
         ngModuleRef?: NgModuleRef<unknown>;
         environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>;
         projectableNodes?: Node[][];
+        directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[];
+        bindings?: Binding[];
     }): ComponentRef<C>;
     // @deprecated
-    abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], environmentInjector?: EnvironmentInjector | NgModuleRef<any>): ComponentRef<C>;
+    abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], environmentInjector?: EnvironmentInjector | NgModuleRef<any>, directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[], bindings?: Binding[]): ComponentRef<C>;
     abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, options?: {
         index?: number;
         injector?: Injector;

diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
@@ -112,6 +112,7 @@ export {
   afterNextRender,
   ɵFirstAvailable,
 } from './render3/after_render/hooks';
+export {inputBinding, outputBinding} from './render3/dynamic_bindings';
 export {ApplicationConfig, mergeApplicationConfig} from './application/application_config';
 export {makeStateKey, StateKey, TransferState} from './transfer_state';
 export {booleanAttribute, numberAttribute} from './util/coercion';

diff --git a/packages/core/src/errors.ts b/packages/core/src/errors.ts
@@ -60,6 +60,9 @@ export const enum RuntimeErrorCode {
   HOST_DIRECTIVE_CONFLICTING_ALIAS = 312,
   MULTIPLE_MATCHING_PIPES = 313,
   UNINITIALIZED_LET_ACCESS = 314,
+  NO_BINDING_TARGET = 315,
+  INVALID_BINDING_TARGET = 316,
+  INVALID_SET_INPUT_CALL = 317,
 
   // Bootstrap Errors
   MULTIPLE_PLATFORMS = 400,

diff --git a/packages/core/src/linker/component_factory.ts b/packages/core/src/linker/component_factory.ts
@@ -9,7 +9,8 @@
 import type {ChangeDetectorRef} from '../change_detection/change_detection';
 import type {Injector} from '../di/injector';
 import type {EnvironmentInjector} from '../di/r3_injector';
-import {Type} from '../interface/type';
+import type {Type} from '../interface/type';
+import type {Binding, DirectiveWithBindings} from '../render3/dynamic_bindings';
 
 import type {ElementRef} from './element_ref';
 import type {NgModuleRef} from './ng_module_factory';
@@ -122,5 +123,7 @@ export abstract class ComponentFactory<C> {
     projectableNodes?: any[][],
     rootSelectorOrNode?: string | any,
     environmentInjector?: EnvironmentInjector | NgModuleRef<any>,
+    directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[],
+    bindings?: Binding[],
   ): ComponentRef<C>;
 }
diff --git a/packages/core/src/linker/view_container_ref.ts b/packages/core/src/linker/view_container_ref.ts
@@ -77,6 +77,7 @@ import {TemplateRef} from './template_ref';
 import {EmbeddedViewRef, ViewRef} from './view_ref';
 import {addLViewToLContainer, createLContainer, detachView} from '../render3/view/container';
 import {addToEndOfViewTree} from '../render3/view/construction';
+import {Binding, DirectiveWithBindings} from '../render3/dynamic_bindings';
 
 /**
  * Represents a container where one or more views can be attached to a component.
@@ -225,6 +226,8 @@ export abstract class ViewContainerRef {
    *                 replace the `ngModuleRef` parameter.
    *  * projectableNodes: list of DOM nodes that should be projected through
    *                      [`<ng-content>`](api/core/ng-content) of the new component instance.
+   *  * directives: Directives that should be applied to the component.
+   *  * bindings: Bindings that should be applied to the component.
    *
    * @returns The new `ComponentRef` which contains the component instance and the host view.
    */
@@ -236,6 +239,8 @@ export abstract class ViewContainerRef {
       ngModuleRef?: NgModuleRef<unknown>;
       environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>;
       projectableNodes?: Node[][];
+      directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[];
+      bindings?: Binding[];
     },
   ): ComponentRef<C>;
 
@@ -250,6 +255,8 @@ export abstract class ViewContainerRef {
    *     [`<ng-content>`](api/core/ng-content) of the new component instance.
    * @param ngModuleRef An instance of the NgModuleRef that represent an NgModule.
    * This information is used to retrieve corresponding NgModule injector.
+   * @param directives Directives that should be applied to the component.
+   * @param bindings Bindings that should be applied to the component.
    *
    * @returns The new `ComponentRef` which contains the component instance and the host view.
    *
@@ -263,6 +270,8 @@ export abstract class ViewContainerRef {
     injector?: Injector,
     projectableNodes?: any[][],
     environmentInjector?: EnvironmentInjector | NgModuleRef<any>,
+    directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[],
+    bindings?: Binding[],
   ): ComponentRef<C>;
 
   /**
@@ -426,6 +435,8 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
       injector?: Injector;
       projectableNodes?: Node[][];
       ngModuleRef?: NgModuleRef<unknown>;
+      directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[];
+      bindings?: Binding[];
     },
   ): ComponentRef<C>;
   /**
@@ -439,6 +450,8 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
     injector?: Injector | undefined,
     projectableNodes?: any[][] | undefined,
     environmentInjector?: EnvironmentInjector | NgModuleRef<any> | undefined,
+    directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[],
+    bindings?: Binding[],
   ): ComponentRef<C>;
   override createComponent<C>(
     componentFactoryOrType: ComponentFactory<C> | Type<C>,
@@ -451,10 +464,14 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
           ngModuleRef?: NgModuleRef<unknown>;
           environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>;
           projectableNodes?: Node[][];
+          directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[];
+          bindings?: Binding[];
         },
     injector?: Injector | undefined,
     projectableNodes?: any[][] | undefined,
     environmentInjector?: EnvironmentInjector | NgModuleRef<any> | undefined,
+    directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[],
+    bindings?: Binding[],
   ): ComponentRef<C> {
     const isComponentFactory = componentFactoryOrType && !isType(componentFactoryOrType);
     let index: number | undefined;
@@ -499,6 +516,8 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
         ngModuleRef?: NgModuleRef<unknown>;
         environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>;
         projectableNodes?: Node[][];
+        directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[];
+        bindings?: Binding[];
       };
       if (ngDevMode && options.environmentInjector && options.ngModuleRef) {
         throwError(
@@ -509,6 +528,8 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
       injector = options.injector;
       projectableNodes = options.projectableNodes;
       environmentInjector = options.environmentInjector || options.ngModuleRef;
+      directives = options.directives;
+      bindings = options.bindings;
     }
 
     const componentFactory: ComponentFactory<C> = isComponentFactory
@@ -553,6 +574,8 @@ const R3ViewContainerRef = class ViewContainerRef extends VE_ViewContainerRef {
       projectableNodes,
       rNode,
       environmentInjector,
+      directives,
+      bindings,
     );
     this.insertImpl(
       componentRef.hostView,

diff --git a/packages/core/src/render3/component.ts b/packages/core/src/render3/component.ts
@@ -13,6 +13,7 @@ import {ComponentRef} from '../linker/component_factory';
 
 import {ComponentFactory} from './component_ref';
 import {getComponentDef} from './def_getters';
+import {Binding, DirectiveWithBindings} from './dynamic_bindings';
 import {assertComponentDef} from './errors';
 
 /**
@@ -73,6 +74,8 @@ import {assertComponentDef} from './errors';
  * `[[element1, element2]]`: projects `element1` and `element2` into the same `<ng-content>`.
  * `[[element1, element2], [element3]]`: projects `element1` and `element2` into one `<ng-content>`,
  * and `element3` into a separate `<ng-content>`.
+ *  * `directives` (optional): Directives that should be applied to the component.
+ *  * `binding` (optional): Bindings to apply to the root component.
  * @returns ComponentRef instance that represents a given Component.
  *
  * @publicApi
@@ -84,6 +87,8 @@ export function createComponent<C>(
     hostElement?: Element;
     elementInjector?: Injector;
     projectableNodes?: Node[][];
+    directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[];
+    bindings?: Binding[];
   },
 ): ComponentRef<C> {
   ngDevMode && assertComponentDef(component);
@@ -95,6 +100,8 @@ export function createComponent<C>(
     options.projectableNodes,
     options.hostElement,
     options.environmentInjector,
+    options.directives,
+    options.bindings,
   );
 }