assign Angular signal-based inputs dynamically

I'm encountering an issue when trying to update inputs on a component loaded into an Angular CDK overlay.

Here's my component:

TypeScript
@Component({
selector: 'my-component',
templateUrl: '..',
imports: [...],
})
export class MyComponent {
readonly myInput = input.required<MyInputInterface>();

ngOnInit() {
console.log(this.myInput());
}
}


I'm using Object.assign(componentRef.instance, context) to pass data to the component when creating the overlay. However, I get an error stating that this.myInput is not a function.

The component works correctly when used with a parent component and regular input binding. When debugging, I can see that myInput does have a value within the overlay component.

Could Object.assign be causing problems with the input setter or Angular's change detection within the overlay?

Continue reading...