title: How do I update my Angular Table dataSource with data from an Observable
body: <p>Im trying to display data in my Angular Material Table, that I receive from my backend.</p>
  <p>Everything works fine as long as my _timelogService.getAllTimelogs() function returns an Observable of dummy data which I hard coded into the function. As soon as I make an actualy HTTP POST request to my backend - and return an Observable of that data - the html table doesnt display any rows eventhough my dataSource contains the required data.</p>
  <p>When I use <code>logData()</code> it display the correct data even if i use the actual Observable.</p>
  <p>I suspect that my Angular Table does not get updated when the dataSource gets updated.</p>
  <p>Did anyone else ever encounter such an issue?</p>
  <pre><code>export class OverviewComponent implements OnInit {
  
    displayedColumns: string[] = ['roomId', 'startTime', 'endTime', 
    'duration'];
    dataSource = new MatTableDataSource&lt;TimeLogTable&gt;();
  
    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
    @ViewChild(MatSort, { static: true }) sort: MatSort;  
  
    constructor(private _timelogService: TimelogService) {
      //In the Docs example the dummy data gets created here
    }
  
    ngOnInit(): void {
      this._timelogService.getAllTimelogs().subscribe(
        dataObs=&gt;{
          console.log(&quot;Display received data&quot;);
          console.log(dataObs);
          this.dataSource.data = dataObs;
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
        }
      )
    }
  
    logData(){
      console.log(this.dataSource);
    }
  }
  </code></pre>
  <p>My Service</p>
  <pre><code>getAllTimelogs(): Observable&lt;TimeLogTable[]&gt;{
    var timelogsArr: TimeLogTable[] = [];
    var timelogsArrDummy: TimeLogTable[] = [];
  
    //Call to backend
    this._http.get&lt;any&gt;('http://localhost:3000/gettimelogs?token=' + 
    localStorage.getItem('token'), this.httpOptions)
    .subscribe(
      res=&gt;{
        //Create timeLogTable from json with backend response
        for (let i = 0; i &lt; res.timelogs.length; i++) {
          timelogsArr.push({
            roomId: res.timelogs[i].roomId,
            startTime: new Date(res.timelogs[i].startTime),
            endTime: new Date (res.timelogs[i].endTime), 
            duration: &quot;test&quot;
          });
        }
      },
      err=&gt;{
        //Error handling
      }
    );
    //Return the Observable - DOES NOT WORK
    return of (timelogsArr);
  
    /*
    //Return the dummy data as an Observable - DOES WORK
    //Dummy data
    timelogsArrDummy = [
    {roomId: 'kit_A', startTime: new Date(1631185600000), endTime: new 
    Date (1631185661311), duration: &quot;test&quot;},
    {roomId: 'din_A', startTime: new Date(1631185600000), endTime: new 
    Date (1631195661311), duration: &quot;test&quot;},
    {roomId: 'off_A', startTime: new Date(1631185600000), endTime: new 
    Date (1632185661311), duration: &quot;test&quot;},
    {roomId: 'kit_B', startTime: new Date(1631185600000), endTime: new 
    Date (1631885661311), duration: &quot;test&quot;},
    ]
    return of (timelogsArrDummy);
    */
  }
  </code></pre>
  <p>Here a screenshot from the <code>console.log(dataObs)</code>:
  <a href="https://i.stack.imgur.com/faBjC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/faBjC.jpg" alt="enter image description here" /></a></p>