title: How to get data into angular datatable using BehaviorSubject and Promises
body: <p>I want to update my database using BehaviorSubject and Promises and for that, I build a program but I found that my variable (that contains the object of Datatable data) undefined after debugging for that I found:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'length' of undefined at Object.eval
    [as updateDirectives]</p>
  </blockquote>
  
  <p>component.html:</p>
  
  <pre><code>&lt;div id="products" class="page-layout carded fullwidth inner-scroll"&gt;
  
      &lt;div class="top-bg accent"&gt;&lt;/div&gt;
  
      &lt;div class="center"&gt;
          &lt;div class="header accent"
               fxLayout="column" fxLayoutAlign="center center"
               fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center"&gt;
  
              &lt;div class="logo mb-24 mb-md-0"
                   fxLayout="row" fxLayoutAlign="start center"&gt;
                  &lt;mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}"&gt;
                      shopping_basket
                  &lt;/mat-icon&gt;
                  &lt;span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}"&gt;
                      Products
                  &lt;/span&gt;
              &lt;/div&gt;
  
              &lt;div class="search-wrapper mx-32 mx-md-0"&gt;
                  &lt;div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center"&gt;
                      &lt;mat-icon&gt;search&lt;/mat-icon&gt;
                      &lt;input #filter placeholder="Search for a product"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;button mat-raised-button
                      [routerLink]="'/apps/e-commerce/products/new'"
                      class="add-product-button fuse-white mt-24 mt-md-0"&gt;
                  &lt;span&gt;ADD NEW PRODUCT&lt;/span&gt;
              &lt;/button&gt;
  
  
          &lt;/div&gt;
  
          &lt;div class="content-card"&gt;
  
              &lt;mat-table class="products-table"
                         #table [dataSource]="dataSource"
                         matSort
                         [@animateStagger]="{value:'50'}"
                         fusePerfectScrollbar&gt;
  
                  &lt;ng-container matColumnDef="Nfamille"&gt;
                      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;ID&lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let product"&gt;
                          &lt;p class="text-truncate"&gt;{{product.FirstName}}&lt;/p&gt;
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
                  &lt;ng-container matColumnDef="Prenom"&gt;
                      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Name&lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let product"&gt;
                          &lt;p class="text-truncate"&gt;{{product.LastName}}&lt;/p&gt;
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
                  &lt;ng-container matColumnDef="Etat"&gt;
                      &lt;mat-header-cell *matHeaderCellDef fxHide mat-sort-header fxShow.gt-md&gt;Category&lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let product" fxHide fxShow.gt-md&gt;
                          &lt;p class="category text-truncate"&gt;
                              {{product.DriverStatus}}
                          &lt;/p&gt;
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
                  &lt;ng-container matColumnDef="Departemant"&gt;
                      &lt;mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs&gt;Price&lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let product" fxHide fxShow.gt-xs&gt;
                          &lt;p class="price text-truncate"&gt;
                              {{product.DepartmentString}}
                          &lt;/p&gt;
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
  
                  &lt;mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"&gt;&lt;/mat-header-row&gt;
  
                  &lt;mat-row *matRowDef="let product; columns: displayedColumns;"
                           class="product"
                           matRipple&gt;
                  &lt;/mat-row&gt;
  
              &lt;/mat-table&gt;
  
              &lt;mat-paginator #paginator
                             [length]="dataSource.filteredData.length"
                             [pageIndex]="0"
                             [pageSize]="10"
                             [pageSizeOptions]="[5, 10, 25, 100]"&gt;
              &lt;/mat-paginator&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and My component.ts:</p>
  
  <pre><code>dataSource: FilesDataSource | null;
  
    displayedColumns: string[] = ['Nfamille','Prenom','Etat','Departemant'];
  
    listdata: MatTableDataSource&lt;any&gt;;  
  
    @ViewChild(MatPaginator, {static: true})
    paginator: MatPaginator;
  
    @ViewChild(MatSort, {static: true})
    sort: MatSort;
  
    @ViewChild('filter', {static: true})
    filter: ElementRef;
  
    constructor(private service: GetionChauffeursService) { this._unsubscribeAll = new Subject();}
      private _unsubscribeAll: Subject&lt;any&gt;;
    ngOnInit() {
      this.dataSource = new FilesDataSource(this.service, this.paginator, this.sort);
  
      fromEvent(this.filter.nativeElement, 'keyup')
      .pipe(
          takeUntil(this._unsubscribeAll),
          debounceTime(150),
          distinctUntilChanged()
      )
      .subscribe(() =&gt; {
          if ( !this.dataSource )
          {
              return;
          }
  
          this.dataSource.filter = this.filter.nativeElement.value;
      });
  }
  
  
  
  
  
  }
  export class FilesDataSource extends DataSource&lt;any&gt;
  {
      private _filterChange = new BehaviorSubject('');
      private _filteredDataChange = new BehaviorSubject('');
  
  
      constructor(
        private service: GetionChauffeursService,
          private _matPaginator: MatPaginator,
          private _matSort: MatSort
      )
      {
          super();
  
          this.filteredData = this.service.listDriverElementEntity;
          console.log('here filter ' + this.service.listDriverElementEntity);//That log is show me undefiend
  
      }
  
      connect(): Observable&lt;any[]&gt;
      {
          const displayDataChanges = [
              this.service.onProductsChanged,
              this._matPaginator.page,
              this._filterChange,
              this._matSort.sortChange
          ];
  
          return merge(...displayDataChanges)
              .pipe(
                  map(() =&gt; {
                          let data = this.service.listDriverElementEntity.slice();
  
                          data = this.filterData(data);
  
                          this.filteredData = [...data];
  
                          data = this.sortData(data);
                              const startIndex = this._matPaginator.pageIndex * this._matPaginator.pageSize;
                          return data.splice(startIndex, this._matPaginator.pageSize);
                      }
                  ));
      }
  
      get filteredData(): any
      {
          return this._filteredDataChange.value;
      }
  
      set filteredData(value: any)
      {
          this._filteredDataChange.next(value);
      }
  
      get filter(): string
      {
          return this._filterChange.value;
      }
  
      set filter(filter: string)
      {
          this._filterChange.next(filter);
      }
  
  
      filterData(data): any
      {
          if ( !this.filter )
          {
              return data;
          }
          return FuseUtils.filterArrayByString(data, this.filter);
      }
  }
  </code></pre>
  
  <p>and finally, this is my service:</p>
  
  <pre><code>driverList: any;
    resultDrivers:GetUIDriverManagementParamResult;
    listDriverElementEntity:ListDriverElementEntity[];
    onProductsChanged: BehaviorSubject&lt;any&gt;;
  httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    }
  constructor(private http: HttpClient) {        
      // Set the defaults
      this.onProductsChanged = new BehaviorSubject({}); }
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;any&gt; | Promise&lt;any&gt; | any {
      return new Promise((resolve, reject) =&gt; {
  
        Promise.all([
            this.getProducts()
        ]).then(
            () =&gt; {
                resolve();
            },
            reject
        );
    });
    }
   getProducts(): Promise&lt;any&gt;
      {
          return new Promise((resolve, reject) =&gt; {
            this.http.post(`${this.GeneralURL}/GetUIDriverManagementParam`, JSON.stringify(this.data), this.httpOptions)
                  .subscribe((response: any) =&gt; {
                    this.driverList = json2array(response) ;
                    this.resultDrivers =  this.driverList ;
                   this.listDriverElementEntity = this.resultDrivers[0].ListDriverElement;
                   console.log( this.listDriverElementEntity);
                      //this.products = response;
                      this.onProductsChanged.next(this.listDriverElementEntity);
                      resolve(response);
                  }, reject);
          });
      }
  </code></pre>