CODEWITHSUNDEEP
angular
Ignatius Andrew
Ignatius Andrew

Reputation: 8258

useValue vs useFactory

What is the difference between useValue and useFactory providers?

It seems useFactory returns a value and useClass also does the same.

Upvotes: 28

Views: 31804

Answers (3)

shwoodard
shwoodard

Reputation: 429

My basic understanding...

You can think is useValue roughly as static assignment; the Provider adheres to the ValueProvider interface:

Given that you always want the value '12345' when using @Inject(INJECTION_TOKEN), then this will work,

providers: [
  {
    provide: INJECTION_TOKEN,
    useValue: '12345',
  },
],

This will always return '1234' when using @Inject(INJECTION_TOKEN).

Whereas,

providers: [
  {
    provide: INJECTION_TOKEN,
    useValue: () => '12345',
  },
],

Will provide a function for INJECTION_TOKEN that will return '12345'.

useFactory expects a function to produce the injected value. The return value of the factory function is what is injected. This, useFactory provider type uses FactoryProvider interface. An optional array of deps can be added that allows for arguments to be passed to the factory function.

Finally, useClass,

Configures the Injector to return an instance of useClass for a token. [1]

The injector will provide an instance of the provided class. Noteworthy, the injector will also provide the injected dependencies of the Type<any>, the value type of field, useClass on the ClassProvider [1] interface.

To summarize, choose useValue to provide the same injected value each time*, useFactory when the injection value should be computed at runtime, and useClass when you want the injector to construct a value of Type<any> to provide.

* Note: The value provided to useValue can be a function so can produce dynamic values if the injected value is invoked, because it is a function.

[1] ClassProvider

Upvotes: 6

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

useValue: will assign current whatever assigned object instance which you provided.

useFactory: It also does the same, You can configure a factory object based on other dependency inside function and before returning an instance of it.

{ 
  provide: CustomDependency,
  useFactory: () => {
    if (IS_A) {
      return new A();
    } else {
      return new B();
    }
  }
}

You can use useFactory to configure your dependency at configuration time. Its same as that of config phase Angular 1, where you are modifying or forming a dependency as you needed.

Upvotes: 19

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657741

  • useFactory takes a factory function that is expected to return the value and also can have dependencies (require instances of other providers passed as parameter)

See for example the config:ConfigService parameter required by the factory function in How to pass parameters rendered from backend to angular2 bootstrap method

  • useValue is just the value that is injected as is

  • useClass expects a type name and Angular creates an instance from the passed type and also resolves and passes constructor parameters to the class if there are any

  • There is also useExisting which is like an alias for an already registered provider. The use case is to provide the same instance of a provider with different keys.

See Angular 2 useExisting providers for an example.

Upvotes: 28

Related Questions