Provide typesafety for ComponentRef.setInput

[c-harding]

Which @angular/* package(s) are relevant/related to the feature request?

core

Description

I would like to call setInput in my tests type-safely. I have recently migrated to OnPush, and found that setting properties directly on the input (component.myInput = newValue; fixture.detectChanges()) does not trigger change detection. Instead, I found two alternatives:

1. fixture.componentRef.setInput('myInput', newValue)
2. component.myInput = newValue; fixture.changeDetectorRef.markForCheck(); fixture.detectChanges().

№ 2 adds boilerplate, and will not work with signals. Therefore № 1 is preferable. However, it does not offer any typesafety.

Proposed solution

The following type signature for setInput:

abstract class ComponentRef<C> {
  abstract setInput<K extends MutableKeys<C>>(name: K, value: C[K]): void;
}

type MutableKeys<T> = {
  [P in keyof T]-?: 
    // Check if trying to assign a value to the property P after it's been initialized
    // does not result in a type error (indicating it's mutable). If it's mutable, include the key P.
    // We use a conditional type here, where we try to assign a different type to the property P
    // and check if it's assignable to the original type T. If it is, it means the property is mutable.
    IfEquals<{ [Q in P]: T[P] }, { -readonly [Q in P]: T[P] }, P>
}[keyof T];

// Utility type to check if two types are exactly the same
type IfEquals<X, Y, A = X, B = never> = 
  (<T>() => T extends X ? 1 : 2) extends 
  (<T>() => T extends Y ? 1 : 2) ? A : B;

Sample usage:

class X {
  readonly a = 1;
  b = 2;
  c?: number;
  protected d = 4;
  private e = 5;
}

declare let componentRef: ComponentRef<X>;

// @ts-expect-error - a is readonly
componentRef.setInput("a", 1);

// b is mutable
componentRef.setInput("b", 2);

// c is mutable and optional
componentRef.setInput("c", 3);
componentRef.setInput("c", undefined);

// @ts-expect-error - d is protected
componentRef.setInput("d", 4);

// @ts-expect-error - e is protected
componentRef.setInput("e", 5);

Typescript Playground

Open points:

1. support for signals
2. support for aliasing (though it would be acceptable for me to pass the property name rather than the alias)

Alternatives considered

component.myInput = newValue; fixture.changeDetectorRef.markForCheck(); fixture.detectChanges()

• no support for signals
• extra boilerplate

[pkozlowski-opensource]

Duplicate of #51878

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}