title: Refresh mat datasource from other component or service in angular 7
body: <p>I have 2 component namely project and project-list and then project service.
  The project.component.ts has form to submit and project.list1.component.ts displays the list of projects.</p>
  
  <p>When I submit project form in project.component.ts, I would to like refresh project.list1.component listData which is MatDatasourcetable. I tried to call service methods refreshList() or getProjectList() from project.component.ts after submit form but it is not refreshing <strong>listData</strong>. Also I have injected <strong><em>ChangeDetectorRef</em></strong> as suggested by others but this also does not refresh matdatasource. Something i am missing to figure out. Whenever I submit/update  immediately the projectlist must refresh show updated list records.</p>
  
  <p><strong>project.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, Input, ChangeDetectorRef, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
  import { MatTableDataSource } from '@angular/material';
  import { ProjectService } from 'src/app/shared/project.service';
  import { ToastrService } from 'ngx-toastr';
  import { NgForm} from '@angular/forms';
  import { ProjectModel } from 'src/app/shared/project.model';
  import { Observable } from 'rxjs';
  import { UserService } from 'src/app/users/user.service';
  import { User } from 'src/app/users/user.model';
  import { DOCUMENT } from '@angular/common';
  import { ModalDirective } from 'ngx-bootstrap/modal';
  
  @Component({
    selector: 'app-project',
    templateUrl: './project.component.html',
    styleUrls: ['./project.component.css']
  })
  export class ProjectComponent implements OnInit {
  
    constructor(private service: ProjectService,private changeDetectorRef: ChangeDetectorRef,private toastr: ToastrService, private userService: UserService) { }
  
      isValidDate: any;
      error:any={isError:false,errorMessage:''};
      minDate: Date;
      IsChecked:boolean;
  
    ngOnInit() {
      this.resetForm(); 
    }
    resetForm(form?: NgForm) {
      if (form != null)
        form.resetForm();
      this.service.formData = {
        ProjectID: null,
        ProjectName: '',
        StartDate:null ,
        EndDate:null              
      }         
    }
  
    onSubmit(form: NgForm) {    
        if (form.value.ProjectID == null)    
          this.insertRecord(form);
        else
          this.updateRecord(form);   
    }
  
    insertRecord(form: NgForm) {
      this.service.postProject(form.value).subscribe(res =&gt; {
        this.toastr.success('Inserted successfully', 'Project. Register');
        this.resetForm(form);
        //this.service.refreshList(); 
        //this.service.getProjectList();
      });
     this.changeDetectorRef.detectChanges();
    }
  
    updateRecord(form: NgForm) {
      this.service.putProject(form.value).subscribe(res =&gt; {
        this.toastr.info('Updated successfully', 'Project. Register');
        this.resetForm(form);
        //this.service.refreshList();
        //this.service.getProjectList();           
      });
      this.changeDetectorRef.detectChanges();
    }   
  }
  </code></pre>
  
  <p><strong>project-list1.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, ViewChild, HostBinding } from '@angular/core';
  import { ProjectService } from 'src/app/shared/project.service';
  import { MatTableDataSource,MatSort,MatPaginator } from '@angular/material';
  import { ProjectModel } from 'src/app/shared/project.model';
  import { ToastrService } from 'ngx-toastr';
  
  @Component({
    selector: 'app-project-list1',
    templateUrl: './project-list1.component.html',
    styleUrls: ['./project-list1.component.css']
  })
  export class ProjectList1Component implements OnInit {
  
    constructor(private service: ProjectService,
      private toastr: ToastrService) { }     
  
    listData: MatTableDataSource&lt;any&gt;;
    displayedColumns: string[] = ['ProjectName', 'StartDate', 'EndDate'];
    @ViewChild(MatSort,null) sort: MatSort;
    @ViewChild(MatPaginator,null) paginator: MatPaginator;
    searchKey: string;
  
    ngOnInit() {  
      this.refreshList();          
    }
  
    refreshList(){
      this.service.getProjectList().subscribe(data =&gt;{    
        this.listData = new MatTableDataSource(data);
        this.listData.sort = this.sort;
        this.listData.paginator = this.paginator;
      });
    } 
  }
  </code></pre>
  
  <p><strong>project-list1.component.html</strong></p>
  
  <pre><code>  &lt;mat-table [dataSource]="listData" matSort&gt;
  </code></pre>
  
  <p><strong>project.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { ProjectModel } from './project.model';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ProjectService {
    formData  : ProjectModel;
    list : ProjectModel[];
    readonly rootURL ="http://localhost:65462/api"
  
    constructor(private http: HttpClient) { }
  
    postProject(formData : ProjectModel){
      console.log(formData);  
      return this.http.post(this.rootURL+'/Project',formData);     
     }
  
     getProjectList(): Observable&lt;ProjectModel[]&gt;{
       return this.http.get&lt;ProjectModel[]&gt;(this.rootURL+'/Project/');
     }
  
     refreshList(){
       return this.http.get(this.rootURL+'/Project')
       .toPromise().then(res =&gt; this.list = res as ProjectModel[]);
      }
  
    }
  </code></pre>