Question:

How can I am trying to implement matSort. It is not Working in Angular

Problem

I want to include matSort in the mat-table for the project I am working on. The table is working fine but the sort is not working. I have imported the MatSort module from @angular/material. This is the code implementation - HTML -

<mat-card>

<mat-card-header></mat-card-header>

<mat-card-content>

<!--- Note that these columns can be defined in any order.

The actual rendered columns are set as a property on the row definition" -->

<ng-container matColumnDef="Company Name">

<th mat-sort-header mat-header-cell *matHeaderCellDef>Company Name</th>

<td mat-cell *matCellDef="let element">{{ element.companyName }}</td>

</ng-container>

<ng-container matColumnDef="Industry">

<th mat-header-cell *matHeaderCellDef>Industry</th>

<td mat-cell *matCellDef="let element">{{ element.industryName }}</td>

</ng-container>

<ng-container matColumnDef="Office Premisis No.">

<th mat-header-cell *matHeaderCellDef>Office Premisis No.</th>

</td>

</ng-container>

<ng-container matColumnDef="Mobile No.">

<th mat-header-cell *matHeaderCellDef>Mobile No.</th>

</td>

</ng-container>

<ng-container matColumnDef="Details">

<th mat-header-cell *matHeaderCellDef>Actions</th>

<svg

xmlns="http://www.w3.org/2000/svg"

x="0px"

y="0px"

width="30"

height="30"

viewBox="0 0 48 48"

<path

fill="#2196f3"

d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"

></path>

<path

fill="#fff"

d="M22 22h4v11h-4V22zM26.5 16.5c0 1.379-1.121 2.5-2.5 2.5s-2.5-1.121-2.5-2.5S22.621 14 24 14 26.5 15.121 26.5 16.5z"

></path>

</svg>

</a>

</td>

</ng-container>

</table>

<mat-paginator

[pageSizeOptions]="[5, 10, 15, 20]"

showFirstLastButtons

></mat-paginator>

</mat-card-content>

<mat-card-footer>

</mat-card-footer>

</mat-card>

</div>

This is the .ts file. I have tried to write the code properly but no luck so far with the matSort working.

export class Table5Component implements OnInit {

public dataSource = new MatTableDataSource();

public displayColumn: string[] = [

'Company Name',

'Industry',

'Office Premisis No.',

'Mobile No.',

'Details',

];

@ViewChild(MatPaginator) paginator!: MatPaginator;

@ViewChild(MatSort) sort!: MatSort;

constructor(private companyService: CompanyService) {}

ngOnInit() {

this.CompanyList();

}

CompanyList = () => {

this.companyService.getCompany('addCompany').subscribe((data) => {

console.log(data);

this.dataSource.data = data;

this.dataSource.paginator = this.paginator;

this.dataSource.sort = this.sort;

});

};

onClick = (id: any) => {

alert(id);

};

}

Solution

Your displayColumn should be:

displayColumn=['companyName ','industryName','officePremisisNo',

'primaryMobileNo','Details']`

You need also change your matColumnDef, e.g.

matColumnDef="primaryMobileNo"

The mat-sort-header gets by defect the value of the displayColumns to order the columns. With your code Angular try to get, e.g. "Mobile No." as "field" to sort.

NOTE: Well, you can also use

mar-sort-header="primaryMobileNo"

But, better change the displayColumns :)

>HTTP request after another but only care about first one in Angular?

>Why am I getting unexpected parent reaction to child button Angular?

>How can I combine multiple HTTP calls in Angular using RxJS?

>Why Ng serve doesn't work in Angulars?

>How to use JSON:API along with Angular/RxJs?

>Why Ng server doesn't work in Angulars?

>How to operate data before return it using Angular16?

>How to Embed Node Red into existing Angular application?

>Why Angular routing with mat-toolbar is not working?