Angular Material 2: How to refresh md-table after editing a record?

Question

So I have a user-list component and a user-detail component.

The user-list component has an md-table listing all users registered. The user is able to click on a button to see the details of the corresponding entity.

After editing the Name property and saving (for example), the user-detail redirects to the user-list component. But the md-table displays the old information.

How can I trigger an md-table refresh after editing the entity in another component like this scenario?

Here is my user-list component:

export class UserListComponent implements OnInit {
tableDisplayedColumns: string[] = ['userName', 'email', 'options'];
userDataSource: UserDataSource;

constructor(private _userService: UserService, private _router: Router) { }

ngOnInit(): void {
    this.userDataSource = new UserDataSource(this._userService);
}}



class UserDataSource extends DataSource<UserVModel> {
constructor(private _userService: UserService) { 
    super();
}

connect(): Observable<UserVModel[]> {
    return this._userService.getAllUsers();
}

disconnect(): void { }}

Answer 1

The table will re-render when the stream provided by connect() emits a new value.

getAllUsers needs to emit a new set of data when it is changed. Otherwise, listen for a separate stream (e.g. dataChanged) from the _userService and use that to call getAllUsers again.

connect(): Observable<UserVModel[]> {
  return this._userService.dataChanged
      .switchMap(() => this._userService.getAllUsers()
}