Skip to main content

​
@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, which passes resultSet into the callback function. Also you can use RxJS Subject 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 });
}