DevExtreme Angular - Access a Funnel Item Using the API

Call the getAllItems() method to access funnel items. It returns a collection of objects whose fields and methods are described in the Item section.

jQuery
JavaScript
var funnelItems = $("#funnelContainer").dxFunnel("getAllItems");
Angular
TypeScript
import { ..., ViewChild } from '@angular/core';
import { DxFunnelModule, DxFunnelComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxFunnelComponent) funnel: DxFunnelComponent;
    funnelItems: any = [];
    getFunnelItems() {
        this.funnelItems = this.funnel.instance.getAllItems();
    }
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})

You can also access a funnel item in the event handlers. For example, the onItemClick event handler gets the clicked item in the argument.

jQuery
JavaScript
$(function() {
    $("#funnelContainer").dxFunnel({
        // ...
        onItemClick: function (e) {
            var item = e.item;
            // ...
        }
    });
});
Angular
HTML
TypeScript
<dx-funnel
    (onItemClick)="onItemClick($event)">
</dx-funnel>
import { DxFunnelModule } from 'devextreme-angular';
// ...
export class AppComponent {
    onItemClick (e) {
        let item = e.item;
        // ...
    };
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})
See Also