Abp.io Angular UI - ListService with custom property filter

Question

Abp.io platform comes with integrated ListService that simplifies the use of ngx-datatables in Angular UI of abp platform.

The question I'm having is:

How to do filtering in ListService with some custom property?

Example: Entity_A has list of Entity_B. I want to show table of Entity_B for some given Entity_A.

So I need to somehow add id of Entity_A in this code to trigger filtering based on this Entity_A.

const dataStreamCreator = (query) => this.dataService.getList(query);

this.list.hookToQuery(dataStreamCreator).subscribe((response) => {
  this.data= response;
});

I know I could do custom filtering on UI side when I get the response (data), but in that case pagination could become an issue.

Question is how to do server side filtering.

Any help is much appreciated!

Answer 1

When you hookToQuery with ListService, it gives you the current query (filter, page, sort direction, sort column etc.) You can add anything to the query as you'd like. Check out the following example.

export class MyComponent {

   // Assign something to this variable somehow
   someFilterValue;
   data;
   
   constructor(public list: ListService) {
      const dataStreamCreator = (query) => this.dataService.getList({
         ...query,
         ...this.someFilterValue
      });
      this.list.hookToQuery(dataStreamCreator).subscribe((response) => {
         this.data= response;
      });
   }
}

Answer 2

More comprehensive answer on this: This all about Extending query with custom variables

You can find a detailed answer here