Utilisation du datatable avec Angular
Utilisation du datatable avec Angular
-
Objectifs
- Etre capable d’utiliser le composant Material DataTable d’angular
-
Présentation
- Angular Material fournit un composant génial de table de données(DataTable) complet qui peut être facilement implémenté dans une application Angular. Le composant d’interface utilisateur datatable fourni par Material est basé sur la conception matérielle fournit de nombreuses fonctionnalités telles que la pagination, les colonnes triables, les données de filtre, les colonnes gelées et les lignes, etc.
- Dans cette partie, nous nous concentrerons sur l’implémentation des tableaux de données. Bien sûr, ce tutoriel suppose à nouveau que vous connaissez la bibliothèque de matériaux angulaires en général et que vous savez comment configurer un projet angulaire et installer la bibliothèque de matériaux angulaires dans ce projet.
- Si vous êtes nouveau dans le matériau angulaire, veuillez d’abord consulter la première partie de cette série:Introduction au DataTable
- Si vous avez des commentaires, des questions ou des remarques générales concernant cet article, n’hésitez pas à nous contacter.
-
Préparer le projet Angular
- Pour démontrer l’utilisation des tables de données, ajoutons d’abord un nouveau composant au projet à l’aide de la CLI angulaire:
$ ng g component components/usertable- Cette commande génère les nouveaux fichiers suivants dans la structure de votre projet:
- src / app / components / usertable / usertable.component.css
- src / app / components / usertable / usertable.component.ts
- src / app / components / usertable / usertable.component.html
- src / app / components / usertable / usertable.component.spec.ts
-
Installer les dépendances de matériaux angulaires
- Pour utiliser le composant de table de données de matériaux angulaires(DataTable for Angular ), nous devons installer les dépendances de matériaux angulaires à l’aide de la commande npm suivante.
-
Ajouter un service au projet Angular
- Pour ajouter un service utiliser la commande suivante:
$ ng g service services/user - Cette commande ajoute les nouveaux fichiers suivants au projet:
- src / app / services / user.service.ts
- src / app / services / user.service.spec.ts
-
Importer les les dépendances dans le fichier module.ts
- Nous devons importer toutes les dépendances liées dans le fichier module.ts comme décrit ci-dessous.
- Nous utiliserons le service HttpClient (qui fait partie de HttpClientModule) dans UserService pour demander des données utilisateur à un service Web.
- Nous avons également ajouté les modules au tableau des importations de @NgModule :
npm install --save @ angular/material@angular/cdk@angular/animationsimport { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [ AppComponent ],
imports: [
BrowserModule,
MatPaginatorModule,
MatTableModule,
BrowserAnimationsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }