Loading dtOptions later because of using a Promise/Observable

[marnickmenting]

I am using an Observable to load data that is used to load information about which columns to display. So this information needs to go into dtOptions. How do I make the directive wait for the dtOptions to be set?

What versions you are using?

• angular version: 2.4
• jquery version: 3.1.1
• datatables version: 1.10.13
• angular-datatables version: 2.1.0

What's the problem?

I get an error, probably because the datatable tries to initialize before the dtOptions are set. If I place the data directly in dtOptions without using the Http class, it works.

EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'aDataSort' of undefined
TypeError: Cannot read property 'aDataSort' of undefined

Can you share your code?

table.template.html:

<table datatable [dtOptions]="dtOptions" class="dataTable row-border hover"></table>

table.component.ts (shortened):

import { Http } from '@angular/http';

export class Table {
	dtOptions: any = {};

	constructor(private http:Http) { }

	ngOnInit(): void {

        this.http.get('app/table/table.config.json')
                .subscribe(res => {
		        this.dtOptions = res.json();
                });
}

[l-lin]

You can use the ngIf directive to display the table only when the options are loaded:

<div *ngIf="displayTable">
  <table datatable [dtOptions]="dtOptions" class="dataTable row-border hover"></table>
</div>

import { Http, OnInit } from '@angular/http';

export class Table implements OnInit {
  dOptions: any = {};
  displayTable: boolean = false;

  constructor(private http:Http) { }

  ngOnInit(): void {
    this.http.get('app/table/table.config.json')
      .subscribe(res => {
        this.dtOptions = res.json();
        this.displayTable = true;
    });
  }
}

[l-lin]

Or you can use a promise instead:

<table datatable [dtOptions]="dtOptions" class="dataTable row-border hover"></table>

import { Component, Inject, OnInit } from '@angular/core';
import { Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

@Component({
  selector: 'load-dt-options-with-promise',
  templateUrl: 'load-dt-options-with-promise.component.html'
})
export class LoadDtOptionsWithPromiseComponent implements OnInit {
  dtOptions: any = {};

  constructor(@Inject(Http) private http: Http) {}

  ngOnInit(): void {
    this.dtOptions = this.http.get('app/table/table.config.json')
    .toPromise()
    .then(response => response.json())
    .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }
}

[marnickmenting]

Indeed, using the promise works great. Thanks for the fast reply!