DevExtreme Angular - Create and Configure a Widget

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

• Link Resources: Local Scripts | CDN Services | NuGet Package | Bower Package | npm Package

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.

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

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

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

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

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

<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 widget options with the value of a scope property. For example, the following code declares the fruitsData property within the scope of a controller. The dataSource option of a dxChart is initialized with the value of this property.

function Controller ($scope) {
    $scope.fruitsData = [
        { fruit: 'Oranges', total: 10 },
        { fruit: 'Apples', total: 15 },
        { fruit: 'Bananas', total: 9 }
    ];
}

<div ng-controller="Controller">
    <div dx-chart="{
        dataSource: fruitsData,
        series: { argumentField: 'fruit', valueField: 'total' }
    }"></div>
</div>

As an alternative, you can declare the whole object of widget options in the scope and pass it to the widget directive.

function Controller($scope) {
    $scope.chartOptions = {
        dataSource: [
            { fruit: 'Oranges', total: 10 },
            { fruit: 'Apples', total: 15 },
            { fruit: 'Bananas', total: 9 }
        ],
        series: { argumentField: 'fruit', valueField: 'total' }
    };
}

<div ng-controller="Controller">
    <div dx-chart="chartOptions"></div>
</div>

See Also

• API Reference.WidgetName.Configuration, for example, API Reference.Chart.Configuration
• Change Options