Sorting Observable Data in an Angular Material Table

Question

I'm trying to sort observable data in an Angular Material Table. I'm able to successfully load data to the table, but I am not able to sort it. Please see the code below:

export class IntegratedComponent implements AfterViewInit {

    displayedColumns: string[] = ['actions', 'id', 'date', 'fullName'];
    data: Observable<Data[]>;
    private url;
    corpId: string; // used in input field

    constructor(private integrationService: IntegrationService) {}

    @ViewChild(MatSort) sort: MatSort; // allows user to sort items in material table

    ngAfterViewInit() {}

    search(term: string) {
        this.integratedData = merge(this.sort.sortChange)
            .pipe(
                startWith({}),
                switchMap(() => {
                    return this.integratedService!.getIdData(term);
                }),
                map(obj => {
                    return obj;
                }),
                catchError(() => {
                    return observableOf([]);
                })
            )
    }

Here's the template:

<mat-form-field>
    <mat-label>Search for ID</mat-label>
    <input matInput #searchBox maxLength="7" [(ngModel)]="id" required>
    <mat-hint align="start">{{searchBox.value.length}} / 8</mat-hint>
    <mat-icon title="Search" class="search-icon" matSuffix (click)="search(id)">search</mat-icon>
</mat-form-field>

<table mat-table [dataSource]="data" class="mat-elevation-z8" matSort>

        <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
            <td mat-cell *matCellDef="let element">{{element.actions}}</td>
        </ng-container>

        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
            <td mat-cell *matCellDef="let element">{{element.id}}</td>
        </ng-container>

        <ng-container matColumnDef="date">
            <th mat-header-cell *matHeaderCellDef> Date </th>
            <td mat-cell *matCellDef="let element">{{element.date | date}}</td>
        </ng-container>

        <ng-container matColumnDef="fullName">
            <th mat-header-cell *matHeaderCellDef> Full Name </th>
            <td mat-cell *matCellDef="let element">{{element.fullName}}</td>
        </ng-container>
</table>

The buttons display in the template - they just don't work. How can I fix this issue?

score 0 · Accepted Answer · answered May 14 '21 at 12:36

I was able to figure it out with the help of a YT video. Please see answer below:

export class IntegratedComponent implements AfterViewInit {

    displayedColumns: string[] = ['actions', 'id', 'date', 'fullName'];
    dataSource = new MatTableDataSource([]);
    private url;
    corpId: string; // used in input field

    constructor(private integrationService: IntegrationService) {}

    @ViewChild(MatSort) sort: MatSort; // allows user to sort items in material table

    ngAfterViewInit() {}

    search(term: string) {
        this.integratedService.getIdData(term).subscribe(next => {
            if(!results) {
                return;
            }
            this.dataSource = new MatTableDataSource(results);
            this.dataSource.sort = this.sort;
        })
    }
}

Sorting Observable Data in an Angular Material Table

1 Answers1