How to specify injections into component at creation?

Perhaps I've misunderstood the purpose of dependency injection, but I went and created a component that uses a Service to get some data:

export abstract class MyService {   
  abstract getData(): string;    
}

@Injectable({
  providedIn: 'root'
})
export class FooService extends MyService {   
  getData() { return "foo"; }  
}

@Injectable({
  providedIn: 'root'
})
export class BarService extends MyService {   
  getData() { return "bar"; }  
}

@Component({
  selector: 'my-component',
  template: `<span> {{ data }} </span>`
})
export class MyComponent implements Component {
  data: string;

  constructor(service: MyService) {
    this.data = service.getData();
  }
}

How do I get the appropriate Service, whether FooService or BarService or some other subclass of MyService injected into a MyComponent when I create it?

I was expecting that there would exist something like <my-component [service]="FooService"></my-component>, but I can't find anything like this in the docs.

From parent component providers array we can set different instance to same MyService using useExisting or useFactory

When we provide a service in a component's providers array, the instance of that service is scoped to that component and its children

@Component({
  providers:[
    {
      provide:MyService,
      useExisting:BarService //FooService
    }
  ],
})

Example Using Providers

Or

If you are using angular 14+ you could combine inject function with Environment injector to get similar behaviour

@Input() service:ProviderToken<MyService>;
  constructor(private envInj:EnvironmentInjector) {
  }

  ngOnInit() { 
    this.envInj.runInContext(()=>{
      if(this.service){
        this.data = inject(this.service).getData();
      }
    })
  }

Example Using Inject function

Reference

Jay Swaminarayan!

I guess you should do this instead, it's more simple way!

export abstract class MyService {   
  abstract getData(): string;    
}

@Injectable({
  providedIn: 'root'
})
export class FooService extends MyService {   
  getData() { return "foo"; }  
}

@Injectable({
  providedIn: 'root'
})
export class BarService extends MyService {   
  getData() { return "bar"; }  
}


@Injectable({
  providedIn: 'root'
})
export class AllServices {   
    constructor(public Foo: FooService,public Bar: BarService) {}
}


@Component({
  selector: 'my-component',
  template: `<span> {{ data }} </span>`
})
export class MyComponent implements Component {
  @Input() service: MyService;
  data: string;

  constructor(public _: AllServices) {
    this.data = this.service.getData();
  }
}

Then use it in your template as you desired.

<my-component [service]="_.Foo"></my-component>
<my-component [service]="_.Bar"></my-component>

This may not be standard way, but kind of serves the purpose as well as match your implementation.