Dans cet article, je vous montre comment utiliser Angular Material et NGRX pour avoir un tableau dynamique comme celui sur mon portfolio en ligne [weroamba.com](https://weroamba.com/#/home). Angular Material vise à fournir aux développeurs le meilleur design UI/UX qu'ils puissent imaginer. Il est responsive et adapté aux mobiles, ce qui permet de construire des applications et des pages Web attrayantes en respectant les principes de conception Web modernes. NgRx Store fournit une gestion d'état réactive pour les applications angulaires inspirées de Redux. Il offre plusieurs avantages en simplifiant l'état de votre application en objets simples, en appliquant un flux de données unidirectionnel. Pour cet exemple j'utilise la version 11 d'Angular. ## Démonstration ![Démonstration du tableau expandable](https://lh6.googleusercontent.com/rCFWoC9IV8D4nWwmueguZ_s0z_d6Uc79f5U-6MwNQaQrYxV-VlvZKG_Wigmfi9hOcrmh9HB4J8pBGM90yR1NHWFlC85oZDac6GCdpvVXoI0MUU1fYlhlOdrmTSvQvqzlP8wEjnhyP4mZwI5lW-GhoB4b-H_gOKxnK7m8wLwghdf5l_S5xl4V88Ia71c1JQ) ![Vue étendue du tableau](https://lh4.googleusercontent.com/BHmCLFjPGgE7ri1zwmi7rU_ZwuSZUtuzQlXEwiISqACkodjEk7-L9EAB5BcRMGs6e3tkph9vN6Y8svpF1tmpsEImc0Q3Mk5O9Ye4PQroKv4VKwUzJvH5JEvPDkAd5Jo-LdYqM4mnjYLwTDcX4UpA7Aun-TbJc8cz49RhiZT2GuPOAF69aJAIG49EsYC_Zw) ## Installation des packages NGRX Nous allons d'abord installer nos packages de NGRX : ```bash ng add @ngrx/store ng add @ngrx/effects ng add @ngrx/store-devtools ``` ## Configuration de NGRX Dans notre dossier shared, nous créons un dossier store et nous ajoutons les fichiers suivants : ### 1. Actions (certifications.actions.ts) Dans notre fichier certifications.actions.ts, nous ajoutons l'élément suivant : ```typescript import { Action } from "@ngrx/store"; export const GET_CERTIFICATIONS_REQUEST = '[GET_ALL] Certifications Request'; export const GET_CERTIFICATIONS_SUCCESS = '[GET_ALL] Certifications Success'; export const GET_CERTIFICATIONS_ERROR = '[GET_ALL] Certifications Error'; /**************************************** * GET all certifications ****************************************/ export class GetAllCertificationsRequest implements Action { readonly type = GET_CERTIFICATIONS_REQUEST; constructor(public payload?: string) { } } export class GetAllCertificationsSuccess implements Action { readonly type = GET_CERTIFICATIONS_SUCCESS; constructor(public payload: any[]) { } } export class GetAllCertificationsError implements Action { readonly type = GET_CERTIFICATIONS_ERROR; constructor(public payload: Error) { } } ``` ### 2. Reducers (certifications.reducers.ts) Dans notre fichier certifications.reducers.ts nous ajoutons le code suivant : ```typescript import { createFeatureSelector, createSelector } from '@ngrx/store'; import * as certificationActions from './certifications.actions'; export interface State { data: any; action: string; done: boolean; error?: Error; } const initialState: State = { data: [], action: null, done: false, error: null }; export function reducer(state = initialState, action: {type: string; payload?: any;}): State { // ...state create immutable state object switch (action.type) { /************************* * GET all certifications actions ************************/ case certificationActions.GET_CERTIFICATIONS_REQUEST: return {...state, action: certificationActions.GET_CERTIFICATIONS_REQUEST, done: false}; case certificationActions.GET_CERTIFICATIONS_SUCCESS: return {...state, data: action.payload, done: true}; case certificationActions.GET_CERTIFICATIONS_ERROR: return {...state, done: true, error: action.payload}; } return state; } /************************* * SELECTORS ************************/ export const getCertificationsState = createFeatureSelector('certifications'); export const getAllCertifications = createSelector(getCertificationsState, (state: State) => state.data); ``` ### 3. Effects (certifications.effects.ts) Dans notre fichier certifications.effects.ts nous ajoutons aussi le code suivant : ```typescript import { Injectable } from "@angular/core"; import { Actions, Effect, ofType } from "@ngrx/effects"; import { Action } from "@ngrx/store"; import { Observable } from "rxjs"; import * as certificationActions from './certifications.actions'; import { catchError, map, switchMap } from "rxjs/operators"; import { CertificationService } from "../service/certification.service"; import { GetAllCertificationsError, GetAllCertificationsSuccess } from './certifications.actions'; @Injectable() export class CertificationEffects { constructor(private actions$: Actions, private certificationService: CertificationService) { } @Effect() getAllCertifications$: Observable = this .actions$.pipe( ofType(certificationActions.GET_CERTIFICATIONS_REQUEST), map((action: certificationActions.GetAllCertificationsRequest) => action.payload), switchMap((queryParams) => this.certificationService.getAllCertifications(queryParams)), map(result => new GetAllCertificationsSuccess(result)), catchError((err) => [new GetAllCertificationsError(err)]) ); } ``` ## Configuration du module principal Dans notre module principal nous ajoutons les éléments suivants : ```typescript import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { RouterModule } from '@angular/router'; import { AppRoutingModule } from './app.routing'; import { AppComponent } from './app.component'; import { NavbarComponent } from './shared/navbar/navbar.component'; import { FooterComponent } from './shared/footer/footer.component'; import { ComponentsModule } from './components/components.module'; import { ExamplesModule } from './examples/examples.module'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; import { PERFECT_SCROLLBAR_CONFIG, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar'; import { PdfViewerModule } from 'ng2-pdf-viewer'; import { ActionReducerMap, StoreModule } from '@ngrx/store'; import { EffectsModule } from '@ngrx/effects'; import { StoreDevtoolsModule } from '@ngrx/store-devtools'; import { environment } from '../environments/environment'; import * as certificationsReducer from './shared/store/certifications.reducers'; import { CertificationEffects} from './shared/store/certifications.effects'; const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { wheelSpeed: 0.5, swipeEasing: true, minScrollbarLength: 40, maxScrollbarLength: 300 }; export const reducers: ActionReducerMap = { certifications: certificationsReducer.reducer, }; @NgModule({ declarations: [ AppComponent, NavbarComponent, FooterComponent ], imports: [ BrowserModule, NgbModule, FormsModule, RouterModule, ComponentsModule, ExamplesModule, AppRoutingModule, BrowserAnimationsModule, PerfectScrollbarModule, StoreModule.forRoot(reducers), EffectsModule.forRoot([CertificationEffects]), StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }), ], providers: [ { provide: PERFECT_SCROLLBAR_CONFIG, useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG }, ], bootstrap: [AppComponent] }) export class AppModule { } ``` ## Composant du tableau expandable Affichons maintenant les données dans notre tableau angular material table dynamique avec possibilité expandable. Dans notre fichier navigation.ts : ```typescript import { trigger } from '@angular/animations'; import { SelectionModel } from '@angular/cdk/collections'; import { ChangeDetectorRef, ViewEncapsulation } from '@angular/core'; import { ViewChild } from '@angular/core'; import { Component, OnInit } from '@angular/core'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; import { MatTableDataSource } from '@angular/material/table'; import { state, style, transition, animate } from '@angular/animations'; import { select, Store } from '@ngrx/store'; import * as fromCertification from 'app/shared/store/certifications.reducers'; import { getAllCertifications } from '../../shared/store/certifications.reducers'; import { GetAllCertificationsRequest } from 'app/shared/store/certifications.actions'; @Component({ selector: 'app-navigation', templateUrl: './navigation.component.html', styleUrls: ['./navigation.component.scss'], encapsulation: ViewEncapsulation.None, animations: [ trigger('detailExpand', [ state('collapsed', style({ height: '0px', minHeight: '0', display: 'none' })), state('expanded', style({ height: '*', display: 'block' })), transition('collapsed=>expanded', animate('225ms cubic-bezier(0.2, 0.6, 0.2, 1)')), transition('expanded=>collapsed', animate('20ms cubic-bezier(0.2, 0.0, 0.4, 1)'))]), ], }) export class NavigationComponent implements OnInit { displayedColumns = [ 'name', 'plateform', 'validate', ]; displayedColumnsTwo = [ 'file', ]; expandedElement: any | null; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild('sort1', { static: true }) sort: MatSort; selection = new SelectionModel(true, []); customersResult: any[] = []; dataSource = new MatTableDataSource([]); dataSource2 = new MatTableDataSource([""]); onLoading = true; dataItems: any; pageSizeOptions = [10, 25, 50]; queryParams: string; totalData: any; constructor(private store: Store<{certification:fromCertification.State}>) { this.getCertifications(); } ngOnInit() { if (this.paginator) { this.paginator.page.subscribe((data) => { this.queryParams = `pageSize=${data.pageSize}&page=${data.pageIndex + 1}`; this.getCertifications(this.queryParams); }); } } public getCertifications(queryParams?:string){ this.store.dispatch(new GetAllCertificationsRequest(queryParams)); this.store.select(getAllCertifications).subscribe(data=>{ this.onLoading = false; this.dataItems =data; this.dataSource = new MatTableDataSource( this.dataItems.data); if ( this.dataItems.data && this.dataItems.data.length) { this.totalData = this.dataItems.data.length; } }); } } ``` ## Template HTML Et enfin dans notre fichier navigation.component.html, nous avons le code suivant : ```html

Cours

Plateforme

Periode

Certificat

Veuillez patienter chargement en cours ...

``` ## Styles CSS Ajoutons l'élément suivant dans le CSS du component : ```css pdf-viewer { display: flex; align-items: center; justify-content: center; filter: drop-shadow(5px 5px 5px #222222); height: 400px; width: 500px; margin: 0 auto; } ``` ## Fonctionnalités principales Ce tableau expandable offre plusieurs fonctionnalités avancées : ### 🔸 Fonctionnalités clés : - **Table Material Design** : Interface moderne et responsive - **Lignes expandables** : Affichage de détails supplémentaires - **Gestion d'état NGRX** : State management réactif - **Pagination** : Navigation entre les pages de données - **Animations** : Transitions fluides pour l'expansion/contraction - **Loading states** : Indicateurs de chargement - **PDF Viewer** : Affichage de documents PDF dans le détail ### 🔸 Avantages de cette implémentation : - **Performance** : Chargement optimisé des données - **UX/UI** : Interface utilisateur intuitive - **Maintenabilité** : Code organisé avec NGRX pattern - **Scalabilité** : Architecture évolutive - **Accessibilité** : Respect des standards Material Design ## Conclusion **Nous avons terminé.** Vous pouvez maintenant vous inspirer et créer un tableau expandable avec Angular Material et NGRX. Cette implémentation vous donne une base solide pour créer des interfaces de données complexes avec : - Une architecture NGRX bien structurée - Des animations fluides - Une pagination efficace - Un design Material moderne Vous pouvez adapter ce code selon vos besoins spécifiques et l'intégrer dans vos projets Angular. --- *#Angular #AngularMaterial #NGRX #TypeScript #WebDevelopment*