Edit this page

@cubejs-client/ngx

@cubejs-client/ngx provides Angular Module for easy integration Cube.js into an Angular app.

First, install @cubejs-client/ngx using npm or yarn:

$ npm install --save @cubejs-client/ngx
# or
$ yarn add @cubejs-client/ngx

Now you can add CubejsClientModule to your app.module.ts file:

import { CubejsClientModule } from '@cubejs-client/ngx';
import { environment } from '../../environments/environment';

const cubejsOptions = {
  token: environment.CUBEJS_API_TOKEN,
  options: { apiUrl: environment.CUBEJS_API_URL }
};

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    CubejsClientModule.forRoot(cubejsOptions)
  ],
  providers: [...],
  bootstrap: [...]
})
export class AppModule { }

The options object is passed directly to @cubejs-client/core.

CubejsClientModule provides CubejsClient, which you can inject into your components or services:

import { CubejsClient } from '@cubejs-client/ngx';

export class AppComponent {
  constructor(private cubejs:CubejsClient){}

  ngOnInit(){
    this.cubejs.load({
      measures: ["some_measure"]
    }).subscribe(
      resultSet => {
        this.data = resultSet.chartPivot();
      },
      err => console.log('HTTP Error', err)
    );
  }
}

CubejsClient provides the same API methods as @cubejs-client/core. The difference is that instead of Promise it returns an Observable, which passes resultSet into callback function.

Also you can use RxJS Subject with a query using watch method:

private query;

ngOnInit() {
  this.query = new Subject();
  this.cubejs.watch(this.query).subscribe(
    resultSet => {
      console.log(resultSet.chartPivot()[0].x);
      console.log(resultSet.seriesNames()[0]);
    },
    err => console.log('HTTP Error', err)
  );
}

button1ClickHandler() {
  this.query.next({ query_1 });
}

button2ClickHandler() {
  this.query.next({ query_2 });
}