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 project and represents a bar chart from this project. 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 project (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: {}
};
})
Register a React Component to use in Angular.
To do so, use one of the following methods:
- Register the React Component using the
react-component directive.
- 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 line under the snippet from Step 3:
- Register the React component using the
reactDirective service.
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>
- Register the React Component using the
react-component directive.
You are now ready to use the GoodData React Components in your Angular app.