I want to sort the table in Angular
maybe I can help if you wanna use angular material if you want to change methods
app.component.html:
<table matSort (matSortChange)="sortData($event)">
<tr>
<th mat-sort-header="calories">CREATED BY</th>
<th mat-sort-header="fat">DOMAIN URL</th>
<th mat-sort-header="carbs">RESULTS FOUND</th>
<th mat-sort-header="protein">STATUS</th>
</tr>
<tr *ngFor="let element of Data">
<td>{{element.CREATED}}</td>
<td>{{element.url}}</td>
<td>{{element.results}}</td>
<td>{{element.status}}</td>
</tr>
</table>
app.component.ts:
export class AppComponent implements AfterViewInit {
displayedColumns: string[] = ['CREATED BY', 'DOMAIN URL', 'RESULTS FOUND', 'STATUS'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
constructor(private _liveAnnouncer: LiveAnnouncer) {}
@ViewChild(MatSort) sort: MatSort;
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
/** Announce the change in sort state for assistive technology. */
announceSortChange(sortState: Sort) {
// This example uses English messages. If your application supports
// multiple language, you would internationalize these strings.
// Furthermore, you can customize the message to add additional
// details about the values being sorted.
if (sortState.direction) {
this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
} else {
this._liveAnnouncer.announce('Sorting cleared');
}
}
}
for more complete information on angular material:https://material.angular.io/components/sort/overview
Have you tried to add your Ng2OrderModule in exports section?
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent, Ng2OrderModule ]
})