Créez un fil d’Ariane dynamique avec Kendo UI pour Angular

Découvrez comment offrir aux utilisateurs une navigation simple dans votre application grâce à un fil d’Ariane dynamique de Kendo UI pour Angular.

En tant que développeur, vous créez des produits et la navigation joue un rôle crucial dans l’amélioration de l’expérience utilisateur d’un produit. Si vous ne fournissez pas un moyen simple de naviguer dans l’application, les utilisateurs peuvent perdre du temps ou même ignorer des fonctionnalités importantes.

Un simple menu ne suffit souvent pas. Il se peut qu’il ne fournisse pas toujours une image claire de la position actuelle de l’utilisateur dans l’application ou qu’il ne fournisse pas un moyen confortable de revenir aux pages précédentes.

Une excellente solution consiste à fournir un fil d’Ariane. Cela permet aux utilisateurs de voir leur emplacement actuel dans l’application et de revenir facilement aux sections précédentes. Cependant, en construire un à partir de zéro pourrait s’avérer une tâche ardue.

Le progrès Interface utilisateur Kendo pour angulaire Miette de pain simplifie l’ajout d’un fil d’Ariane à votre application. Mais comment cela améliore-t-il exactement votre application ? Découvrons-le avec un scénario du monde réel.

Scénario pour un exemple d’application

Imaginez une application Web NBA qui couvre les informations sur les profils des équipes, les joueurs et les statistiques. Naviguer dans cette application peut être une tâche difficile pour les utilisateurs si vous ne fournissez pas de fil d’Ariane.

Par exemple, disons qu’un utilisateur souhaite afficher les statistiques des joueurs par équipe. Mais pour passer aux statistiques d’un autre joueur, ils doivent revenir à la page de l’équipe et sélectionner un nouveau joueur, un processus inefficace et long.

Pour résoudre ce problème, nous utiliserons l’interface utilisateur Kendo pour Angular Miette de pain composant. Il affiche sans effort un fil d’Ariane, indiquant l’emplacement actuel de l’utilisateur et facilitant la navigation vers les sections précédentes.

La mise en œuvre de cette solution implique ces étapes :

1. Installation de Kendo UI pour Angular Breadcrumb.
2. Création d’un service de fil d’Ariane.
3. Implémentation de l’interface utilisateur Kendo pour Angular Breadcrumb.
4. Rendre l’interface utilisateur Kendo pour Angular Breadcrumb dynamique à l’aide de BreadcrumbService.

Allons-y!

Installation de l’interface utilisateur Kendo pour Angular Breadcrumb

Pour installer l’interface utilisateur Kendo pour Angular Breadcrumb dans votre application, exécutez la commande suivante dans le terminal :

ng add @progress/kendo-angular-navigation

Cette commande ajoute automatiquement le NavigationModule au app.module fichier, rendant l’interface utilisateur Kendo pour Angular Breadcrumb disponible.

import { NavigationModule } from '@progress/kendo-angular-navigation';
 
@NgModule({
   imports: [
     NavigationModule
   ],
   ...
 })
 export class AppModule { }

Ne vous inquiétez pas si votre application présente des contraintes particulières, telles que des modules de fonctionnalités ou un structure sans module. L’interface utilisateur de Kendo fonctionnera toujours. Vous pouvez vérifier le instructions d’installation manuelles pour chaque groupe de composants.

Création d’un fil d’Ariane

Le BreadcrumbService est responsable de la gestion du fil d’Ariane. Il assure le suivi des éléments du fil d’Ariane et fournit des méthodes pour ajouter, mettre à jour et supprimer des éléments à mesure que l’utilisateur navigue dans l’application. Voici un aperçu du code BreadcrumbService :

import {Injectable} from '@angular/core';
 import {BehaviorSubject} from "rxjs";
 
@Injectable()
 export class BreadCrumbService {
 
    items$ = new BehaviorSubject<any>([
         {
             text: 'Home',
             title: 'home',
             path: ''
         }
     ])
 
    addChild(item: any) {
         const currentItems = this.items$.value;
         if (currentItems.some((p: any) => p.title !== item.title)) {
             this.items$.next([...currentItems, item]);
         }
     }
 
    addParent(item: any) {
         this.items$.next([item]);
     }
 
    updateBreadcrumb(item: any) {
         const currentItems = this.items$.value;
         if (currentItems.some((p: any) => p.title === item.title)) {
             currentItems.pop();
         }
         this.items$.next([...currentItems]);
     }
 }

Le BreadcrumbService a les méthodes suivantes :

• addChild(item: any): ajoute un nouvel élément de fil d’Ariane au parcours après avoir vérifié s’il existe déjà.
• addParent(item: any): remplace l’intégralité du fil d’Ariane par un nouvel élément. Il est généralement utilisé pour définir l’élément initial du fil d’Ariane.
• updateBreadcrumb(item: any): met à jour le fil d’Ariane en supprimant le dernier élément et en en ajoutant un nouveau, gardant ainsi le fil d’Ariane à jour pendant que les utilisateurs naviguent dans l’application.
• items$ property: Il s’agit d’un BehaviorSubject qui contient l’état actuel des éléments du fil d’Ariane. Abonnez-vous pour recevoir des mises à jour chaque fois que les éléments du fil d’Ariane changent.

Le service est prêt et l’interface utilisateur Kendo pour Angular Breadcrumb est installée, alors jouons avec eux.

Utilisation du composant Breadcrumb

Pour afficher l’interface utilisateur Kendo pour Angular Breadcrumb dans notre composant, abonnez-vous au items$ propriété du service Breadcrumb. Vous pouvez également gérer les événements de clic d’un utilisateur sur les éléments du fil d’Ariane.

Dans la classe du composant, injectez le BreadcrumbService et le Router. Lorsque vous cliquez sur un élément du fil d’Ariane, mettez à jour le fil d’Ariane à l’aide de BreadcrumbService. addParent et accédez au chemin spécifié à l’aide du routeur.

  #breadcrumbService = inject(BreadCrumbService);
   items$ = this.#breadcrumbService.items$;
   #router = inject(Router);
 
  public onItemClick(item: any) {
     this.#breadcrumbService.addParent(item);
     this.#router.navigate([item.path]);
   }

Dans le modèle HTML, abonnez-vous à items$ pour obtenir le fil d’Ariane et appeler onItemClick lorsqu’un élément est cliqué. Le code final ressemblera à ceci :

 <ng-container *ngIf="items$ | async as items">
         <kendo-breadcrumb
           (itemClick)="onItemClick($event)"
           [items]="items"
         ></kendo-breadcrumb>
  </ng-container>

Enregistrez les modifications et l’interface utilisateur Kendo pour Angular Breadcrumb apparaîtra avec le nom initial. Maison article.

Ajout d’éléments dynamiques avec le service Breadcrumb

Pour mettre à jour dynamiquement l’interface utilisateur Kendo pour Angular Breadcrumb lorsque les utilisateurs naviguent entre les pages, vous devez utiliser BreadcrumbService dans les composants respectifs.

Par exemple, lorsqu’un utilisateur clique sur une équipe dans le composant Equipe, vous pouvez appeler le addChild méthode du BreadcrumbService pour ajouter l’équipe au fil d’Ariane. De même, vous pouvez ajouter un joueur au parcours lorsqu’un utilisateur en sélectionne un dans le composant Player.

Le BreadcrumbService garantit que les éléments en double ne sont pas ajoutés au journal de suivi. Il garde une trace des éléments du fil d’Ariane et les met à jour en conséquence.

Le code final ressemble à ceci :

Équipes

Joueurs

Enfin, une fois ces modifications enregistrées et mises en œuvre, vos utilisateurs peuvent désormais naviguer facilement dans votre application à l’aide d’un fil d’Ariane dynamique. Enregistrez vos modifications et rechargez !

Yay! Vous disposez désormais d’un fil d’Ariane dynamique et nos utilisateurs peuvent naviguer facilement dans notre application.

Emballer

Dans cet article, vous avez découvert comment implémenter un fil d’Ariane dynamique à l’aide de l’interface utilisateur Kendo pour Angular Breadcrumb. Vous l’avez combiné avec le BreadcrumbService pour le rendre dynamique.

Le composant Kendo UI pour Angular Breadcrumb donne aux utilisateurs une compréhension claire de leur emplacement actuel dans votre application. Fournir un moyen simple de revenir aux sections précédentes améliorera considérablement l’expérience utilisateur de vos applications.

Pour plus d’exemples et d’options de personnalisation, reportez-vous au documentation officielle. N’oubliez pas que vous pouvez essayez Kendo UI gratuitement pour explorer tout son potentiel.

Vérifiez code source du didacticiel de cet article sur GitHub.