I have been working on implementing the Angular material datatable, and I have successfully implemented the basic table and filter functionality.
However, when it comes to sorting, I encountered the following error:
Error:
ERROR TypeError: Cannot set property 'sort' of undefined
at ListPostComponent.ngAfterViewInit (list-post.component.ts:53)
at callHook (core.js:4708)
at callHooks (core.js:4672)
at executeInitAndCheckHooks (core.js:4612)
at refreshView (core.js:11969)
at refreshDynamicEmbeddedViews (core.js:13256)
at refreshView (core.js:11916)
at refreshComponent (core.js:13331)
at refreshChildComponents (core.js:11622)
at refreshView (core.js:11945)
Post model
import {User} from '../user/user.model';
export class Post {
id: number;
created_by: number;
created_on: string;
is_published: boolean;
is_delete: boolean;
title: string;
slug: string;
sub_title: string;
content: string;
tags: Array<string>;
user: User
}
component.html
In the HTML, I have used the attributes matSort and mat-sort-header
<mat-form-field>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium">
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
<!-- Id Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
<td mat-cell *matCellDef="let row"><a [routerLink]="['/users/view', row.id]" class="a-style">{{row.id}}</a>
</td>
</ng-container>
<!-- Title Column -->
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
<td mat-cell *matCellDef="let row">{{row.title}}</td>
</ng-container>
<!-- Slug Column -->
<ng-container matColumnDef="slug">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Slug</th>
<td mat-cell *matCellDef="let row">{{row.slug}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
component.ts
Here, I imported MatSort, MatTableDataSource and also imported MatSortModule in app.module.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import {MatTableDataSource} from '@angular/material/table';
import {MatSort} from '@angular/material/sort';
import { PostService } from '../../service/post/post.service';
import { Post } from './../../models/post/post.model';
@Component({
selector: 'app-list-post',
templateUrl: './list-post.component.html',
styleUrls: ['./list-post.component.css']
})
export class ListPostComponent implements OnInit {
@ViewChild(MatSort, {static: true}) sort: MatSort;
displayedColumns = ['id', 'title', 'slug'];
dataSource: MatTableDataSource<Post>;
constructor(
private postService: PostService
) {}
ngOnInit(): void {
this.getAllPosts();
}
ngAfterViewInit(): void {
this.dataSource.sort = this.sort;
}
getAllPosts() {
this.postService.getAllPost().subscribe(
(data) => {
this.dataSource = new MatTableDataSource(data['posts']);
}
)
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
Can anyone guide me on where I might be going wrong?