Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss

Create and Configure a Widget

Make sure you linked all the required resources before creating a UI component:

For operating with AngularJS, DevExtreme includes an AngularJS module registered under the name "dx". Add it to the list of dependencies for your application module.

JavaScript
angular.module('myApp', [ 'dx' ]);

The "dx" module contains directives that you use to create any DevExtreme UI component. For instance, the dx-button directive creates a Button UI component, dx-range-slider creates a RangeSlider, etc. Note that all DevExtreme directives satisfy the AngularJS normalization rules: dx-UI-component-name.

Any DevExtreme directive should be associated with a <div> HTML element, which plays the role of a container for the UI component. For example, the following code creates a Chart UI component in a <div> container.

HTML
<div dx-chart=""></div>

To configure a UI component, pass an object to the UI component directive. Note that the properties of this object mirror the properties of the UI component.

HTML
<div dx-chart="{ 
    dataSource: [
        { fruit: 'Oranges', total: 10 },
        { fruit: 'Apples', total: 15 },
        { fruit: 'Bananas', total: 9 }
    ],
    series: { argumentField: 'fruit', valueField: 'total' }
 }"></div>

You can initialize UI component properties with the value of a scope property. For example, the following code declares the fruitsData property within the scope of a controller. The dataSource property of a dxChart is initialized with the value of this property.

JavaScript
function Controller ($scope) {
    $scope.fruitsData = [
        { fruit: 'Oranges', total: 10 },
        { fruit: 'Apples', total: 15 },
        { fruit: 'Bananas', total: 9 }
    ];
}
HTML
<div ng-controller="Controller">
    <div dx-chart="{
        dataSource: fruitsData,
        series: { argumentField: 'fruit', valueField: 'total' }
    }"></div>
</div>
NOTE
Initializing UI component properties in this manner does not mean that the UI component property will be changed once its scope property is changed. If you are looking for this kind of data binding, refer to the Change Options topic.

As an alternative, you can declare the whole object of UI component properties in the scope and pass it to the UI component directive.

JavaScript
function Controller($scope) {
    $scope.chartOptions = {
        dataSource: [
            { fruit: 'Oranges', total: 10 },
            { fruit: 'Apples', total: 15 },
            { fruit: 'Bananas', total: 9 }
        ],
        series: { argumentField: 'fruit', valueField: 'total' }
    };
}
HTML
<div ng-controller="Controller">
    <div dx-chart="chartOptions"></div>
</div>
See Also