Angular 6. Is it possible to inject service by condition?

Question

In my angular app (with the angular material) I have a filter panel and I want besides select to be able to make autocomplete (user input value and it sends to the back-end, whereby $regexp query we find the match in MongoDB collection). But to do it I need manually inject service into filters component. I didn't find any info on how to do it.

I need something like this:

if (filters.serviceName) {
  injector.inject(serviceName);
}

injector.get(serviceName).find(searchQuery);

Is it possible? Thanks.

Which version of angular are you using? – Amit Chigadani Aug 31 '18 at 07:06 — Amit Chigadani, Aug 31 '18 at 07:06
I'm using version 6.1 – Alex Bryanskiy Aug 31 '18 at 07:08 — Alex Bryanskiy, Aug 31 '18 at 07:08

score 27 · Accepted Answer · answered Aug 31 '18 at 07:11

27

Yes you can inject service dynamically using injector.get()

Sample code :

import { Component, Injector } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  myService : MyService;

  constructor(private injector : Injector){
    if(true){ // some condition
      this.myService = injector.get<MyService>(MyService);
    }

    console.log(this.myService.prop1)
  }
}

Working demo

answered Aug 31 '18 at 07:11

Amit Chigadani

28,482
13
80
98

Hi Amit, Is it possible to do it on the root, we have environment specific services. – Krish Apr 06 '20 at 16:46
What do you mean by root? AppComponent? If so, yes. Above example does the same. – Amit Chigadani Apr 06 '20 at 16:49

score 2 · Answer 2 · answered Dec 14 '21 at 05:55

Another variant use @Inject decorator, if condition compute outside current class.

export interface IService {
  test: string;
}


@Injectable()
export class Serivce1 implements IService {
  test: 'service1';
}

@Injectable()
export class Serivce2 implements IService {
  test: 'service2';
}

const CONDITION = Math.random() > 0.5;
    
@Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
})
export class AppComponent {
   name = 'Angular ' + VERSION.major;
    
   constructor(@Inject(CONDITION ? Serivce1 : Serivce2) private service: IService) {
        console.warn(service);
   }
}

Angular 6. Is it possible to inject service by condition?

2 Answers2

Linked