I don't know if the ChangeDetectorRef
was required when the question was created, but now this is enough:
import { MatTableDataSource } from '@angular/material/table';
// ...
dataSource = new MatTableDataSource<MyDataType>();
refresh() {
this.myService.doSomething().subscribe((data: MyDataType[]) => {
this.dataSource.data = data;
}
}
Example:
StackBlitz
Trigger a change detection by using ChangeDetectorRef
in the refresh()
method
just after receiving the new data, inject ChangeDetectorRef in the constructor and use detectChanges like this:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { LanguageModel, LANGUAGE_DATA } from '../../../../models/language.model';
import { LanguageAddComponent } from './language-add/language-add.component';
import { AuthService } from '../../../../services/auth.service';
import { LanguageDataSource } from './language-data-source';
import { LevelbarComponent } from '../../../../directives/levelbar/levelbar.component';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { MatSnackBar, MatDialog } from '@angular/material';
@Component({
selector: 'app-language',
templateUrl: './language.component.html',
styleUrls: ['./language.component.scss']
})
export class LanguageComponent implements OnInit {
displayedColumns = ['name', 'native', 'code', 'level'];
teachDS: any;
user: any;
constructor(private authService: AuthService, private dialog: MatDialog,
private changeDetectorRefs: ChangeDetectorRef) { }
ngOnInit() {
this.refresh();
}
add() {
this.dialog.open(LanguageAddComponent, {
data: { user: this.user },
}).afterClosed().subscribe(result => {
this.refresh();
});
}
refresh() {
this.authService.getAuthenticatedUser().subscribe((res) => {
this.user = res;
this.teachDS = new LanguageDataSource(this.user.profile.languages.teach);
this.changeDetectorRefs.detectChanges();
});
}
}
So for me, nobody gave the good answer to the problem that i met which is almost the same than @Kay. For me it's about sorting, sorting table does not occur changes in the mat. I purpose this answer since it's the only topic that i find by searching google. I'm using Angular 6.
As said here:
Since the table optimizes for performance, it will not automatically check for changes to the data array. Instead, when objects are added, removed, or moved on the data array, you can trigger an update to the table's rendered rows by calling its renderRows() method.
So you just have to call renderRows() in your refresh() method to make your changes appears.
See here for integration.
Since you are using MatPaginator
, you just need to do any change to paginator, this triggers data reload.
Simple trick:
this.paginator._changePageSize(this.paginator.pageSize);
This updates the page size to the current page size, so basically nothing changes, except the private _emitPageEvent()
function is called too, triggeing table reload.
In Angular 9, the secret is this.dataSource.data = this.dataSource.data;
Example:
import { MatTableDataSource } from '@angular/material/table';
dataSource: MatTableDataSource<MyObject>;
refresh(): void {
this.applySomeModif();
// Do what you want with dataSource
this.dataSource.data = this.dataSource.data;
}
applySomeModif(): void {
// add some data
this.dataSource.data.push(new MyObject());
// delete index number 4
this.dataSource.data.splice(4, 0);
}
You can just use the datasource connect function
this.datasource.connect().next(data);
like so. 'data' being the new values for the datatable
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With