Comment utiliser API Httpresource angulaire dans Kendo UI Grid

Apprenez à utiliser l’interface utilisateur Kendo pour la grille angulaire avec l’API Httpresource angulaire.

Dans cet article, nous apprendrons à utiliser l’API Angular Httpresource avec les progrès Kendo Ui pour Composant de grille angulaire. Nous allons récupérer les données de l’API à l’aide de la nouvelle fonctionnalité angulaire httpresource, puis afficher les données de l’interface utilisateur Kendo pour la grille angulaire.

Cet article suppose que vous avez déjà créé une application angulaire de version 20.

Pour cet article, nous utiliserons le point de terminaison de l’API qui renvoie une liste de produits comme indiqué dans l’image ci-dessous.

Pour représenter ce type de réponse, définissons une interface dans l’application angulaire.

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

Nous utiliserons l’API Angular 20 Httpresource pour récupérer les données de l’API. Le HTTPresource étend l’API de ressources en utilisant le httpclient sous le capot, fournissant un moyen transparent de faire des demandes HTTP tout en prenant en charge les intercepteurs et les outils de test existants.

• Httpresource est construit au-dessus de la primitive des ressources.
• Il utilise HttpClient comme chargeur.
• Il sert d’abstraction pour @ angulaire / commun / http.
• Il fait des demandes HTTP via la pile HTTP d’Angular.
• Il fonctionne avec les intercepteurs.

Vous pouvez en savoir plus sur l’API Httpresource en détail ici: Commencer avec l’API Httpresource dans Angular.

Dans l’application, vous pouvez récupérer des données à l’aide de l’API Httpresource comme indiqué ci-dessous:

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

L’API HTPPRESORCE renvoie un WritableeResource et possède des propriétés en lecture seule telles que:

• Valeur
• Statut
• Erreur
• téléchargement

Tous sont des types de signaux, ce qui signifie que vous pouvez les suivre à l’intérieur d’un effet.

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

À ce stade, lorsque vous exécutez l’application, vous devriez voir les données renvoyées de l’API affichées dans la console du navigateur.

Ensuite, nous afficherons les produits à l’aide de l’interface utilisateur Kendo pour la composante de grille angulaire. Travailler avec Kendo ui pour angulaireAjoutez d’abord la bibliothèque Kendo UI au projet angulaire. Exécutez la commande ci-dessous dans le dossier du projet angulaire.

ng add @progress/kendo-angular-grid

Cette commande vous invite à confirmer que vous souhaitez procéder. Appuyez sur Y pour installer l’interface utilisateur Kendo pour le package de grille angulaire dans le projet angulaire.

Une fois l’installation terminée avec succès, vous remarquerez une référence à Kendo UI pour Angular ajouté dans le fichier package.json.

De plus, dans le fichier angular.json, vous pouvez voir une entrée pour l’interface utilisateur de Kendo Thème par défaut.

Pour résumer, le ng add La commande les exécute:

• Ajoute le @progress/kendo-angular-grid Package en tant que dépendance au fichier package.json
• Ajoute toutes les dépendances de pairs requises au fichier package.json
• Ajoute le thème par défaut de l’interface utilisateur de Kendo dans le fichier angular.json

Pour utiliser Kendo UI Grid, importez d’abord le composant Kendo_Grid.

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

Ensuite, passez-le au tableau des importations:

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

Le tout ensemble, le composant qui utilise avec la grille de l’interface utilisateur de Kendo devrait ressembler:

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`);
}

Maintenant, sur le modèle, nous pouvons utiliser la grille Kendo UI comme indiqué ci-dessous.

@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>
}

L’utilisation de la grille Kendo UI est simple. Tout d’abord, nous vérifions si la ressource des produits a été résolue avec succès. Ensuite, nous configurons la grille pour mapper ses colonnes aux propriétés du modèle de produit.

En tant que sortie, vous pouvez voir les 100 produits rendus dans la grille de l’interface utilisateur Kendo comme indiqué dans l’image ci-dessous:

Ensuite, activons la pagination côté client. Ceci est simple dans la grille Kendo UI. Définissez les propriétés suivantes:

1. Pagible
2. pages

@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>
}

Maintenant, lorsque vous exécutez l’application, vous verrez que la pagination côté client est activée dans la grille Kendo UI.

Ensuite, activons le tri côté client. Ceci est simple dans la grille de l’interface utilisateur de Kendo – établissez le Sortable propriété à vrai.

@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>
}

Maintenant, lorsque vous exécutez l’application, vous verrez que le tri côté client est activé dans la grille Kendo UI.

Comme vous pouvez le voir, l’intégration de l’API Httpresource angulaire avec la grille Kendo UI dans une application angulaire est simple. Dans les prochains articles, nous explorerons comment implémenter la pagination et le tri du côté serveur à l’aide de l’API HTTPResource.

J’espère que vous avez trouvé cet article utile, merci pour la lecture.

Prêt à essayer Kendo UI pour Angular? Il est livré avec un essai gratuit de 30 jours!

Essayer maintenant