Angular Material distinct mat-sort on multiple tables
No problem with separate/distinct pagination on multiple Material tables in Augular. But sorting separate tables on a page is not as simple it seems.
Can someone please point us to a working example of multiple table sorting using the Material Angular (ver 4-5) table component.
Thank You
angular angular-material
edited Jun 17 '18 at 9:47
Vega
12.9k113655
asked Dec 28 '17 at 2:42
KirkKirk
819
add a comment |
No problem with separate/distinct pagination on multiple Material tables in Augular. But sorting separate tables on a page is not as simple it seems.
Can someone please point us to a working example of multiple table sorting using the Material Angular (ver 4-5) table component.
Thank You
angular angular-material
edited Jun 17 '18 at 9:47
Vega
12.9k113655
asked Dec 28 '17 at 2:42
KirkKirk
819
can you please elaborate your question and more descriptive what you have done and what you want?
– Aman
Dec 28 '17 at 4:48
add a comment |
No problem with separate/distinct pagination on multiple Material tables in Augular. But sorting separate tables on a page is not as simple it seems.
Can someone please point us to a working example of multiple table sorting using the Material Angular (ver 4-5) table component.
Thank You
angular angular-material
edited Jun 17 '18 at 9:47
Vega
12.9k113655
asked Dec 28 '17 at 2:42
KirkKirk
819
No problem with separate/distinct pagination on multiple Material tables in Augular. But sorting separate tables on a page is not as simple it seems.
Can someone please point us to a working example of multiple table sorting using the Material Angular (ver 4-5) table component.
Thank You
angular angular-material
angular angular-material
edited Jun 17 '18 at 9:47
Vega
12.9k113655
asked Dec 28 '17 at 2:42
KirkKirk
819
edited Jun 17 '18 at 9:47
Vega
12.9k113655
asked Dec 28 '17 at 2:42
KirkKirk
819
edited Jun 17 '18 at 9:47
Vega
12.9k113655
edited Jun 17 '18 at 9:47
Vega
12.9k113655
edited Jun 17 '18 at 9:47
Vega
12.9k113655
12.9k113655
asked Dec 28 '17 at 2:42
KirkKirk
819
asked Dec 28 '17 at 2:42
KirkKirk
819
asked Dec 28 '17 at 2:42
KirkKirk
819
819
can you please elaborate your question and more descriptive what you have done and what you want?
– Aman
Dec 28 '17 at 4:48
add a comment |
can you please elaborate your question and more descriptive what you have done and what you want?
– Aman
Dec 28 '17 at 4:48
can you please elaborate your question and more descriptive what you have done and what you want?
– Aman
Dec 28 '17 at 4:48
can you please elaborate your question and more descriptive what you have done and what you want?
– Aman
Dec 28 '17 at 4:48
add a comment |
3 Answers
3
active
oldest
votes
After a long search, I finally found the resolution to your issue, as well as the full resolution and link to where I found certain pieces. Hopefully this works for you, as it is finally working for me.
import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';
@Component({
templateUrl: './my-tables.component.html'
})
export class CopyInstructionsComponent implements AfterViewInit {
public myFirstTableData: MatTableDataSource<MyTableModel>;
public mySecondTableData: MatTableDataSource<MyTableModel>;
@ViewChild('firstTableSort') public firstTableSort: MatSort;
@ViewChild('secondTableSort') public secondTableSort: MatSort;
constructor(private cdRef: ChangeDetectorRef) {
// ...the rest of your code here to build the data structures.
}
ngAfterViewInit() {
this.myFirstTableData.sort = this.firstTableSort;
this.mySecondTableData.sort = this.secondTableSort;
// See => https://stackoverflow.com/questions/39787038/how-to-manage-angular2-expression-has-changed-after-it-was-checked-exception-w
this.cdRef.detectChanges()
}
}<mat-table
#firstTable
#firstTableSort="matSort"
[dataSource]="myFirstTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>
<mat-table
#secondTable
#secondTableSort="matSort"
[dataSource]="mySecondTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>answered Mar 1 '18 at 18:07
th3n3wguyth3n3wguy
1,75111222
add a comment |
Here is an Angular 6 working solution for mat-sort on multiple tables:
import { MatSort, MatTableDataSource } from '@angular/material';
...
@ViewChild('sortCol1') sortCol1: MatSort;
@ViewChild('sortCol2') sortCol2: MatSort;
...
Data source 1:
this.dataSource1 = new MatTableDataSource(this.dataSource1);
this.dataSource1.sort = this.sortCol1;
Data source 2:
this.dataSource2 = new MatTableDataSource(this.dataSource2);
this.dataSource2.sort = this.sortCol2;
...
Table 1 (View):
<table mat-table #sortCol1="matSort" [dataSource]="dataSource1" matSort matSortActive="ID" matSortDirection="asc">
...
</table>
Table 2 (View):
<table mat-table #sortCol2="matSort" [dataSource]="dataSource2" matSort matSortActive="ID" matSortDirection="asc">
...
</table>
answered Nov 13 '18 at 16:45
George Cs.George Cs.
311
add a comment |
I put the second mat-sort in chid component and use Angular @Input to transfer data between parent and child.
https://angular.io/guide/component-interaction
For example: The first mat-sort for Order data, and the second mat-sort for OrderDetail.
(I expect the result that I click the order to expand the order detail data and both have a sort function. It's work for me, hope to help you.)
In parent component:
'<'app-sales-orderdetail [orderDetailDataInChild]="orderDetailDataInParent"'>''<'/app-sales-orderdetail'>'
In child component:
@Input() orderDetailDataInChild = new MatTableDataSource();
answered Jan 14 at 15:15
CharloteCharlote
11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48001006%2fangular-material-distinct-mat-sort-on-multiple-tables%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
After a long search, I finally found the resolution to your issue, as well as the full resolution and link to where I found certain pieces. Hopefully this works for you, as it is finally working for me.
import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';
@Component({
templateUrl: './my-tables.component.html'
})
export class CopyInstructionsComponent implements AfterViewInit {
public myFirstTableData: MatTableDataSource<MyTableModel>;
public mySecondTableData: MatTableDataSource<MyTableModel>;
@ViewChild('firstTableSort') public firstTableSort: MatSort;
@ViewChild('secondTableSort') public secondTableSort: MatSort;
constructor(private cdRef: ChangeDetectorRef) {
// ...the rest of your code here to build the data structures.
}
ngAfterViewInit() {
this.myFirstTableData.sort = this.firstTableSort;
this.mySecondTableData.sort = this.secondTableSort;
// See => https://stackoverflow.com/questions/39787038/how-to-manage-angular2-expression-has-changed-after-it-was-checked-exception-w
this.cdRef.detectChanges()
}
}<mat-table
#firstTable
#firstTableSort="matSort"
[dataSource]="myFirstTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>
<mat-table
#secondTable
#secondTableSort="matSort"
[dataSource]="mySecondTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>answered Mar 1 '18 at 18:07
th3n3wguyth3n3wguy
1,75111222
add a comment |
After a long search, I finally found the resolution to your issue, as well as the full resolution and link to where I found certain pieces. Hopefully this works for you, as it is finally working for me.
import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';
@Component({
templateUrl: './my-tables.component.html'
})
export class CopyInstructionsComponent implements AfterViewInit {
public myFirstTableData: MatTableDataSource<MyTableModel>;
public mySecondTableData: MatTableDataSource<MyTableModel>;
@ViewChild('firstTableSort') public firstTableSort: MatSort;
@ViewChild('secondTableSort') public secondTableSort: MatSort;
constructor(private cdRef: ChangeDetectorRef) {
// ...the rest of your code here to build the data structures.
}
ngAfterViewInit() {
this.myFirstTableData.sort = this.firstTableSort;
this.mySecondTableData.sort = this.secondTableSort;
// See => https://stackoverflow.com/questions/39787038/how-to-manage-angular2-expression-has-changed-after-it-was-checked-exception-w
this.cdRef.detectChanges()
}
}<mat-table
#firstTable
#firstTableSort="matSort"
[dataSource]="myFirstTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>
<mat-table
#secondTable
#secondTableSort="matSort"
[dataSource]="mySecondTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>answered Mar 1 '18 at 18:07
th3n3wguyth3n3wguy
1,75111222
add a comment |
After a long search, I finally found the resolution to your issue, as well as the full resolution and link to where I found certain pieces. Hopefully this works for you, as it is finally working for me.
import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';
@Component({
templateUrl: './my-tables.component.html'
})
export class CopyInstructionsComponent implements AfterViewInit {
public myFirstTableData: MatTableDataSource<MyTableModel>;
public mySecondTableData: MatTableDataSource<MyTableModel>;
@ViewChild('firstTableSort') public firstTableSort: MatSort;
@ViewChild('secondTableSort') public secondTableSort: MatSort;
constructor(private cdRef: ChangeDetectorRef) {
// ...the rest of your code here to build the data structures.
}
ngAfterViewInit() {
this.myFirstTableData.sort = this.firstTableSort;
this.mySecondTableData.sort = this.secondTableSort;
// See => https://stackoverflow.com/questions/39787038/how-to-manage-angular2-expression-has-changed-after-it-was-checked-exception-w
this.cdRef.detectChanges()
}
}<mat-table
#firstTable
#firstTableSort="matSort"
[dataSource]="myFirstTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>
<mat-table
#secondTable
#secondTableSort="matSort"
[dataSource]="mySecondTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>answered Mar 1 '18 at 18:07
th3n3wguyth3n3wguy
1,75111222
After a long search, I finally found the resolution to your issue, as well as the full resolution and link to where I found certain pieces. Hopefully this works for you, as it is finally working for me.
import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';
@Component({
templateUrl: './my-tables.component.html'
})
export class CopyInstructionsComponent implements AfterViewInit {
public myFirstTableData: MatTableDataSource<MyTableModel>;
public mySecondTableData: MatTableDataSource<MyTableModel>;
@ViewChild('firstTableSort') public firstTableSort: MatSort;
@ViewChild('secondTableSort') public secondTableSort: MatSort;
constructor(private cdRef: ChangeDetectorRef) {
// ...the rest of your code here to build the data structures.
}
ngAfterViewInit() {
this.myFirstTableData.sort = this.firstTableSort;
this.mySecondTableData.sort = this.secondTableSort;
// See => https://stackoverflow.com/questions/39787038/how-to-manage-angular2-expression-has-changed-after-it-was-checked-exception-w
this.cdRef.detectChanges()
}
}<mat-table
#firstTable
#firstTableSort="matSort"
[dataSource]="myFirstTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>
<mat-table
#secondTable
#secondTableSort="matSort"
[dataSource]="mySecondTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';
@Component({
templateUrl: './my-tables.component.html'
})
export class CopyInstructionsComponent implements AfterViewInit {
public myFirstTableData: MatTableDataSource<MyTableModel>;
public mySecondTableData: MatTableDataSource<MyTableModel>;
@ViewChild('firstTableSort') public firstTableSort: MatSort;
@ViewChild('secondTableSort') public secondTableSort: MatSort;
constructor(private cdRef: ChangeDetectorRef) {
// ...the rest of your code here to build the data structures.
}
ngAfterViewInit() {
this.myFirstTableData.sort = this.firstTableSort;
this.mySecondTableData.sort = this.secondTableSort;
// See => https://stackoverflow.com/questions/39787038/how-to-manage-angular2-expression-has-changed-after-it-was-checked-exception-w
this.cdRef.detectChanges()
}
}<mat-table
#firstTable
#firstTableSort="matSort"
[dataSource]="myFirstTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>
<mat-table
#secondTable
#secondTableSort="matSort"
[dataSource]="mySecondTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';
@Component({
templateUrl: './my-tables.component.html'
})
export class CopyInstructionsComponent implements AfterViewInit {
public myFirstTableData: MatTableDataSource<MyTableModel>;
public mySecondTableData: MatTableDataSource<MyTableModel>;
@ViewChild('firstTableSort') public firstTableSort: MatSort;
@ViewChild('secondTableSort') public secondTableSort: MatSort;
constructor(private cdRef: ChangeDetectorRef) {
// ...the rest of your code here to build the data structures.
}
ngAfterViewInit() {
this.myFirstTableData.sort = this.firstTableSort;
this.mySecondTableData.sort = this.secondTableSort;
// See => https://stackoverflow.com/questions/39787038/how-to-manage-angular2-expression-has-changed-after-it-was-checked-exception-w
this.cdRef.detectChanges()
}
}<mat-table
#firstTable
#firstTableSort="matSort"
[dataSource]="myFirstTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>
<mat-table
#secondTable
#secondTableSort="matSort"
[dataSource]="mySecondTableData"
matSort
>
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
</ng-container>
</mat-table>answered Mar 1 '18 at 18:07
th3n3wguyth3n3wguy
1,75111222
answered Mar 1 '18 at 18:07
th3n3wguyth3n3wguy
1,75111222
answered Mar 1 '18 at 18:07
th3n3wguyth3n3wguy
1,75111222
answered Mar 1 '18 at 18:07
th3n3wguyth3n3wguy
1,75111222
1,75111222
add a comment |
add a comment |
Here is an Angular 6 working solution for mat-sort on multiple tables:
import { MatSort, MatTableDataSource } from '@angular/material';
...
@ViewChild('sortCol1') sortCol1: MatSort;
@ViewChild('sortCol2') sortCol2: MatSort;
...
Data source 1:
this.dataSource1 = new MatTableDataSource(this.dataSource1);
this.dataSource1.sort = this.sortCol1;
Data source 2:
this.dataSource2 = new MatTableDataSource(this.dataSource2);
this.dataSource2.sort = this.sortCol2;
...
Table 1 (View):
<table mat-table #sortCol1="matSort" [dataSource]="dataSource1" matSort matSortActive="ID" matSortDirection="asc">
...
</table>
Table 2 (View):
<table mat-table #sortCol2="matSort" [dataSource]="dataSource2" matSort matSortActive="ID" matSortDirection="asc">
...
</table>
answered Nov 13 '18 at 16:45
George Cs.George Cs.
311
add a comment |
Here is an Angular 6 working solution for mat-sort on multiple tables:
import { MatSort, MatTableDataSource } from '@angular/material';
...
@ViewChild('sortCol1') sortCol1: MatSort;
@ViewChild('sortCol2') sortCol2: MatSort;
...
Data source 1:
this.dataSource1 = new MatTableDataSource(this.dataSource1);
this.dataSource1.sort = this.sortCol1;
Data source 2:
this.dataSource2 = new MatTableDataSource(this.dataSource2);
this.dataSource2.sort = this.sortCol2;
...
Table 1 (View):
<table mat-table #sortCol1="matSort" [dataSource]="dataSource1" matSort matSortActive="ID" matSortDirection="asc">
...
</table>
Table 2 (View):
<table mat-table #sortCol2="matSort" [dataSource]="dataSource2" matSort matSortActive="ID" matSortDirection="asc">
...
</table>
answered Nov 13 '18 at 16:45
George Cs.George Cs.
311
add a comment |
Here is an Angular 6 working solution for mat-sort on multiple tables:
import { MatSort, MatTableDataSource } from '@angular/material';
...
@ViewChild('sortCol1') sortCol1: MatSort;
@ViewChild('sortCol2') sortCol2: MatSort;
...
Data source 1:
this.dataSource1 = new MatTableDataSource(this.dataSource1);
this.dataSource1.sort = this.sortCol1;
Data source 2:
this.dataSource2 = new MatTableDataSource(this.dataSource2);
this.dataSource2.sort = this.sortCol2;
...
Table 1 (View):
<table mat-table #sortCol1="matSort" [dataSource]="dataSource1" matSort matSortActive="ID" matSortDirection="asc">
...
</table>
Table 2 (View):
<table mat-table #sortCol2="matSort" [dataSource]="dataSource2" matSort matSortActive="ID" matSortDirection="asc">
...
</table>
answered Nov 13 '18 at 16:45
George Cs.George Cs.
311
Here is an Angular 6 working solution for mat-sort on multiple tables:
import { MatSort, MatTableDataSource } from '@angular/material';
...
@ViewChild('sortCol1') sortCol1: MatSort;
@ViewChild('sortCol2') sortCol2: MatSort;
...
Data source 1:
this.dataSource1 = new MatTableDataSource(this.dataSource1);
this.dataSource1.sort = this.sortCol1;
Data source 2:
this.dataSource2 = new MatTableDataSource(this.dataSource2);
this.dataSource2.sort = this.sortCol2;
...
Table 1 (View):
<table mat-table #sortCol1="matSort" [dataSource]="dataSource1" matSort matSortActive="ID" matSortDirection="asc">
...
</table>
Table 2 (View):
<table mat-table #sortCol2="matSort" [dataSource]="dataSource2" matSort matSortActive="ID" matSortDirection="asc">
...
</table>
answered Nov 13 '18 at 16:45
George Cs.George Cs.
311
answered Nov 13 '18 at 16:45
George Cs.George Cs.
311
answered Nov 13 '18 at 16:45
George Cs.George Cs.
311
answered Nov 13 '18 at 16:45
George Cs.George Cs.
311
311
add a comment |
add a comment |
I put the second mat-sort in chid component and use Angular @Input to transfer data between parent and child.
https://angular.io/guide/component-interaction
For example: The first mat-sort for Order data, and the second mat-sort for OrderDetail.
(I expect the result that I click the order to expand the order detail data and both have a sort function. It's work for me, hope to help you.)
In parent component:
'<'app-sales-orderdetail [orderDetailDataInChild]="orderDetailDataInParent"'>''<'/app-sales-orderdetail'>'
In child component:
@Input() orderDetailDataInChild = new MatTableDataSource();
answered Jan 14 at 15:15
CharloteCharlote
11
add a comment |
I put the second mat-sort in chid component and use Angular @Input to transfer data between parent and child.
https://angular.io/guide/component-interaction
For example: The first mat-sort for Order data, and the second mat-sort for OrderDetail.
(I expect the result that I click the order to expand the order detail data and both have a sort function. It's work for me, hope to help you.)
In parent component:
'<'app-sales-orderdetail [orderDetailDataInChild]="orderDetailDataInParent"'>''<'/app-sales-orderdetail'>'
In child component:
@Input() orderDetailDataInChild = new MatTableDataSource();
answered Jan 14 at 15:15
CharloteCharlote
11
add a comment |
I put the second mat-sort in chid component and use Angular @Input to transfer data between parent and child.
https://angular.io/guide/component-interaction
For example: The first mat-sort for Order data, and the second mat-sort for OrderDetail.
(I expect the result that I click the order to expand the order detail data and both have a sort function. It's work for me, hope to help you.)
In parent component:
'<'app-sales-orderdetail [orderDetailDataInChild]="orderDetailDataInParent"'>''<'/app-sales-orderdetail'>'
In child component:
@Input() orderDetailDataInChild = new MatTableDataSource();
answered Jan 14 at 15:15
CharloteCharlote
11
I put the second mat-sort in chid component and use Angular @Input to transfer data between parent and child.
https://angular.io/guide/component-interaction
For example: The first mat-sort for Order data, and the second mat-sort for OrderDetail.
(I expect the result that I click the order to expand the order detail data and both have a sort function. It's work for me, hope to help you.)
In parent component:
'<'app-sales-orderdetail [orderDetailDataInChild]="orderDetailDataInParent"'>''<'/app-sales-orderdetail'>'
In child component:
@Input() orderDetailDataInChild = new MatTableDataSource();
answered Jan 14 at 15:15
CharloteCharlote
11
answered Jan 14 at 15:15
CharloteCharlote
11
answered Jan 14 at 15:15
CharloteCharlote
11
answered Jan 14 at 15:15
CharloteCharlote
11
11
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48001006%2fangular-material-distinct-mat-sort-on-multiple-tables%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
can you please elaborate your question and more descriptive what you have done and what you want?
– Aman
Dec 28 '17 at 4:48