I wrote a 'popping' message (android toast like) ponent. All other ponents have it as a sibling and access it via a shared service. Now I would like to use it from an utility function too, like this one:

export function handleError(errorResp: Response | any): Observable<string> {
    ....
    // here I would like to display the message
    return Observable.throw(errMsg);
}

I thought I could pass the message service as parameter to handleError, but I feel it's not DRY, as I would need to make it from every ponent event though the ponent doesn't need it for other purposes. Could you give me some guidance?

I wrote a 'popping' message (android toast like) ponent. All other ponents have it as a sibling and access it via a shared service. Now I would like to use it from an utility function too, like this one:

export function handleError(errorResp: Response | any): Observable<string> {
    ....
    // here I would like to display the message
    return Observable.throw(errMsg);
}

I thought I could pass the message service as parameter to handleError, but I feel it's not DRY, as I would need to make it from every ponent event though the ponent doesn't need it for other purposes. Could you give me some guidance?

• javascript
• angular
• typescript

Share Improve this question Follow edited May 8, 2023 at 16:49 Vega asked Jul 11, 2017 at 10:04 VegaVega 28.8k2828 gold badges120120 silver badges145145 bronze badges 2

• 1 Since this function is outside your Angular app, there are no much options. Or you pass it via argument or directly import the service (via Javascript import), then use it -- depending on what requirements are necessary to it (like if it's pletely uncoupled from Angular) it should work. If it has any Angular requirements, you should place your handleError function in another service that could get the Toast thing with Dependency Injection. – Edmundo Santos Commented Jul 11, 2017 at 10:16
• 1 The Angular's service is just a normal Javascript class. You can import and access its methods normally. – Edmundo Santos Commented Jul 11, 2017 at 10:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Since this function is outside your Angular app, there are no much options.

• Pass it via argument, or
• Directly import the service (via Javascript import, as the Angular's service is just a normal Javascript class), then use it. Note that it may not work depending on what requirements are necessary to instantiate the service (like if it uses some feature from Angular, or inject other services using DI), or
• You could place your handleError function in another service that could get the Toast thing via Dependency Injection.

Depends on which Angular version you are using. Starting from Angular 15 release, a new approach has been introduced where dependencies can be injected using the inject function, instead of previous dependency injection mechanism.

The inject function provides a more flexible and dynamic way of handling dependencies within an Angular application, enabling developers to inject dependencies at runtime.

For more information please refer: https://blog.angular.io/angular-v15-is-now-available-df7be7f2f4c8