Guide on dynamically injecting a helper class

Question

Guide on dynamically injecting a helper class

Within my component, I am utilizing two different helper classes as shown below:

import {HelperA} ...
import {HelperB} ...
...

@Component({..})
export class MyComponent implements OnInit {
    helper: Helper;     
    constructor(private ref: ElementRef, private device: MyDeviceDetectionService) {}

    ngOnInit() {
        if (this.device.isMobile) {
            this.helper = new HelperA(this.ref);
        } else {
            this.helper = new HelperB(this.ref);
        }
    }
}

I am aware that this setup makes unit testing challenging. How can I handle the injection of these helpers in a way that only one is needed based on the isMobile condition being true or false?

angular unit-testing typescript dependency-injection angular2-di

Answer 1

Answer №1

You have the ability to pass all that information on to the injector. If the two assistants share a superclass called Helper, you can utilize the useFactory provider option to instantiate the necessary helper:

providers: [
  ...,
  { provide: Helper, useFactory: createAssistant, deps: [MyToolDetectionService, ElementRef] },
]

The factory function would be as follows:

export function createAssistant(tool: MyToolDetectionService, reference: ElementRef): Helper {
  if (tool.isPortable) {
    return new AssistantA(reference);
  } else {
    return new AssistantB(reference);
  }
}

It is important to note that this code should reside in the component's providers array since the element reference is not accessible at the module level.

Answer 2

You have the ability to pass all that information on to the injector. If the two assistants share a superclass called Helper, you can utilize the useFactory provider option to instantiate the necessary helper:

providers: [
  ...,
  { provide: Helper, useFactory: createAssistant, deps: [MyToolDetectionService, ElementRef] },
]

The factory function would be as follows:

export function createAssistant(tool: MyToolDetectionService, reference: ElementRef): Helper {
  if (tool.isPortable) {
    return new AssistantA(reference);
  } else {
    return new AssistantB(reference);
  }
}

It is important to note that this code should reside in the component's providers array since the element reference is not accessible at the module level.

Guide on dynamically injecting a helper class

Answer №1

Similar questions

What does 'this' refer to in a JavaScript function that is inside an object?

What should I do about typescript and ES6?

Is the state variable not being properly set by using React's setState within the useCallback() hook?

Unexpected Secondary Map Selector Appears When Leaflet Overlay is Added

React problem with manipulating JSON arrays

A TypeScript object with user-defined keys

Jest ran into a surprising token related to NUXT typescript

Publish an Angular application's production version using Zeit Now

"Attempting to access a Service in Angular before it has been initialized is

Using TypeScript to define generic types for classes, method parameters, and method return types

State management in React using hooks

Discover the return types in Typescript by inferring from a collection of functions within an

Difficulty Encountered While Deploying Mean Stack Application on Heroku

What are the benefits of using one state in React with useState compared to having multiple states?

What sets apart an index signature from a Record when dealing with an empty object?

"Unlocking the Power of Monaco Editor: A Guide to Fetching CompletionItems from Your

Remove the ability to select from the dropped list item

Unexpected behavior encountered when running Angular 8 radio button checked function

In my Angular project, I'm currently working on retrieving a boolean value from a service. However, I'm encountering an issue where the

Transforming Angular 4's folder structure for improved architecture simplicity