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

core

Description

Let's say our component has a child directive with dependency decorated by @Host. And we want to specify its provider.

You can do that in the compile time using viewProviders option in @Component decorator. But, currently, there is no way to do it programmatically.

i.e. when that component is created dynamically by ViewContainerRef.createComponent() method, you can only specify providers using injector option in Injector.create() method. But those providers will not be applied to that directive.

Here is live example. Take a closer look at providers and console output.

When providers array is used, factory is not called because search stops on <input> component (ngModel uses @Host and @Optional decorators):

@Component({
  selector: 'app-provider-form',
  template: '<input name="username" [(ngModel)]="username" />',
  providers: [{provide: ControlContainer, useFactory: () => {console.log('provider factory')}}],
})
export class ProviderestFormComponent  {
  username: string;
}

But when viewProviders array is used factory is called:

@Component({
  selector: 'app-view-provider-form',
  template: '<input name="username" [(ngModel)]="username" />',
  viewProviders: [{provide: ControlContainer, useFactory: () => {console.log('view provider factory')}}],
})
export class ViewProviderFormComponent  {
  username: string;
}

So it would be really convenient to be able to specify this when form is created dynamically. Otherwise there is no easy way to bind parent ngForm directive and child ngModels.

Related issues: #47580 , #34780

Proposed solution

Add viewInjector option to ViewContainerRef.createComponent() options. Or maybe add viewProviders key to Injector.create().

Alternatives considered

n/a