How to send Parameters to server through http get

Question

I am trying to learn asp.net rest api and Angular with Kendo UI. every things work well, but I want to make server side paging by sending take and skip as Get parameter to the API.

this is my implementation of API get method:

       public ResaultPage GetProducts(int skip =1, int take=20)
          {
       ResaultPage rp = new ResaultPage();
       var count= db.Products.Count<Product>();

        rp.count = count;
        IPagedList<Product> x = db.Products.OrderBy(s => 
         s.CategoryID).ToPagedList<Product>(skip, take);
        foreach (Product v in x)
        {
            rp.pr.Add(v);
        }

        return rp;}

Where ResaultPage class contain list of Product and count properity.

Here is my product-service.ts get function:

    getProducts1(skip:any, take:any ): Observable<ResaultPage> {
     let params = new URLSearchParams(); 
     params.set('Skip', skip);  
     params.set('Take', take); 
     return this.http.get<ResaultPage>(this.productsUrl)
  .pipe(
    tap(data => console.log(JSON.stringify(data))),
    catchError(this.handleError)

     );
      }

and here the product-component.ts handlers function:

         public pageChange(event: PageChangeEvent): void {
            this.gridState.skip = event.skip+10;


          this.productService.getProducts1(this.gridState.skip,
        this.gridState.take).subscribe(
           sub  => {
        this.totalCount=sub.count;
       this.products=sub.pr;
          console.log(this.products);

         });

when I run the app I get first 20 record in the same page with (1,2) paging and when I click 2 I still get the same.

I need to get only 10 per page for example, and the other 10 in page 2.

where the properity of Kendo Ui of skip =1 and for take= 10;

Answer 1

after the url you need to pass one more object called options that contains params. and you can use HttpParams to send params

getProducts1(skip:any, take:any ): Observable<ResaultPage> {
     let myparams = new HttpParams(); 
     myparams.set('Skip', skip);  
     myparams.set('Take', take); 
     return this.http.get<ResaultPage>(this.productsUrl,{params:myparams})
  .pipe(
    tap(data => console.log(JSON.stringify(data))),
    catchError(this.handleError)

     );
      }