title: Fill material table with data from API using angular DataSource
body: <p>I have an api which send data from backend, so when I try to get this data in my angular the data is not loaded in the first time, and my table stay empty, but if for example print the data that come from banckend before setting it in my DataSource, my table is fill correctly.</p>
  
  <p>My code is:</p>
  
  <p><strong>user-datasource.ts</strong></p>
  
  <pre><code>export class UserListDataSource extends DataSource&lt;User&gt; {
    data: User[];
    paginator: MatPaginator;
    sort: MatSort;
  
    constructor(private usersService: UsersService) {
      super();
    }
  
    connect(): Observable&lt;User[]&gt; {
      this.data = this.usersService.usersList();
      //this.data.forEach(u =&gt; console.log(u.id)); &lt;&lt;---------- When I log this, My data is fill corectly
      const dataMutations = [
        observableOf(this.data),
        this.paginator.page,
        this.sort.sortChange
      ];
  
      return merge(...dataMutations).pipe(map(() =&gt; {
        return this.getPagedData(this.getSortedData([...this.data]));
      }));
    }
    ...
  </code></pre>
  
  <p>}</p>
  
  <p><strong>userService</strong></p>
  
  <pre><code>export class UsersService {
  
    users: User[];
  
    constructor(private http: HttpClient) {}
  
    usersList() {    
      this.http.get(`${environment.apiUrl}/users`).pipe(
        map((jsonArray: Object[]) =&gt;  jsonArray.map(jsonItem =&gt; User.fromJson(jsonItem)))
      ).subscribe((users: User[]) =&gt; { this.users = users; });
  
      return this.users;
    }
  
  }
  </code></pre>
  
  <p><strong>component</strong></p>
  
  <pre><code>export class UserListComponent implements AfterViewInit, OnInit {
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
    @ViewChild(MatTable) table: MatTable&lt;User&gt;;
  
    dataSource: UserListDataSource = new UserListDataSource(this.usersService);
  
    displayedColumns = ['id', 'email', 'username'];
  
    constructor(private usersService: UsersService) { }
  
    ngOnInit() {}
  
    ngAfterViewInit() {
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
      this.table.dataSource = this.dataSource;
    }
  }
  </code></pre>
  
  <hr>
  
  <p>I'm not sure if I use the correct way to fill my table, or I miss something.</p>
  
  <p>From what I see, I think the backend took a long time than the frontend to load data, in another word, frontend is not waiting the necessary time to get data from backend.</p>
  
  <p>Is there any way to fix this please?</p>
  
  <hr>
  
  <p><strong>Note:</strong> I use angular material schematics to create all this, in the default code, it use a static data, which is not the solution for me, which I need to use dynamic data.</p>