Within Angular 12 lies a simplified component structured as follows:
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.less']
})
export class ListComponent implements OnInit {
@Input() dataType: string;
items: Item[] = [];
constructor(private ds: DataStorageService) { }
ngOnInit(): void {
this.items = this.ds.fetchAll();
}
The simplified version of my DataStorageService is outlined below:
@Injectable({providedIn: 'root'})
export class DataStorageService {
private readonly dataType: string;
private readonly apiEndpoint: string;
constructor(dataType: string, private http: HttpClient) {
this.dataType = dataType;
this.apiEndpoint = environment.config.urlLogin + '/api/' + this.dataType;
}
fetchAll(string) {
return this.http.get(this.apiEndpoint) as Observable<Item[]>;
}
I aim to utilize
<app-list data-type="products">
And incorporate products as a value within my DataStorageService - without the need to pass it in every function that relies on it.
I have attempted to inject it using useValue, and the notion of utilizing a ServiceFactory has crossed my mind - but I find myself at an impasse and uncertain on how to proceed further.
This is especially challenging since Item serves as my generic Type with interface extensions centered around the dataType string, such as Product extends Item for the products dataType.