How to Use Angular httpResource API in Kendo UI Grid

Learn to use the Kendo UI for Angular Grid with the Angular httpResource API.

In this article, we will learn to use the Angular httpResource API with the Progress Kendo UI for Angular Grid component. We will fetch data from the API using the new Angular feature httpResource and then display the data in the Kendo UI for Angular Grid.

This article assumes that you have already created an Angular version 20 application.

For this article, we will use the API endpoint that returns a list of Products as shown in the image below.

To represent this response type, let’s define an interface in the Angular application.

export interface IProductModel {
    id: string;
    name: string;
    description: string;
    price: number;
    category: string;
}

We will use the Angular 20 httpResource API to fetch data from the API. The httpResource extends the Resource API by using the HttpClient under the hood, providing a seamless way to make HTTP requests while supporting interceptors and existing testing tools.

• httpResource is built on top of the resource primitive.
• It uses HttpClient as its loader.
• It serves as an abstraction for @angular/common/http.
• It makes HTTP requests through Angular’s HTTP stack.
• It works with interceptors.

You can read more about the httpResource API in detail here: Getting Started with the httpResource API in Angular.

In the application, you can fetch data using the httpResource API as shown below:

products = httpResource<IProductModel[]>(() => `http://localhost:3000/product`);

The htppResource API returns a WritableResource and has read-only properties such as:

• Value
• Status
• Error
• isLoading

All of them are signal types, which means you can track them inside an effect.

constructor() {
    effect(() => {
      console.log('products', this.products.value());
      console.log('products error', this.products.error()?.message);
      console.log('products satus', this.products.status());
    })
  }

At this point, when you run the application, you should see the data returned from the API displayed in the browser console.

Next, we will display products using the Kendo UI for Angular Grid Component. To work with Kendo UI for Angular, first add the Kendo UI library to the Angular project. Run the command below in the Angular project folder.

ng add @progress/kendo-angular-grid

This command prompts you to confirm that you want to proceed. Press Y to install the Kendo UI for Angular Grid package in the Angular project.

After the installation completes successfully, you’ll notice a reference to Kendo UI for Angular added in the package.json file.

Also, in the angular.json file, you can see an entry for the Kendo UI Default theme.

To summarize, the ng add command performs these:

• Adds the @progress/kendo-angular-grid package as a dependency to the package.json file
• Adds all required peer dependencies to the package.json file
• Adds the Kendo UI Default theme in the angular.json file

To use Kendo UI Grid, first import the component KENDO_GRID.

import { KENDO_GRID } from '@progress/kendo-angular-grid';

Next, pass it to the imports array:

@Component({
  selector: 'app-root',
  imports: [KENDO_GRID],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})

Putting it all together, the component that uses with Kendo UI Grid should look like:

import { httpResource } from '@angular/common/http';
import { Component, effect } from '@angular/core';
import { IProductModel } from './product-model';
import { KENDO_GRID } from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-root',
  imports: [KENDO_GRID],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})
export class App {
  protected title = 'Kendo UI Grid Demo';
  constructor() {
    effect(() => {
      console.log('products', this.products.value());
      console.log('products error', this.products.error()?.message);
      console.log('products satus', this.products.status());
    })
  }
  products = httpResource<IProductModel[]>(() => `http://localhost:3000/product`);
}

Now, on the template, we can use the Kendo UI Grid as shown below.

@if(products.value()){
  <kendo-grid [data]="products.value() || []">
    <kendo-grid-column field="id" title="ID"> </kendo-grid-column>
    <kendo-grid-column field="name" title="Name"> </kendo-grid-column>
    <kendo-grid-column field="description" title="Description"> </kendo-grid-column>
    <kendo-grid-column field="price" title="Price"> </kendo-grid-column>
     <kendo-grid-column field="category" title="Category"> </kendo-grid-column>
</kendo-grid>
}
@else {
  <p>Loading products...</p>
}

Using the Kendo UI Grid is straightforward. First, we check whether the products resource has been successfully resolved. Then, we configure the grid to map its columns to the properties of the Product model.

As output, you can see all 100 products rendered in the Kendo UI Grid as shown in the image below:

Next, let’s enable client-side pagination. This is straightforward in the Kendo UI Grid. Set the following properties:

1. Pageable
2. pageSize

@if(products.value()){
  <kendo-grid [kendoGridBinding]="products.value() || []" 
    [pageable]="true" 
    [pageSize]="5">>
    <kendo-grid-column field="id" title="ID"> </kendo-grid-column>
    <kendo-grid-column field="name" title="Name"> </kendo-grid-column>
    <kendo-grid-column field="description" title="Description"> </kendo-grid-column>
    <kendo-grid-column field="price" title="Price"> </kendo-grid-column>
     <kendo-grid-column field="category" title="Category"> </kendo-grid-column>
</kendo-grid>
}
@else {
  <p>Loading products...</p>
}

Now, when you run the application, you’ll see that client-side pagination is enabled in the Kendo UI Grid.

Next, let’s enable client-side sorting. This is straightforward in the Kendo UI Grid—set the Sortable property to true.

@if(products.value()){
  <kendo-grid [kendoGridBinding]="products.value() || []" 
    [pageable]="true" 
    [pageSize]="5"
    [sortable]="true">
    <kendo-grid-column field="id" title="ID"> </kendo-grid-column>
    <kendo-grid-column field="name" title="Name"> </kendo-grid-column>
    <kendo-grid-column field="description" title="Description"> </kendo-grid-column>
    <kendo-grid-column field="price" title="Price"> </kendo-grid-column>
     <kendo-grid-column field="category" title="Category"> </kendo-grid-column>
</kendo-grid>
}
@else {
  <p>Loading products...</p>
}

Now, when you run the application, you’ll see that client-side sorting is enabled in the Kendo UI Grid.

As you can see, integrating the Angular httpResource API with the Kendo UI Grid in an Angular application is straightforward. In future posts, we will explore how to implement server-side pagination and sorting using the httpResource API.

I hope you found this post helpful—thank you for reading.

Ready to try Kendo UI for Angular? It comes with a free 30-day trial!

Try Now