Application mobile: Comment créer une table angulaire dans Angular 11|12 ?

Les tableaux HTML permettent aux concepteurs et développeurs Web d’organiser les données en lignes et en colonnes. Sur la base de différentes interfaces utilisateur pour Angulars telles que le matériel angulaire, ng-bootstrap et d’autres interfaces utilisateur, nous pouvons créer une table angulaire de différentes manières. Nous allons démontrer et créer un exemple de table angulaire de deux manières.

Dans cet article, nous allons explorer et apprendre comment créer une table de données angulaires dans Angular 11 à l’aide d’un élément de table HTML standard et d’une table de matériaux angulaire. Commençons.

Certaines des meilleures bibliothèques de tables angulaires

Il existe de nombreuses bibliothèques tierces pour créer des tables angulaires. Ces bibliothèques fournissent des fonctionnalités supplémentaires et avancées que nous n’obtiendrons pas des tableaux HTML normaux. Ces fonctionnalités avancées incluent des fonctionnalités de tri, de pagination, de réactivité et de filtrage. Ici, j’ai répertorié quelques bibliothèques de tables angulaires populaires.

Nom des bibliothèquesAvantagesRemarques
Tables de matériaux angulairesEst l’une des bibliothèques les plus populaires qui fournissent une interface utilisateur de conception de matériaux pour notre projet angulaire. La table de matériaux angulaire est un composant de la bibliothèque de matériaux et fournit toutes les fonctionnalités de table dont nous avions besoin pour notre projet, comme nous en avons discuté précédemment.La courbe d’apprentissage en profondeur et, si vous utilisez la conception matérielle pour votre interface utilisateur, tout va bien. La taille du package des bibliothèques est de 11,3 Mo si vous utilisez ces bibliothèques uniquement pour les tables, alors elle est grande.
Tableau d’amorçageEst également l’une des conceptions d’interface utilisateur les plus populaires pour un projet angulaire comme la conception de matériaux et dispose de toutes les fonctionnalités de table dont vous avez besoin.La taille des bibliothèques est de 3,87 Mo.
ngx-datatableDispose de toutes les fonctionnalités des tableaux et convient à la présentation de données volumineuses et complexes.Cette bibliothèque n’est pas mise à jour depuis quatre ans.
@swimlane/ngx-datatableDispose de toutes les fonctionnalités des tableaux et convient à la présentation de données volumineuses et complexes. Construit spécifiquement pour les tables angulaires.La taille des bibliothèques est de 3,98 Mo.
table d’amorçagePrimeNG est une collection de composants d’interface utilisateur riches pour Angular et est open source. Avoir toutes les fonctionnalités nécessaires pour une table angulaire.La taille des bibliothèques est de 24,4 Mo.
ag-grille-angulaireAG Grid est une grille de données JavaScript complète et hautement personnalisable. Pas de dépendances tierces.La taille des bibliothèques est de 1,6 Mo.
Bibliothèques de tables angulaires

Conditions préalables:
Pour créer et exécuter un projet Angular, nous avons besoin que nodejs et Angular CLI soient déjà installés dans notre système, sinon, vérifiez comment installer nodejs et angular dans Ubuntu. Angular CLI nous permet de créer un projet Angular, de générer du code d’application et de bibliothèque et d’effectuer diverses tâches de développement en cours telles que les tests, le regroupement et le déploiement. Pour installer Angular CLI, ouvrez un terminal et exécutez la commande suivante :

npm install -g @angular/cli

Configuration d’un projet pour les applications de table angulaire

Créons notre projet angulaire pour les applications de table angulaire, nommez le projet angularTables. Nous devons créer et ajouter deux composants, l’un par exemple pour le HTML normal et l’autre pour un matériau angulaire.

ng start angularTables
ng generate component regular-table
ng generate component material

Dans notre fichier app.component.html, nous avons deux boutons pour router vers nos deux composants. Modifiez le fichier app.component.html.

Nous avons besoin de données factices, nous allons d’abord créer des données factices d’étudiants afin que nous puissions les utiliser dans notre exemple de table angulaire. Créez un dossier nommé data dans le dossier assets et ajoutez un fichier nommé student.json dans le dossier data.

[
    {
        "name": "Will Smith",
        "gender": "Male",
        "country": "USA"
    },
    {
        "name": "Jackline Joy",
        "gender": "Female",
        "country": "Sri Lanak"
    },
    {
        "name": "Alu Arjun",
        "gender": "Male",
        "country": "India"
    },
    {
        "name": "Kavitha Kumar",
        "gender": "Female",
        "country": "India"
    },
    {
        "name": "John Snow",
        "gender": "Male",
        "country": "United Kingdom"
    },
    {
        "name": "Priya kanana",
        "gender": "Female",
        "country": "India"
    },
    {
        "name": "Shri Devi",
        "gender": "Female",
        "country": "Sri Lanka"
    },
    {
        "name": "Richard Roy",
        "gender": "Male",
        "country": "France"
    },
    {
        "name": "Sonu Nigam",
        "gender": "Male",
        "country": "India"
    },
    {
        "name": "Priya Dutt",
        "gender": "Female",
        "country": "USA"
    }
]

Exemple de table angulaire utilisant une table HTML standard

Si vous n’utilisez aucune bibliothèque d’interface utilisateur, le tableau HTML standard est suffisant pour afficher et organiser les données en lignes et en colonnes. Avec la balise de table, nous pouvons définir une table HTML, une balise tr pour la ligne de table, th pour définir une cellule d’en-tête de table et chaque donnée/cellule de table est définie avec une balise td.

exemple de table angulaire

Nous devons d’abord récupérer les données de la source, la source peut être un serveur ou des données statiques locales. Angular 4.3 introduit un module httpClient angulaire pour demander un appel à la requête HTTP. Dans cet exemple, nous utilisons l’API fetch. L’API Fetch est une nouvelle fonctionnalité intégrée de JavaScript qui facilite le travail avec les demandes et les réponses. Modifiez regular-table.component.ts pour récupérer nos données factices.

import { Component, OnInit } from '@angular/core';

export interface IStudent {
  name: string;
  gender: string;
  country: string;
}

@Component({
  selector: 'app-regular-table',
  templateUrl: './regular-table.component.html',
  styleUrls: ['./regular-table.component.scss']
})
export class RegularTableComponent implements OnInit {
  students: IStudent[];

  ngOnInit(): void {
    fetch('./assets/data/students.json').then(res => res.json())
      .then(json => {
        this.students = json;
      });
  }
}

Une fois que nous avons nos données en main, nous pouvons afficher les données dans notre modèle de composant. Modifiez le fichier regular-table.component.html pour afficher les données dans des tableaux.

Regular HTML Table

S.no Name Gender Country
{{ i }} {{ student.name }} {{ student.gender }} {{ student.country }}

Nous avons appliqué du style dans notre tableau, pour la ligne d’en-tête du tableau, nous avons un fond rouge et toutes les lignes paires ont un fond gris. Ajoutons du style à notre table angulaire dans le fichier regular-table.component.scss.

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  th {
    background-color: red;
    border: 1px solid red;
  }
  td {
    border: 1px solid #dddddd;
  }
  td, th {
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }

Exemple de table angulaire utilisant le matériau angulaire

Si vous utilisez l’interface utilisateur des matériaux angulaires pour votre projet, il est préférable d’utiliser une table de matériaux angulaires pour afficher nos données en lignes et en colonnes.

Installer et configurer le matériel angulaire dans notre projet

Pour utiliser la table des matériaux angulaires, nous devons ajouter un matériau angulaire à notre projet. Utilisez le schéma d’installation de l’Angular CLI pour configurer votre projet Angular Material en exécutant la commande suivante :

ng add @angular/material
exemple de table de matériau angulaire

Nous devons importer la table des matériaux angulaires et le bouton dans notre fichier app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RegularTableComponent } from './regular-table/regular-table.component';
import { MaterialComponent } from './materail/materail.component';

@NgModule({
  declarations: [
    AppComponent,
    RegularTableComponent,
    MaterialComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule,
    MatTableModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Le matériau angulaire nous permet de créer une table réactive entièrement compatible avec les PC, les tablettes et les appareils mobiles. Pour les données du tableau, nous utilisons les mêmes données factices des élèves. Modifions le fichier material.component.ts pour récupérer les données de notre source. En réalité, les données du projet peuvent provenir du serveur, mais dans notre cas, elles proviennent de données JSON statiques.

import { Component, OnInit } from '@angular/core';

export interface IStudent {
  name: string;
  gender: string;
  country: string;
}

@Component({
  selector: 'app-materail',
  templateUrl: './materail.component.html',
  styleUrls: ['./materail.component.scss']
})
export class MaterailComponent implements OnInit {
  displayedColumns = ['SNo', 'name', 'gender', 'country'];
  dataSource: IStudent[];

  ngOnInit(): void {
    fetch('./assets/data/students.json').then(res => res.json())
      .then(json => {
        this.dataSource = json;
      });
  }
}

Une fois que nous avons nos données en main, nous pouvons afficher les données dans notre modèle de composant matériel. Modifiez le fichier material.component.html pour afficher les données dans des tableaux.

Angular material table

S.no {{ i }} Name {{ element.name }} Gender {{ element.gender }} Country {{ element.country }}

Modifiez material.component.scss pour que la largeur du tableau soit complète et appliquez un arrière-plan à l’en-tête du tableau à l’aide du style.

table.mat-table {
    display: table;
    width: 100%;
    th {
        background-color: red;
        color: white;
    }
}

Table de bootstrap angulaire

Le composant de table Angular Bootstrap est une table réactive qui nous permet de filtrer, de paginer et de la table peut avoir une belle interface utilisateur en utilisant le nom de classe de style bootstrap. Dans notre exemple précédent, nous avons un exemple complet sur la table de bootstrap angulaire avec filtre et pagination. Consultez ici notre exemple à ce sujet.

Conclusion
Dans ce didacticiel, nous avons démontré deux façons de créer une table angulaire à l’aide d’une table HTLM standard et d’une table de matériaux angulaire.

Articles Liés

#Comment #créer #une #table #angulaire #dans #Angular