title: Replacing dataSource in @angular:material:table
body: <p>i am a newcomer angular users. i just learn how to generate angular material schematic table with using @angular/material:table. recently, i just wanna to replace all data from datasource with my angular-in-memory-web-api data source that i just made. but, there's sneaky error that tellin me &quot;expected 1 arguments, but got 0&quot; in user-table.components.ts (i made bold font for the error occurs in vscode)</p>
  <p>here's my code</p>
  <pre><code>import { DataSource } from '@angular/cdk/collections';
  import { MatPaginator } from '@angular/material/paginator';
  import { MatSort } from '@angular/material/sort';
  import { map } from 'rxjs/operators';
  import { Observable, of as observableOf, merge } from 'rxjs';
  import { User } from '../user-skeleton';
  import { UsersService } from '../users.service';
  
  
  /**
   * Data source for the UserTable view. This class should
   * encapsulate all logic for fetching and manipulating the displayed data
   * (including sorting, pagination, and filtering).
   */
  export class UserTableDataSource extends DataSource&lt;User&gt;{
    data: User[] = [];
    paginator: MatPaginator | undefined;
    sort: MatSort | undefined;
  
    constructor(
      private userService: UsersService
      ) {
        super();
      }
  
    getUsers(): void{
      this.userService.getUsers()
      .subscribe(data =&gt; this.data = data)
    }
  
    /**
     * Connect this data source to the table. The table will only update when
     * the returned stream emits new items.
     * @returns A stream of the items to be rendered.
     */
    connect(): Observable&lt;User[]&gt; {
      if (this.paginator &amp;&amp; this.sort) {
        return merge(observableOf(this.data), this.paginator.page, this.sort.sortChange)
          .pipe(map(() =&gt; {
            return this.getPagedData(this.getSortedData([...this.data ]));
          }));
      } else {
        throw Error('Please set the paginator and sort on the data source before connecting.');
      }
    }
  
    disconnect(): void {}
  
    private getPagedData(data: User[]): User[] {
      if (this.paginator) {
        const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
        return data.splice(startIndex, this.paginator.pageSize);
      } else {
        return data;
      }
    }
  
    /**
     * Sort the data (client-side). If you're using server-side sorting,
     * this would be replaced by requesting the appropriate data from the server.
     */
    private getSortedData(data: User[]): User[] {
      if (!this.sort || !this.sort.active || this.sort.direction === '') {
        return data;
      }
  
      return data.sort((a, b) =&gt; {
        const isAsc = this.sort?.direction === 'asc';
        switch (this.sort?.active) {
          case 'name': return compare(a.name, b.name, isAsc);
          case 'id': return compare(+a.id, +b.id, isAsc);
          default: return 0;
        }
      });
    }
  }
  
  function compare(a: string | number, b: string | number, isAsc: boolean): number {
    return (a &lt; b ? -1 : 1) * (isAsc ? 1 : -1);
  }
  </code></pre>
  <p>and here is my user-table.compoents.ts</p>
  <pre><code>    import { AfterViewInit, Component, ViewChild } from '@angular/core';
  import { MatPaginator } from '@angular/material/paginator';
  import { MatSort } from '@angular/material/sort';
  import { MatTable } from '@angular/material/table';
  import { User } from '../user-skeleton';
  import { UsersService } from '../users.service';
  import { UserTableDataSource } from './user-table-datasource';
  
  @Component({
    selector: 'app-user-table',
    templateUrl: './user-table.component.html',
    styleUrls: ['./user-table.component.css']
  })
  export class UserTableComponent implements AfterViewInit {
    @ViewChild(MatPaginator) paginator!: MatPaginator;
    @ViewChild(MatSort) sort!: MatSort;
    @ViewChild(MatTable) table!: MatTable&lt;User&gt;;
    dataSource: UserTableDataSource;
  
    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
    displayedColumns = ['id', 'name', 'age', 'gender'];
  
    constructor(
      private userService: UsersService
    ) {
      this.dataSource = **new UserTableDataSource();**
    }
  
    ngAfterViewInit(): void {
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
      this.table.dataSource = this.dataSource;
    }
  }
  </code></pre>
  <p>any help would be really appreciated! thanks community :)</p>