Using Typescript for Angular, I am dealing with a table that has filters in the form of drop downs. The data for each filter is retrieved asynchronously from the backend. My challenge is to load the data for all filters while setting default values based on query string parameters. To achieve this, I need to subscribe to route.queryParams.
Due to the asynchronous nature of the calls and my limited familiarity with Typescript, I am struggling to implement this correctly.
Below is an excerpt of my code:
ngOnInit(): void {
this._service.getTypes() // Retrieve types data for filter1
.subscribe((result) => {
this.types = result.items;
this._route // Subscribe to queryParams and set selected value for filter1
.queryParams
.subscribe(params => {
if (params['Type'] != undefined) {
this.selectedId = parseInt(params['LoadType']);
}
});
});
this._service.getClients() // Retrieve data for filter2
.subscribe((result) => {
this.clients = result.items;
this._route // Set default value from query string for filter2
.queryParams
.subscribe(params => {
if (params['ClientCode'] != undefined) {
this.client = params['ClientCode'];
}
});
});
...
I find myself subscribing multiple times to queryParams for each filter, which I suspect is not the correct approach.