`@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 the 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 }); }

react vue