-
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
- Déplacer vers la racine du projet:cd material-table-apprenants
-
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 { }
- Nous avons également appelé la méthode
HttpClientModule pour récupérer des données distantes pour créer notre table de données.
-
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;
}
http://localhost/apprenants.php' C’est le chemin de notre fichier PHP. -
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
-
Résultat
