Reference
JavaScript SDK
ngx

@cubejs-client/ngx

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

Installation

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 CubeClientModule to your app.module.ts file:

import { CubeClientModule } from '@cubejs-client/ngx';
import { environment } from '../../environments/environment';
 
const cubeOptions = {
  token: environment.CUBE_API_TOKEN,
  options: { apiUrl: environment.CUBE_API_URL }
};
 
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    CubeClientModule.forRoot(cubeOptions)
  ],
  providers: [...],
  bootstrap: [...]
})
export class AppModule { }

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

CubeClientModule provides CubeClient, which you can inject into your components or services:

import { CubeClient } from "@cubejs-client/ngx";
 
export class AppComponent {
  constructor(private cube: CubeClient) {}
 
  ngOnInit() {
    this.cube
      .load({
        measures: ["some_measure"],
      })
      .subscribe(
        (resultSet) => {
          this.data = resultSet.chartPivot();
        },
        (err) => console.log("HTTP Error", err)
      );
  }
}

API

CubeClient provides the same API methods as @cubejs-client/core. The difference is that instead of Promise it returns an Observable (opens in a new tab), which passes resultSet into callback function.

Also you can use RxJS Subject (opens in a new tab) with a query using watch method:

private query;
 
ngOnInit() {
  this.query = new Subject();
  this.cube.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 });
}
reactvue