feat(common): add component input binding support for NgComponentOutl…

…et (#49735)

This commit add component input binding support for NgComponentOutlet.

PR Close #49735

goldens/public-api/common/index.md

@@ -491,7 +491,7 @@ export class NgClass implements DoCheck {
 }
 
 // @public
-export class NgComponentOutlet implements OnChanges, OnDestroy {
+export class NgComponentOutlet implements OnChanges, DoCheck, OnDestroy {
     constructor(_viewContainerRef: ViewContainerRef);
     // (undocumented)
     ngComponentOutlet: Type<any> | null;
@@ -500,15 +500,19 @@ export class NgComponentOutlet implements OnChanges, OnDestroy {
     // (undocumented)
     ngComponentOutletInjector?: Injector;
     // (undocumented)
+    ngComponentOutletInputs?: Record<string, unknown>;
+    // (undocumented)
     ngComponentOutletNgModule?: Type<any>;
     // @deprecated (undocumented)
     ngComponentOutletNgModuleFactory?: NgModuleFactory<any>;
     // (undocumented)
+    ngDoCheck(): void;
+    // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgComponentOutlet, "[ngComponentOutlet]", never, { "ngComponentOutlet": { "alias": "ngComponentOutlet"; "required": false; }; "ngComponentOutletInjector": { "alias": "ngComponentOutletInjector"; "required": false; }; "ngComponentOutletContent": { "alias": "ngComponentOutletContent"; "required": false; }; "ngComponentOutletNgModule": { "alias": "ngComponentOutletNgModule"; "required": false; }; "ngComponentOutletNgModuleFactory": { "alias": "ngComponentOutletNgModuleFactory"; "required": false; }; }, {}, never, never, true, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgComponentOutlet, "[ngComponentOutlet]", never, { "ngComponentOutlet": { "alias": "ngComponentOutlet"; "required": false; }; "ngComponentOutletInputs": { "alias": "ngComponentOutletInputs"; "required": false; }; "ngComponentOutletInjector": { "alias": "ngComponentOutletInjector"; "required": false; }; "ngComponentOutletContent": { "alias": "ngComponentOutletContent"; "required": false; }; "ngComponentOutletNgModule": { "alias": "ngComponentOutletNgModule"; "required": false; }; "ngComponentOutletNgModuleFactory": { "alias": "ngComponentOutletNgModuleFactory"; "required": false; }; }, {}, never, never, true, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<NgComponentOutlet, never>;
 }

packages/common/src/directives/ng_component_outlet.ts

@@ -6,8 +6,18 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentRef, createNgModule, Directive, Injector, Input, NgModuleFactory, NgModuleRef, OnChanges, OnDestroy, SimpleChanges, Type, ViewContainerRef} from '@angular/core';
+import {ComponentRef, createNgModule, Directive, DoCheck, Injector, Input, NgModuleFactory, NgModuleRef, OnChanges, OnDestroy, SimpleChanges, Type, ViewContainerRef} from '@angular/core';
 
+/**
+ * Represents internal object used to track state of each component input.
+ */
+interface ComponentInputState {
+  /**
+   * Track whether the input exists in the current object bound to the component input;
+   * inputs that are not present any more can be removed from the internal data structures.
+   */
+  touched: boolean;
+}
 
 /**
  * Instantiates a {@link Component} type and inserts its Host View into the current View.
@@ -22,6 +32,9 @@ import {ComponentRef, createNgModule, Directive, Injector, Input, NgModuleFactor
  *
  * You can control the component creation process by using the following optional attributes:
  *
+ * * `ngComponentOutletInputs`: Optional component inputs object, which will be bind to the
+ * component.
+ *
  * * `ngComponentOutletInjector`: Optional custom {@link Injector} that will be used as parent for
  * the Component. Defaults to the injector of the current view container.
  *
@@ -42,6 +55,13 @@ import {ComponentRef, createNgModule, Directive, Injector, Input, NgModuleFactor
  * <ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>
  * ```
  *
+ * With inputs
+ * ```
+ * <ng-container *ngComponentOutlet="componentTypeExpression;
+ *                                   inputs: inputsExpression;">
+ * </ng-container>
+ * ```
+ *
  * Customized injector/content
  * ```
  * <ng-container *ngComponentOutlet="componentTypeExpression;
@@ -72,9 +92,10 @@ import {ComponentRef, createNgModule, Directive, Injector, Input, NgModuleFactor
   selector: '[ngComponentOutlet]',
   standalone: true,
 })
-export class NgComponentOutlet implements OnChanges, OnDestroy {
+export class NgComponentOutlet implements OnChanges, DoCheck, OnDestroy {
   @Input() ngComponentOutlet: Type<any>|null = null;
 
+  @Input() ngComponentOutletInputs?: Record<string, unknown>;
   @Input() ngComponentOutletInjector?: Injector;
   @Input() ngComponentOutletContent?: any[][];
 
@@ -87,45 +108,103 @@ export class NgComponentOutlet implements OnChanges, OnDestroy {
   private _componentRef: ComponentRef<any>|undefined;
   private _moduleRef: NgModuleRef<any>|undefined;
 
+  private inputStateMap = new Map<string, ComponentInputState>();
+
   constructor(private _viewContainerRef: ViewContainerRef) {}
 
   /** @nodoc */
   ngOnChanges(changes: SimpleChanges) {
+    const {
+      ngComponentOutlet: componentTypeChange,
+      ngComponentOutletContent: contentChange,
+      ngComponentOutletInjector: injectorChange,
+      ngComponentOutletNgModule: ngModuleChange,
+      ngComponentOutletNgModuleFactory: ngModuleFactoryChange,
+    } = changes;
+
     const {
       _viewContainerRef: viewContainerRef,
+      ngComponentOutlet: componentType,
+      ngComponentOutletContent: content,
       ngComponentOutletNgModule: ngModule,
       ngComponentOutletNgModuleFactory: ngModuleFactory,
     } = this;
-    viewContainerRef.clear();
-    this._componentRef = undefined;
 
-    if (this.ngComponentOutlet) {
-      const injector = this.ngComponentOutletInjector || viewContainerRef.parentInjector;
+    if (componentTypeChange || contentChange || injectorChange || ngModuleChange ||
+        ngModuleFactoryChange) {
+      viewContainerRef.clear();
+      this._componentRef = undefined;
+
+      if (componentType) {
+        const injector = this.ngComponentOutletInjector || viewContainerRef.parentInjector;
 
-      if (changes['ngComponentOutletNgModule'] || changes['ngComponentOutletNgModuleFactory']) {
-        if (this._moduleRef) this._moduleRef.destroy();
+        if (ngModuleChange || ngModuleFactoryChange) {
+          this._moduleRef?.destroy();
 
-        if (ngModule) {
-          this._moduleRef = createNgModule(ngModule, getParentInjector(injector));
-        } else if (ngModuleFactory) {
-          this._moduleRef = ngModuleFactory.create(getParentInjector(injector));
-        } else {
-          this._moduleRef = undefined;
+          if (ngModule) {
+            this._moduleRef = createNgModule(ngModule, getParentInjector(injector));
+          } else if (ngModuleFactory) {
+            this._moduleRef = ngModuleFactory.create(getParentInjector(injector));
+          } else {
+            this._moduleRef = undefined;
+          }
+        }
+
+        this._componentRef = viewContainerRef.createComponent(componentType, {
+          index: viewContainerRef.length,
+          injector,
+          ngModuleRef: this._moduleRef,
+          projectableNodes: content,
+        });
+      }
+    }
+  }
+
+  /** @nodoc */
+  ngDoCheck() {
+    const {
+      _componentRef: componentRef,
+      ngComponentOutletInputs: inputs,
+    } = this;
+
+    if (componentRef) {
+      if (inputs) {
+        for (const inputName of Object.keys(inputs)) {
+          this._updateInputState(inputName);
         }
       }
 
-      this._componentRef = viewContainerRef.createComponent(this.ngComponentOutlet, {
-        index: viewContainerRef.length,
-        injector,
-        ngModuleRef: this._moduleRef,
-        projectableNodes: this.ngComponentOutletContent,
-      });
+      this._applyInputStateDiff(componentRef);
     }
   }
 
   /** @nodoc */
   ngOnDestroy() {
-    if (this._moduleRef) this._moduleRef.destroy();
+    this._moduleRef?.destroy();
+  }
+
+  private _updateInputState(inputName: string) {
+    const state = this.inputStateMap.get(inputName);
+    if (state) {
+      state.touched = true;
+    } else {
+      this.inputStateMap.set(inputName, {touched: true});
+    }
+  }
+
+  private _applyInputStateDiff(componentRef: ComponentRef<unknown>) {
+    for (const [inputName, state] of this.inputStateMap) {
+      if (!state.touched) {
+        // The input that was previously active no longer exists and needs to be set to undefined.
+        componentRef.setInput(inputName, undefined);
+        this.inputStateMap.delete(inputName);
+      } else {
+        // Since touched is true, it can be asserted that the inputs object is not empty.
+        componentRef.setInput(inputName, this.ngComponentOutletInputs![inputName]);
+      }
+
+      state.touched = false;
+    }
   }
 }
 

packages/common/test/directives/ng_component_outlet_spec.ts

@@ -8,7 +8,7 @@
 
 import {CommonModule} from '@angular/common';
 import {NgComponentOutlet} from '@angular/common/src/directives/ng_component_outlet';
-import {Compiler, Component, ComponentRef, Inject, InjectionToken, Injector, NgModule, NgModuleFactory, NO_ERRORS_SCHEMA, Optional, QueryList, TemplateRef, Type, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
+import {Compiler, Component, ComponentRef, Inject, InjectionToken, Injector, Input, NgModule, NgModuleFactory, NO_ERRORS_SCHEMA, Optional, QueryList, TemplateRef, Type, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
 import {TestBed, waitForAsync} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
@@ -295,20 +295,92 @@ describe('insert/remove', () => {
   });
 });
 
+describe('inputs', () => {
+  it('should be binding the component input', () => {
+    const fixture = TestBed.createComponent(TestInputsComponent);
+    fixture.componentInstance.currentComponent = ComponentWithInputs;
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toBe('foo: , bar: , baz: Baz');
+
+    fixture.componentInstance.inputs = {};
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toBe('foo: , bar: , baz: Baz');
+
+    fixture.componentInstance.inputs = {foo: 'Foo', bar: 'Bar'};
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toBe('foo: Foo, bar: Bar, baz: Baz');
+
+    fixture.componentInstance.inputs = {foo: 'Foo'};
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toBe('foo: Foo, bar: , baz: Baz');
+
+    fixture.componentInstance.inputs = {foo: 'Foo', baz: null};
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toBe('foo: Foo, bar: , baz: ');
+
+    fixture.componentInstance.inputs = undefined;
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toBe('foo: , bar: , baz: ');
+  });
+
+  it('should be binding the component input (with mutable inputs)', () => {
+    const fixture = TestBed.createComponent(TestInputsComponent);
+    fixture.componentInstance.currentComponent = ComponentWithInputs;
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toBe('foo: , bar: , baz: Baz');
+
+    fixture.componentInstance.inputs = {foo: 'Hello', bar: 'World'};
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toBe('foo: Hello, bar: World, baz: Baz');
+
+    fixture.componentInstance.inputs['bar'] = 'Angular';
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toBe('foo: Hello, bar: Angular, baz: Baz');
+
+    delete fixture.componentInstance.inputs['foo'];
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toBe('foo: , bar: Angular, baz: Baz');
+  });
+
+  it('should be binding the component input (with component type change)', () => {
+    const fixture = TestBed.createComponent(TestInputsComponent);
+    fixture.componentInstance.currentComponent = ComponentWithInputs;
+    fixture.componentInstance.inputs = {foo: 'Foo', bar: 'Bar'};
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toBe('foo: Foo, bar: Bar, baz: Baz');
+
+    fixture.componentInstance.currentComponent = AnotherComponentWithInputs;
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toBe('[ANOTHER] foo: Foo, bar: Bar, baz: Baz');
+  });
+});
+
 const TEST_TOKEN = new InjectionToken('TestToken');
 @Component({selector: 'injected-component', template: 'foo'})
 class InjectedComponent {
   constructor(@Optional() @Inject(TEST_TOKEN) public testToken: any) {}
 }
 
-
 @Component({selector: 'injected-component-again', template: 'bar'})
 class InjectedComponentAgain {
 }
 
 const TEST_CMP_TEMPLATE = `<ng-template *ngComponentOutlet="
       currentComponent;
       injector: injector;
+      inputs: inputs;
       content: projectables;
       ngModule: ngModule;
       ngModuleFactory: ngModuleFactory;
@@ -317,6 +389,7 @@ const TEST_CMP_TEMPLATE = `<ng-template *ngComponentOutlet="
 class TestComponent {
   currentComponent: Type<unknown>|null = null;
   injector?: Injector;
+  inputs?: Record<string, unknown>;
   projectables?: any[][];
   ngModule?: Type<unknown>;
   ngModuleFactory?: NgModuleFactory<unknown>;
@@ -371,3 +444,36 @@ class Module3InjectedComponent {
 })
 export class TestModule3 {
 }
+
+@Component({
+  selector: 'cmp-with-inputs',
+  standalone: true,
+  template: `foo: {{ foo }}, bar: {{ bar }}, baz: {{ baz }}`
+})
+class ComponentWithInputs {
+  @Input() foo?: any;
+  @Input() bar?: any;
+  @Input() baz?: any = 'Baz';
+}
+
+@Component({
+  selector: 'another-cmp-with-inputs',
+  standalone: true,
+  template: `[ANOTHER] foo: {{ foo }}, bar: {{ bar }}, baz: {{ baz }}`
+})
+class AnotherComponentWithInputs {
+  @Input() foo?: any;
+  @Input() bar?: any;
+  @Input() baz?: any = 'Baz';
+}
+
+@Component({
+  selector: 'test-cmp',
+  standalone: true,
+  imports: [NgComponentOutlet],
+  template: `<ng-template *ngComponentOutlet="currentComponent; inputs: inputs;"></ng-template>`
+})
+class TestInputsComponent {
+  currentComponent: Type<unknown>|null = null;
+  inputs?: Record<string, unknown>;
+}

packages/examples/common/ngComponentOutlet/ts/module.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Injectable, Injector, NgModule, OnInit, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
+import {Component, Injectable, Injector, Input, NgModule, OnInit, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 
 
@@ -33,9 +33,11 @@ export class Greeter {
 
 @Component({
   selector: 'complete-component',
-  template: `Complete: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`
+  template: `{{ label }}: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`
 })
 export class CompleteComponent {
+  @Input() label!: string;
+
   constructor(public greeter: Greeter) {}
 }
 
@@ -45,12 +47,16 @@ export class CompleteComponent {
     <ng-template #ahoj>Ahoj</ng-template>
     <ng-template #svet>Svet</ng-template>
     <ng-container *ngComponentOutlet="CompleteComponent;
+                                      inputs: myInputs;
                                       injector: myInjector;
                                       content: myContent"></ng-container>`
 })
 export class NgComponentOutletCompleteExample implements OnInit {
   // This field is necessary to expose CompleteComponent to the template.
   CompleteComponent = CompleteComponent;
+
+  myInputs = {'label': 'Complete'};
+
   myInjector: Injector;
   @ViewChild('ahoj', {static: true}) ahojTemplateRef!: TemplateRef<any>;
   @ViewChild('svet', {static: true}) svetTemplateRef!: TemplateRef<any>;