Tutoriel Angular8 + PrimeNG – Implémenter un composant de table de données


Aperçu

Dans ce tutoriel, nous utiliserons le composant PrimeNG DataTable. Il est utilisé pour afficher les données sous forme de tableau. Dans les prochains tutoriels, nous réaliserons l’implémentation de l’édition dans les cellules et les lignes.

Pile technologique

Nous utiliserons:

  • Angulaire 8.
  • PrimeNG.

Didacticiel vidéo

la mise en oeuvre

Voici la structure de fichiers finale de notre projet:

Structure de fichier PrimeNG DatatableProject

Structure de fichier PrimeNG DatatableProject

Développer une application angulaire

Tout d’abord, installez NodeJS. Allez au Page de téléchargements NodeJS et téléchargez le programme d’installation. Démarrez le programme d’installation et installez NodeJS.

Installez la CLI angulaire à l’aide de la commande suivante:

Ensuite, créez un nouveau projet angulaire nommé “bibliothèque-données”.

Allez dans le projet Angular créé et démarrez le projet:

Accédez à la page d’accueil et vérifiez que tout fonctionne initialement.

Utiliser les composants PrimeNG

Tout d’abord, installez PrimeNG.

Vous devriez voir quelque chose comme ça comme une sortie dans votre terminal:

Installation de PrimeNG Datatable

Installation de PrimeNG Datatable

Ensuite, installez Prime Icons avec la commande suivante:

Installation des icônes Prime Datatable

Installation des icônes Prime Datatable

Ensuite, installez Font Awesome

Installation impressionnante de polices de données

Font Awesome Install

Maintenant, vous pouvez installer le CDK angulaire:

PrimeNG Datatable Angular CDK

PrimeNG Angular CDK

Si nous allons maintenant package.json, nous verrons les dépendances PrimeNG suivantes:
Dépendances du package PrimeNG

Dépendances du package PrimeNG

Ouvrez le angular.json et ajoutez ce qui suit dans la section des styles:

Feuille de style PrimeNG

Feuille de style PrimeNG

Créez un nouveau composant nommé displayBooks, comme suit:

Composant PrimeNG créé

Composant PrimeNG créé

dans le app-routing.module.ts, ajoutez l’itinéraire en tant que livres pour notre nouveau Books composant.

Aussi, dans le app.component.html fichier, ne conservez que le code ci-dessous et supprimez tout ce qui reste:

Démarrez l’application en utilisant:

Si nous allons maintenant à localhost: 4200 / livres, nous voyons ce qui suit:

Composant PrimeNG Books

Composant PrimeNG Books

Ajout du composant PrimeNG DataTable dans une application angulaire

Pour ajouter un composant PrimeNG dans Angular, nous suivrons ces étapes:

Ajouter un flux de travail PrimeNG Component

Ajouter un composant PrimeNG

Nous allons créer les modules de composants et de services comme suit-

Ajouter un composant et un service PrimeNG Datatable

Composant et service datatable

Ajoutez le module PrimeNG Table au app.module.ts fichier.

Nous allons créer un service nommé, BookService, qui recevra le Book données en effectuant un appel HTTP. Actuellement, nous n’effectuerons l’appel HTTP vers aucun service REST exposé. Au lieu de cela, nous l’obtiendrons à partir d’un fichier JSON nommé books.json, que nous allons créer dans le les atouts dossier.

le book.json contiendra les éléments suivants:

Créez le BookService comme suit:

Ajoutez ce qui suit à BookService:

Pour utiliser le httpClient, nous devrons ajouter le HttpClientModule à la app-module.ts fichier.

Modifier le book-data pour obtenir les données de sauvegarde du PrimeNG DataTable en appelant le service ci-dessus:

Utilisez la balise p-table dans le book-data.component.html fichier:

Si nous allons maintenant à localhost: 4200 / bonjour, nous voyons ce qui suit:
Sortie finale de PrimeNG DataTable

Sortie finale de PrimeNG DataTable
Close Menu