I created a versatile material autocomplete feature that I plan to utilize for various API data such as countries, people, and positions. All of these datasets have common attributes: id, name. To address this, I defined an interface:
export interface AutocompleteValue {
id?: number,
name: string
}
I also developed services to retrieve this data, each following the same structure with a getAll() method to fetch the data. For this purpose, I utilized generic types which are extended as needed.
export class APIService<GetType> {
getAll(): Observable<T[]> {...};
}
Furthermore, I crafted a generic angular material autocomplete component to cater to all these different types.
@Component({...})
export class AutoCompleteInput<Type extends AutocompleteValue, ServiceType extends APIService<Type>> implements ControlValueAccessor, MatFormFieldControl<Type | undefined> {
...
constructor(protected service: ServiceType, ...) {}
...
}
If I wish to implement it somewhere:
export class PositionsAutoComplete extends AutoCompleteInput<GetDto, PositionService> {
constructor(
@Inject(POSITION_SERVICE_TOKEN) protected override service: PositionService, ...){}
}
To make it functional, injection tokens including @Inject(POSITION_SERVICE_TOKEN) and
export const POSITION_SERVICE_TOKEN = new InjectionToken<PositionService>('');In app.component.ts:
providers: [{ provide: POSITION_SERVICE_TOKEN, useClass: PositionService }]
Everything is working seamlessly up to this point. However, there seems to be a necessity for an injection token in AutoCompleteInput, and I am unsure why. An error message appears at the constructor of AutoCompleteInput:
No suitable injection token for parameter 'service' of class 'AutoCompleteInput'. Consider using the @Inject decorator to specify an injection token.(-992003)
Update: Similar to issues faced with generic services, simply removing the @Injectable decorator from the generic class resolves the problem. This led me to believe that @Component triggers the instantiation of the generic class, necessitating an InjectionToken. If I remove the @Component, I lose the ability to use the template within the generic class (
autocomplete-input.component.html