Angular Factory Provider
In this article, we will learn about the DI factory provider.
What is a provider?
According to Angular: “A dependency provider configures an injector with a DI token, which that injector uses to provide the concrete, runtime version of a dependency value.”
A provider is basically an object that tells Angular injector how to obtain or create a dependency.
When Angular creates a new instance of a component class, it determines which services or other dependencies that component needs by looking at the constructor parameter types. If the requested service instance doesn’t yet exist, the injector makes one using the registered provider and adds it to the injector before returning the service to Angular component.
Factory provider
While most of you most likely familiar with the basic way to configure a provider by simply declaring them:
providers: [{MyService}]Angular dependency injection provides more advanced capabilities.
With Factory provider you can configure the Injector to return a value by invoking a specific function. Let’s look at this example.
providers: [{provide: MyService, useFactory: myServiceFactory, deps: [AnotherService] };The provide property configures the token that will be used in dependency injection and the useFactory is pointing to the function that will be used to return the desired value. The deps property configures the tokens that will be passed to your factory function.
When to use it?
Factory provider can be very handy when you need to create a dependent value dynamically, based on information you won’t have until run time. You can make an informed decision on which value to return based on other services and application state.
Example:
Let’s try to guess which mobile device a user is logged in from. We will try to use information such as the browser user-agent, screen width, and screen height. Let’s define three token that will be used later on to identify the device name.
The InjectionTokenclass — Creates a token that can be used in Angular dependency injection. InjectionToken is parameterized on T which is the type of object which will be returned by the Injector. This provides an additional level of type safety.
providers: [{provide: new InjectionToken<string>('UserAgent'), useValue: () => window.navigator.userAgent}]providers: [{provide: new InjectionToken<string>('ScreenHeight'), useValue: () => window.screen.height}]providers: [{provide: new InjectionToken<string>('ScreenWidth'), useValue: () => window.screen.width}]
Now we can come up with an algorithm to detect the device name based on the three tokens we defined above. We pass an arrow function to the useFactory that has 3 dependencies, in order to resolve those dependencies, we pass in a dependency array (dep) with the listed tokens.
providers: [{provide: new InjectionToken<string>('DeviceName'), useFactory: (userAgent: string, screenHeight: string, screenWidth: string) =>
// Based on user agent and the screen width and height we can try to guess which device is it
return 'Samsung S8'; }, deps: [new InjectionToken('UserAgent'), new InjectionToken('ScreenWidth'), new InjectionToken('ScreenHeight')]
Finally, we will consume the device name in our Angular component.
@Component({ selector: 'my-device-name')
export class DeviceName {
constructor(@Inject('DeviceName') private deviceName: string) {}}
The Inject parameter decorator indicates to Angular DI that this parameter (deviceName) should be resolved from a defined token — DeviceName.
That’s all!
Originally published at https://www.lanotech.net
Follow us on Twitter #LanoTechno
