How to add providers to Injector dynamically?
Asked Answered
B

4

20

Each component can specify new Providers using its providers property in ComponentMetadata.

Is there a way to specify providers dynamically from, say, constructor of the component?

Buchner answered 10/1, 2016 at 23:45 Comment(0)
M
15

I used useFactory to determine what class will be used for provide. I share for whom concern.

In component ts

@Component({
    selector: 'app-chart',
    templateUrl: './chart.component.html',
    styleUrls: ['./chart.component.scss'],
    providers: [
        { provide: DateTimeAdapter, useClass: MomentDateTimeAdapter },
        { provide: OWL_DATE_TIME_FORMATS, useValue: CUSTOM_FORMATS },
        { provide: OwlDateTimeIntl, deps: [SettingService],
            useFactory: (settingsService) => settingsService.getLanguage()
        }
    ]
})

In service ts get class instance

@Injectable()
export class SettingService {
    public getLanguage(){
       return this.translate.currentLang == "ko" ? new KoreanIntl() : new DefaultIntl;
    }
}
Micheal answered 5/9, 2019 at 8:21 Comment(1)
Is it possible inject useValue dynamically based on the condition looks like settingService.getLanguage() as you used.Humberto
A
7

Below are 3 broader steps you need to follow to implement dynamic providers. Please note i have commented many part of the code so that we focus on the main answer. If you want to see detailed step refer this Angular tutorial

Step 1 :- Create the collection of the providers

Create the collection and you can use the push method to add DI objects dynamically.

var providerscoll:any = [];
providerscoll.push({ provide: "1", useClass: DialogLogger });
providerscoll.push({ provide: "2", useClass: ConsoleLogger });

Step 2 :- Provide the providers collection in "NgModule" .

Please see the Square bracket syntax.

@NgModule({
    // code removed for clarity
    providers: [providerscoll]
})
export class MainModuleLibrary { }

Step 3 :- Get the Injector object in constructor

Get injector object in the constructor using DI and you can then look up using the "Get" method and the token. So if you provide "1" then you get something and if you provide "2" you get something.

// code removed for clarity
import {  Injector } from '@angular/core';
// code removed for clarity
export class CustomerComponent {
constructor(public injector: Injector){
        this.logger = this.injector.get("2");
    }
}
Actomyosin answered 15/11, 2017 at 7:48 Comment(4)
This is not dynamic provider this is just delayed injection using Injector.Buchner
You mean you want to change the injector from within the component in some event click or some other place.Actomyosin
yeah, say you have an user input and you want to use that input to set up a provider so that it's available to components instantiated later.Buchner
All of the dependencies resolved are in the scope of mainModule. OP asks to add dependencies on a component level.Vuong
F
6

I've done it in the bootstrap part.

bootstrap(AppComponent,[
    provide( RequestOptions, { useClass: DefaultRequestOptions } ),
    provide(Http, { useFactory:
        function(backend, defaultOptions) {
            return new Http(backend, defaultOptions); },
        deps: [XHRBackend, RequestOptions]}),
]);

I'm guessing it can be done in a component too:

https://angular.io/docs/ts/latest/api/http/Http-class.html

You make it dynamic by adding decisions into the factory function instead of just returning the same object.

Faithless answered 11/1, 2016 at 0:1 Comment(1)
This doesn't seem to work now that 2.0.0 is released. I've been up against it trying to get this working.Crunode
S
3

There is one way to create component using ViewContainerRef, where is allowed to pass injector so I guess this should be possible but it is limited to create components dynamically:

Create Injector:

static create(options: {providers: StaticProvider[], parent?: Injector, name?: string}): Injector;
// @param injector The injector to use as the parent for the new component.

abstract createComponent<C>(
    componentFactory: ComponentFactory<C>, index?: number, injector?: Injector,
    projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>;

Pseudo code:

class FooComponent {

  constructor(
    private readonly injector: Injector,
    private readonly viewContainer: ViewContainerRef){
    const customInjector = this.injector.create({ providers: [FooService], parent: injector });
    this.viewContainer.createComponent(componentFactory, 0, customInjector );
    ...
  }
}

Or similarly use Portal from Angular CDK.

Solorio answered 12/6, 2020 at 9:33 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.