How to Use React Components in Angular 1.x

You can use the GoodData React Components in your Angular 1._x_app.

The supported version of TypeScript is 2.3+.

The supported version of React is 15.3.2.

Server-side rendering is_not_supported.

There are many way 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 the GoodSales demo workspace and represents a 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). For information about components that you can use, their structure and examples, see React Components.

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>

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