Filter in a server-side context

[fallais]

Hello, I want to use the filter feature, but in a server-side context. How can I acheive that please ?

I tried to do this :

export class EventsListComponent implements OnInit {
  events: Event[] = [];
  page: number = 1;
  perPage: number = 20;
  total: number = 0;
  search: string = "";
  
  formGroup: FormGroup;
  subject: Subject<any> = new Subject();

  constructor(
    private eventService: EventService,
    private notificationService: NotificationsService,
    private formBuilder: FormBuilder
  ) {}

  ngOnInit() {
    this.listEvents(1, this.perPage);

    this.formGroup = this.formBuilder.group({
      search: [ '' ]
    });

    this.subject
      .pipe(debounceTime(500))
      .subscribe(value => {
        this.search = this.formGroup.get('search').value
        this.listEvents(1, this.perPage, this.search)
      });
  }

  pageChanged(event){
    this.page = event;
    this.listEvents(this.page, this.perPage);
  }

  onKeyUp(): void {
    this.subject.next();
  }

  listEvents(page: number, perPage: number, search?: string): void {
    this.eventService.list(page, perPage, search).subscribe(
      (resp: EventResponse) => {
        this.events = resp.events;
        this.total = resp.total;
      },
      err => {
        this.notificationService.error('Error while listing the events', err.error, {
          timeOut: 5000,
          showProgressBar: true,
          pauseOnHover: true,
          clickToClose: false,
          clickIconToClose: true
        })
      });
  }

But it is not working, and the URL is called twice, each time. What am doing wrong ? An example on the documention could be awesome to be honest ! I am pretty sure this use case is very common ! :)

Thanks :)

[michaelbromley]

Hi,

But it is not working, and the URL is called twice, each time.

Please define precisely what you mean by "not working". In general, server-side filtering is implemented on the server and is not something that the Angular app would know about.

[fallais]

Hi, thanks for helping me.

Here is my service, you will understand better.

export class EventService {
  private eventsURL: string = environment.baseURL + '/api/private/events';

  constructor(
    private http: HttpClient
  ) {}

  // list returns all the indicators with given criterias.
  list(page: number, perPage: number = 20, search?: string): Observable<EventResponse> {
    let params = new HttpParams().set("page", page.toString()).set("per_page", perPage.toString());

    if (search != "") {
      params.set("search", search)
    }    

    return this.http.get<EventResponse>(this.eventsURL, {params: params});
  }
}

It is not working as I do not see the correct URL being called, and moreover, URL is called twice.. it seems that it is called be my own subscription to input field and by the pageChanged..

By filtering, I mean giving the API the parameter search, which is expected by my API.

[michaelbromley]

ok, thanks for clarifying.

I am not sure why the search value is not being passed to your API in the url of the http call. Is the correct value present inside the list() method? Is the form control in your template being correctly bound to the formGroup from your component class? I would start by checking these.

As an aside - the formGroup has a property, valueChanges property which is an observable which emits whenever the value of the form changes. You can use this directly instead of using a separate Subject. E.g.

this.formGroup.get('search').valueChanges.pipe(
  //...
).subscribe()

Regarding the issue of the http call firing twice, I cannot really help here without a reproduction of the issue, based on the stackblitz demo: https://stackblitz.com/edit/angular-e1f9hq - fork it an share a reproduction and I'll be able to dig in a bit.