CODEWITHSUNDEEP
angulartypescriptangular-material2
rain01
rain01

Reputation: 1284

Catch sort event on custom material table component (Angular 6)

Based on days of research and combination of multiple sources and help from others I built this custom table component that I could use for all my tables that has all the basics built in already. All I need to do to create a table is define columns and pass in the data.

But now I want to add option to remember sorting per user with cookies and I can do it if catch the sort event on the page where I use the custom table component but that defeats the purpose of the custom component and it would be so much cleaner if I could just catch it inside the custom component.

Example table creation with custom comp:

<dyn-table [data]="users" [displayedColumns]="displayedColumns" matSort (matSortChange)="sortChange($event)">
    <dyn-col name="user_id"></dyn-col>
    <dyn-col name="user_name"></dyn-col>
</dyn-table>

I need a way to create a table without adding (matSortChange)="sortChange($event)" here but instead catching sortChange inside my custom table component.

StackBlitz with the custom table component catching the event in app.component.ts(should catch in dyn-table.component.ts). https://stackblitz.com/edit/angular-jw9whh

Seems like it should be a simple case but I have not found a solution to this yet.

Upvotes: 2

Views: 6979

Answers (1)

yurzui
yurzui

Reputation: 214067

If you manipulate matSort directive on your custom component then you can just use HostListener decorator to catch that event:

dyn-table.component.ts

@HostListener('matSortChange', ['$event'])
sortChange(e) {
  // save cookie with table sort data here
  console.log(e);
}

Forked Stackblitz

Upvotes: 2

Related Questions