Angular change detection with MatTableDataSource

change-detection.component.ts

import {ChangeDetectionStrategy, Component, DoCheck, KeyValueDiffer, KeyValueDiffers} from '@angular/core';
import {MatTableDataSource} from '@angular/material';

interface Data {
}

const DATA: Data[] = [];

/**
 * Provoque un changement de données pour qu'Angular détecte que les données ont été modifiées même si la variable n'a pas été modifiée.
 * @see Source : https://stackoverflow.com/a/49224747/1655155
 */
export function refreshMatTableDataSource<T>(dataSource?: MatTableDataSource<T>): void {
    if (dataSource) {
        // noinspection SillyAssignmentJS : pour déclencher une détection de changement Angular
        dataSource.data = dataSource.data; // NOSONAR : voir ci-dessus
    }
}

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush, // Pour limiter la fréquence des détections
})
export class ChangeDetection implements DoCheck {
    dataSource: MatTableDataSource<Data>;
    private readonly dataDiffer: KeyValueDiffer<string, any>;
    /** Booléen pour ignorer la première détection de changement, qui ne devrait pas être déclenchée */
    private firstChangesDetected = false;

    constructor(
        differs: KeyValueDiffers,
    ) {
        this.dataSource = new MatTableDataSource<Data>(DATA);
        this.dataDiffer = differs.find(this.dataSource.data).create();
    }

    ngDoCheck(): void {
        if (this.dataDiffer) {
            const dataChanges = this.dataDiffer.diff(this.dataSource.data);
            if (dataChanges) {
                if (this.firstChangesDetected) {
                    refreshMatTableDataSource(this.dataSource);
                }
                this.firstChangesDetected = true;
            }
        }
    }
}