Récupérer des données dans un Angular DataTable

Objectifs

• Etre capable d'afficher des données provenant d'une base de données MySQL dans Angular

Présentation

Créer le projet Angular

• Exécuter la commande ci-dessous pour ajouter @angular/material dans votre application angular 9:
• À l'aide de NG CLI, créez un nouveau projet angulaire en exécutant la commande suivante:

ng new material-table-apprenants
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

Installer le 'Angular material'

• Après avoir créé le projet, installez le package Material dans le projet pour utiliser l'interface utilisateur du composant de table de données.

ng add @angular/material
? Choisissez un nom de thème prédéfini ou "personnalisé" pour un thème personnalisé: Indigo / Rose
? Configurer des styles de typographie de matériaux angulaires globaux? Oui
? Configurer des animations de navigateur pour le matériau angulaire? Oui

Ajouter une table de données de 'Angular material'

• Pour utiliser la table de données, ajoutez MatTableModulein dans le fichier app.module.ts:

  import { 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 { }

Mettre à jour le fichier app.component.ts

• Pour définir les colonnes de la table de données et récupérer les données en appelant la méthode getRemoteData() comme indiqué ci-dessous:

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import { HttpClient } from '@angular/common/http';
import { DataSource } from '@angular/cdk/collections';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  displayedColumns = ['cinApprenant', 'prenom', 'nom','dateNaissance','adresses','adressMail','civilite'];
  post = [];
  //dataSource:any;
  dataSource: MatTableDataSource<any>;

  constructor(private http: HttpClient){

  this.http.get('http://localhost/apprenants.php').subscribe(data => {
  this.post.push(data);

  this.dataSource = new MatTableDataSource(this.post[0]);


    }, error => console.error(error));
  }
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  ngOnInit() {

  setTimeout(() => this.dataSource.paginator = this.paginator);
  //this.paginator._intl.itemsPerPageLabel = 'Enregistrement par page.';

  }

}

export interface PeriodicElement {
  cinApprenant: number;
  prenom: string;
  nom: string;
dateNaissance: string;
adresses: string;
adressMail: string;
civilite: string;
}

Mettre à jour le fichier app.component.html

• Dans le fichier app.component.html , remplacez le code HTML ci-dessous:

<h2 style="text-align:center;padding:10px 0;">Angular 9 Material Datatable with phpmysql data</h2>
<div class="container">
    <div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" class="table table-striped">
    <!-- Position Column -->
    <ng-container matColumnDef="cinApprenant">
      <th mat-header-cell *matHeaderCellDef> cinApprenant </th>
      <td mat-cell *matCellDef="let post"> {{post.cinApprenant}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="prenom">
      <th mat-header-cell *matHeaderCellDef> prenom </th>
      <td mat-cell *matCellDef="let post"> {{post.prenom}} </td>
    </ng-container>

     <!-- Name Column -->
     <ng-container matColumnDef="nom">
      <th mat-header-cell *matHeaderCellDef> nom </th>
      <td mat-cell *matCellDef="let post"> {{post.nom}} </td>
    </ng-container>
    <!-- Weight Column -->
    <ng-container matColumnDef="dateNaissance">
      <th mat-header-cell *matHeaderCellDef>dateNaissance </th>
      <td mat-cell *matCellDef="let post"> {{post.dateNaissance}} </td>
    </ng-container>
    <ng-container matColumnDef="civilite">
      <th mat-header-cell *matHeaderCellDef>civilite </th>
      <td mat-cell *matCellDef="let post"> {{post.civilite}} </td>
    </ng-container>
    <ng-container matColumnDef="adressMail">
      <th mat-header-cell *matHeaderCellDef>adressMail </th>
      <td mat-cell *matCellDef="let post"> {{post.adressMail}} </td>
    </ng-container>
    <ng-container matColumnDef="adresses">
      <th mat-header-cell *matHeaderCellDef>adresses </th>
      <td mat-cell *matCellDef="let post"> {{post.adresses}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let post; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
</div>

PHP et MySQL

• Pour la création de la base de donnée;angulardb, la création de la table apprenants et le fichier PHP visitez l'article précédent:
Angular DataTable avec des données Php Mysql

Résultat