How can I inject an Angular service into a custom class?

Question

I have this custom class called SortState that represents sorting and paging on a table of records. Now I want to make that class talk to a service that displays a loading indicator. Apparently you can't use regular Angular dependency injection with classes, only with components. The answers I've found for working around this generally say to use something called ReflectiveInjector, which seems to have been replaced with Injector.

So I tried something like this:

export class SortState {
  private loader: LoadingService;

  constructor(state: Partial<SortState>) {
    const injector = Injector.create({providers: [{provide: LoadingService, deps: []}]});
    this.loader = injector.get(LoadingService);
    ...
  }
  ...
}

And it sort of seems to work, but I think it's creating its own instance of LoadingService, and I need it to use a singleton. So I figure maybe I need to use the providers array in the main AppModule, but I haven't been able to figure out the syntax to make that work.

You need to pass it an Injector when instantiating your SortState class. — Matthieu Riegler
– Matthieu Riegler, Commented May 21 at 0:09

Andrei · Accepted Answer · 2025-05-21 07:29:52Z

0

Angular inject will work, but it should be used inside of injection context. I.e. class constructor should be called inside of injection context.

export class SortState {
  private loader = inject(LoadingService);

  constructor(state: Partial<SortState>) {
    ...
  }
  ...
}

//component
class MyDependantComponent {
// next line will be instantiated during comp instantiation
// inside of injection context already
  sortState = new SortState({...}); 

// OR
  injector = inject(Injector);
  someMethod() {
    const sortState = runInInjectionContext(this.injector, () => new SortState({...}));
    // doSomething

  }
}

answered May 21 at 7:29

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Luke Bretscher May 21 at 16:01

I tried putting in private loader = inject(LoadingService); like you said. The IDE said inject wasn't defined, so I tried it with Inject instead. It didn't really work...when I tried console.log(this.loader) in the constructor, it said it was a function named ParamDecorator, not the LoadingService

Andrei May 21 at 18:57

it should be inject with a small. import { inject } from '@angular/core';

Luke Bretscher May 22 at 18:23

I tried that and I get this:

RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext.

That's even if I put this.loader = inject(LoadingService) inside the constructor. Are you saying that I have to run the constructor itself inside an injection context?

Andrei May 22 at 18:56

"Are you saying that I have to run the constructor itself inside an injection context?" That is exactly what I wrote in the answer

Luke Bretscher May 22 at 21:51

Alright just making sure

MoxxiManagarm · Accepted Answer · 2025-05-21 12:34:31Z

0

Make SortState a service, but provide it on component level. This way SortState is created for every component instance and can inject other services.

@Injectable() // empty instead of the common "providedIn: root"
export class SortState {
  private loader = inject(LoadingService); // should be fine now

  setInitialState(state: Partial<SortState>) { // not a constructor anymore
    ...
  }
  ...
}

@Component({
  providers: [SortState], // provide your SortState here
  ...
})
class MyDependantComponent {
  sortState = inject(SortState); // don't forget to set the initial (setInitialState)

Depending on your UseCase(s) you might want to think about migrating to a ngrx ComponentStore https://ngrx.io/guide/component-store?gad_source=1&gad_campaignid=22440788858&gbraid=0AAAAA_UZAyJHx15u2sO_2twCs1x9pHYsQ&gclid=EAIaIQobChMIir38-si0jQMVXp2DBx2vJR9hEAAYASAAEgISzfD_BwE

answered May 21 at 12:34

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

2 Comments

Luke Bretscher May 21 at 15:57

I'm not sure this will work for me; some of my components need multiple SortState instances.

MoxxiManagarm May 23 at 6:53

@LukeBretscher that sounds like your component is too big. Cutting it in smaller parts and subcomponent can help you with that.

Collectives™ on Stack Overflow

How can I inject an Angular service into a custom class?

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related