Use Angular 1.x · GoodData.UI

You can use the GoodData.UI Visual Components in your Angular 1.x_app. There are several ways how to use the React component. Here is how you do that with ngReact:

Add angular, react, react-dom, ngReact, and @gooddata/react-components dependencies into your project:

yarn add angular react react-dom ngreact @gooddata/react-components

Inject react (ngreact) as a dependency into your Angular module:

require('ngreact');

angular.module('app', ['react']);

In the JS file, review the following snippet. This snippet uses data from example workspace and represents the bar chart from this workspace. For testing purposes, you can use this snippet as is. When you start creating your own visualization, you can update this snippet according to what data you have in your workspace (measures, attributes, and so on), and what visualization you want to create (for example, a table or a KPI).

import angular from 'angular';
import 'ngreact';
import './styles/app.scss';
 
import { BarChart } from '@gooddata/react-components'; // Importing the required components
 
angular.module('gdcAngularApp', ['react']) // Injecting ngReact
.controller('MainPageController', function() {
    this.barChartProps = {
      afm: {
        measures: [
          {
            localIdentifier: 'CustomMeasureID',
            definition: {
              measure: {
                item: {
                  identifier: 'acKjadJIgZUN'
                }
              }
            },
            alias: '# of Activities'
          }
        ],
        attributes: [
          {
            localIdentifier: 'a1',
            displayForm: {
              identifier: 'label.activity.type'
            }
          }
        ]
      },
      projectId: 'la84vcyhrq8jwbu4wpipw66q2sqeb923',
      resultSpec: {}
  };
})

To do so, use one of the following methods:

In JS file, add the following line under the snippet from Step 3:
```
.value('BarChart', BarChart);
```

In the HTML file, insert the following snippet:

<body>
  <div ng-controller="MainPageController as ctrl">
    <div style="width: 600px; height: 600px;">
      <react-component name="BarChart" props="ctrl.barChartProps"/>
    </div>
  </div>
</body>

In JS file, add the following lines under the snippet from Step 3:

.directive('barChart', function(reactDirective) {
  return reactDirective(BarChart, ['afm', 'resultSpec', 'projectId']);
});

In the HTML file, insert the following snippet:

  <body>
    <div ng-controller="MainPageController as ctrl">
      <div style="width: 600px; height: 600px;">
        <bar-chart
          afm="ctrl.barChartProps.afm"
          resultSpec="ctrl.barChartProps.resultSpec"
          projectId="ctrl.barChartProps.projectId"
        />
      </div>
    </div>
  </body>

If you want to handle the loading and error content yourself and you do not want to use the default LoadingComponent and ErrorComponent, pass null explicitly:

LoadingComponent={null}
ErrorComponent={null}

You are now ready to use the GoodData React components in your Angular app.