Calling filter methods in row after the previous is finished

Question

I have a primeng turbo-table component. I need to apply multiple filters on the table.
From the parent I call
myTable.doFilter(first_values); myTable.doFilter(second_values); one after the other

On the child (turbo-table) component, the actual filter is applied like
doFilter(...filter_values...){ this.pTable.filter(...filter_values...); } The problem is that the second filter is applied before the first is finished and is causing unexpected results.
How can I call the filters once the previous filter is finished. An event is emitted once a filter is completed but I cant find a way to leverage it.

Parent.ts

     fetchList(searchData) {
            this.ratesTable.reset();
            this.ratesDataSource = [];
            this.programService.fetchList(searchData)
              .then(
                (response) => {
        
                  this.ratesDataSource = response.rates;
                  this.doTermFilter();
                  this.doLoanFilter();
                })
              .catch((error) => {
                console.error("from ts" + error);
              });
          }
        doTermFilter(){
        this.doFilter({ filterValue: _termFilters, columnField: "COL1", filterMethod: "in" });
        }
    doLoanFilter(){
        this.doFilter({ filterValue: _loanFilters, columnField: "COL7", filterMethod: "in" });
        }

child.ts(turbo-table)

     doFilter(doFilterInput: { filterValue: any[], columnField: any, filterMethod: any }) {
        this.pTable.filter(doFilterInput.filterValue, doFilterInput.columnField, doFilterInput.filterMethod);
        }

Any help is much appreciated. Thanks

Answer 1

you can use async/await as :

    fetchList(searchData) {
        this.ratesTable.reset();
        this.ratesDataSource = [];
        this.programService.fetchList(searchData)
          .then(
            (response) => {
    
              this.ratesDataSource = response.rates;
              await this.doTermFilter();
              await this.doLoanFilter();
            })
          .catch((error) => {
            console.error("from ts" + error);
          });
    }
    async doTermFilter(){
        this.doFilter({ filterValue: _termFilters, columnField: "COL1", filterMethod: "in" });
    }
    async doLoanFilter(){
        this.doFilter({ filterValue: _loanFilters, columnField: "COL7", filterMethod: "in" });
    }