feat(core): add ability to set inputs on ComponentRef

This change adds the setInput method to the ComponentRef.

Previously users had to call `componentRef.instance['inputName']`
to change inputs of a dynamically created component. This had
several problems:

*  OnPush components were not marked for check and thus very
difficult to test;
* input aliasing was not take into account - a property name
on a component could have been different from the actual input
name so setting input properties was fragile;
* manually setting input propertie would NOT trigger the
`NgOnChanges` lifecycle hook.

This modifications unifies `@Input` accross dynamically created
components and the ones referenced in templates. This also opens
doors to other changes: as an example router could use this new
method to set `@Input`s from router params.

Closes #12313
Closes #22567

goldens/public-api/core/index.md

@@ -235,6 +235,7 @@ export abstract class ComponentRef<C> {
     abstract get instance(): C;
     abstract get location(): ElementRef;
     abstract onDestroy(callback: Function): void;
+    abstract setInput(name: string, value: unknown): void;
 }
 
 // @public

packages/core/src/linker/component_factory.ts

@@ -23,6 +23,16 @@ import {ViewRef} from './view_ref';
  * @publicApi
  */
 export abstract class ComponentRef<C> {
+  /**
+   * Updates a specified input name to a new value. Using this method will properly mark for check
+   * component using the `OnPush` change detection strategy. It will also assure that the
+   * `OnChanges` lifecycle hook runs when a dynamically created component is change-detected.
+   *
+   * @param name The name of an input.
+   * @param value The new value of an input.
+   */
+  abstract setInput(name: string, value: unknown): void;
+
   /**
    * The host or anchor [element](guide/glossary#element) for this component instance.
    */

packages/core/src/render3/component.ts

@@ -15,7 +15,7 @@ import {assertDefined, assertIndexInRange} from '../util/assert';
 import {diPublicInInjector, getOrCreateNodeInjectorForNode} from './di';
 import {throwProviderNotFoundError} from './errors_di';
 import {registerPostOrderHooks} from './hooks';
-import {addToViewTree, CLEAN_PROMISE, createLView, getOrCreateTComponentView, getOrCreateTNode, initTNodeFlags, instantiateRootComponent, invokeHostBindingsInCreationMode, markAsComponentHost, registerHostBindingOpCodes} from './instructions/shared';
+import {addToViewTree, CLEAN_PROMISE, createLView, getOrCreateTComponentView, getOrCreateTNode, initializeInputAndOutputAliases, initTNodeFlags, instantiateRootComponent, invokeHostBindingsInCreationMode, markAsComponentHost, registerHostBindingOpCodes} from './instructions/shared';
 import {ComponentDef, RenderFlags} from './interfaces/definition';
 import {TElementNode, TNodeType} from './interfaces/node';
 import {PlayerHandler} from './interfaces/player';
@@ -136,6 +136,7 @@ export function createRootComponentView(
   if (tView.firstCreatePass) {
     diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, rootView), tView, def.type);
     markAsComponentHost(tView, tNode);
+    initializeInputAndOutputAliases(tView, tNode);
     initTNodeFlags(tNode, rootView.length, 1);
   }
 

packages/core/src/render3/component_ref.ts

@@ -26,11 +26,11 @@ import {assertComponentType} from './assert';
 import {createRootComponent, createRootComponentView, createRootContext, LifecycleHooksFeature} from './component';
 import {getComponentDef} from './definition';
 import {NodeInjector} from './di';
-import {createLView, createTView, locateHostElement, renderView} from './instructions/shared';
+import {createLView, createTView, initializeInputAndOutputAliases, locateHostElement, markDirtyIfOnPush, renderView, setInputsForProperty} from './instructions/shared';
 import {ComponentDef} from './interfaces/definition';
-import {TContainerNode, TElementContainerNode, TElementNode, TNode} from './interfaces/node';
+import {PropertyAliasValue, TContainerNode, TElementContainerNode, TElementNode, TNode} from './interfaces/node';
 import {RNode} from './interfaces/renderer_dom';
-import {HEADER_OFFSET, LView, LViewFlags, TViewType} from './interfaces/view';
+import {HEADER_OFFSET, LView, LViewFlags, TVIEW, TViewType} from './interfaces/view';
 import {MATH_ML_NAMESPACE, SVG_NAMESPACE} from './namespaces';
 import {createElementNode, writeDirectClass} from './node_manipulation';
 import {extractAttrsAndClassesFromSelector, stringifyCSSSelectorList} from './node_selector_matcher';
@@ -226,6 +226,7 @@ export class ComponentFactory<T> extends viewEngine_ComponentFactory<T> {
       // Angular 5 reference: https://stackblitz.com/edit/lifecycle-hooks-vcref
       component = createRootComponent(
           componentView, this.componentDef, rootLView, rootContext, [LifecycleHooksFeature]);
+      initializeInputAndOutputAliases(rootTView, tElementNode);
 
       renderView(rootTView, rootLView, null);
     } finally {
@@ -275,6 +276,15 @@ export class ComponentRef<T> extends viewEngine_ComponentRef<T> {
     this.componentType = componentType;
   }
 
+  override setInput(name: string, value: unknown): void {
+    let inputData = this._tNode.inputs;
+    let dataValue: PropertyAliasValue|undefined;
+    if (inputData != null && (dataValue = inputData[name])) {
+      setInputsForProperty(this._rootLView[TVIEW], this._rootLView, dataValue, name, value);
+      markDirtyIfOnPush(this._rootLView, this._tNode.index);
+    }
+  }
+
   override get injector(): Injector {
     return new NodeInjector(this._tNode, this._rootLView);
   }

packages/core/src/render3/instructions/shared.ts

@@ -912,7 +912,7 @@ function generatePropertyAliases(
  * Initializes data structures required to work with directive inputs and outputs.
  * Initialization is done for all directives matched on a given TNode.
  */
-function initializeInputAndOutputAliases(tView: TView, tNode: TNode): void {
+export function initializeInputAndOutputAliases(tView: TView, tNode: TNode): void {
   ngDevMode && assertFirstCreatePass(tView);
 
   const start = tNode.directiveStart;
@@ -1010,7 +1010,7 @@ export function elementPropertyInternal<T>(
 }
 
 /** If node is an OnPush component, marks its LView dirty. */
-function markDirtyIfOnPush(lView: LView, viewIndex: number): void {
+export function markDirtyIfOnPush(lView: LView, viewIndex: number): void {
   ngDevMode && assertLView(lView);
   const childComponentLView = getComponentLViewByIndex(viewIndex, lView);
   if (!(childComponentLView[FLAGS] & LViewFlags.CheckAlways)) {

packages/core/test/bundling/animations/bundle.golden_symbols.json

@@ -932,6 +932,9 @@
   {
     "name": "initTNodeFlags"
   },
+  {
+    "name": "initializeInputAndOutputAliases"
+  },
   {
     "name": "injectArgs"
   },
@@ -1085,6 +1088,9 @@
   {
     "name": "markAsComponentHost"
   },
+  {
+    "name": "markDirtyIfOnPush"
+  },
   {
     "name": "maybeWrapInNotSelector"
   },

packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json

@@ -698,6 +698,9 @@
   {
     "name": "initTNodeFlags"
   },
+  {
+    "name": "initializeInputAndOutputAliases"
+  },
   {
     "name": "injectArgs"
   },
@@ -965,6 +968,9 @@
   {
     "name": "setInjectImplementation"
   },
+  {
+    "name": "setInputsForProperty"
+  },
   {
     "name": "setInputsFromAttrs"
   },

packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json

@@ -1028,6 +1028,9 @@
   {
     "name": "initTNodeFlags"
   },
+  {
+    "name": "initializeInputAndOutputAliases"
+  },
   {
     "name": "injectArgs"
   },
@@ -1199,6 +1202,9 @@
   {
     "name": "markAsComponentHost"
   },
+  {
+    "name": "markDirtyIfOnPush"
+  },
   {
     "name": "markDuplicates"
   },

packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json

@@ -992,6 +992,9 @@
   {
     "name": "initTNodeFlags"
   },
+  {
+    "name": "initializeInputAndOutputAliases"
+  },
   {
     "name": "injectArgs"
   },
@@ -1160,6 +1163,9 @@
   {
     "name": "markAsComponentHost"
   },
+  {
+    "name": "markDirtyIfOnPush"
+  },
   {
     "name": "markDuplicates"
   },

packages/core/test/bundling/hello_world/bundle.golden_symbols.json

@@ -398,6 +398,12 @@
   {
     "name": "forwardRef"
   },
+  {
+    "name": "generateInitialInputs"
+  },
+  {
+    "name": "generatePropertyAliases"
+  },
   {
     "name": "getClosureSafeProperty"
   },
@@ -509,6 +515,9 @@
   {
     "name": "incrementInitPhaseFlags"
   },
+  {
+    "name": "initializeInputAndOutputAliases"
+  },
   {
     "name": "injectArgs"
   },
@@ -548,6 +557,9 @@
   {
     "name": "isImportedNgModuleProviders"
   },
+  {
+    "name": "isInlineTemplate"
+  },
   {
     "name": "isLContainer"
   },

packages/core/test/bundling/router/bundle.golden_symbols.json

@@ -1367,6 +1367,9 @@
   {
     "name": "initTNodeFlags"
   },
+  {
+    "name": "initializeInputAndOutputAliases"
+  },
   {
     "name": "inject"
   },
@@ -1811,6 +1814,9 @@
   {
     "name": "setInjectImplementation"
   },
+  {
+    "name": "setInputsForProperty"
+  },
   {
     "name": "setInputsFromAttrs"
   },

packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json

@@ -473,6 +473,12 @@
   {
     "name": "forwardRef"
   },
+  {
+    "name": "generateInitialInputs"
+  },
+  {
+    "name": "generatePropertyAliases"
+  },
   {
     "name": "getClosureSafeProperty"
   },
@@ -590,6 +596,9 @@
   {
     "name": "incrementInitPhaseFlags"
   },
+  {
+    "name": "initializeInputAndOutputAliases"
+  },
   {
     "name": "injectArgs"
   },
@@ -632,6 +641,9 @@
   {
     "name": "isImportedNgModuleProviders"
   },
+  {
+    "name": "isInlineTemplate"
+  },
   {
     "name": "isLContainer"
   },

packages/core/test/bundling/todo/bundle.golden_symbols.json

@@ -866,6 +866,9 @@
   {
     "name": "initTNodeFlags"
   },
+  {
+    "name": "initializeInputAndOutputAliases"
+  },
   {
     "name": "injectArgs"
   },
@@ -1013,6 +1016,9 @@
   {
     "name": "markAsComponentHost"
   },
+  {
+    "name": "markDirtyIfOnPush"
+  },
   {
     "name": "markDuplicates"
   },

packages/core/test/render3/component_ref_spec.ts

@@ -8,8 +8,9 @@
 
 import {Renderer} from '@angular/core/src/render3/interfaces/renderer';
 import {RElement} from '@angular/core/src/render3/interfaces/renderer_dom';
+import {TestBed} from '@angular/core/testing';
 
-import {Component, Injector, Input, NgModuleRef, Output, RendererType2, ViewEncapsulation} from '../../src/core';
+import {ChangeDetectionStrategy, Component, Injector, Input, NgModuleRef, OnChanges, Output, RendererType2, SimpleChanges, Type, ViewEncapsulation} from '../../src/core';
 import {ComponentFactory} from '../../src/linker/component_factory';
 import {RendererFactory2} from '../../src/render/api';
 import {injectComponentFactoryResolver} from '../../src/render3/component_ref';
@@ -278,4 +279,72 @@ describe('ComponentFactory', () => {
       expect(hostNode.className).toEqual('HOST_COMPONENT HOST_RENDERER');
     });
   });
+
+  describe('setInput', () => {
+    it('should allow setting inputs on the ComponentRef', () => {
+      const inputChangesLog: string[] = [];
+
+      @Component({template: `{{in}}`})
+      class DynamicCmp implements OnChanges {
+        ngOnChanges(changes: SimpleChanges): void {
+          const inChange = changes['in'];
+          inputChangesLog.push(
+              `${inChange.previousValue}:${inChange.currentValue}:${inChange.firstChange}`);
+        }
+
+        @Input() in : string|undefined;
+      }
+
+      const fixture = TestBed.createComponent(DynamicCmp);
+
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('');
+      expect(inputChangesLog).toEqual([]);
+
+      fixture.componentRef.setInput('in', 'first');
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('first');
+      expect(inputChangesLog).toEqual(['undefined:first:true']);
+
+      fixture.componentRef.setInput('in', 'second');
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('second');
+      expect(inputChangesLog).toEqual(['undefined:first:true', 'first:second:false']);
+    });
+
+    it('should allow setting mapped inputs on the ComponentRef', () => {
+      @Component({template: `{{in}}`})
+      class DynamicCmp {
+        @Input('publicName') in : string|undefined;
+      }
+
+      const fixture = TestBed.createComponent(DynamicCmp);
+
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('');
+
+      fixture.componentRef.setInput('publicName', 'in value');
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('in value');
+    });
+
+    it('should mark components for check when setting an input on a ComponentRef', () => {
+      @Component({
+        template: `{{in}}`,
+        changeDetection: ChangeDetectionStrategy.OnPush,
+      })
+      class DynamicCmp {
+        @Input() in : string|undefined;
+      }
+
+      const fixture = TestBed.createComponent(DynamicCmp);
+
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('');
+
+      fixture.componentRef.setInput('in', 'pushed');
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toBe('pushed');
+    });
+  });
 });