Data binding in Angular Treemap component
19 Sep 20223 minutes to read
The TreeMap control supports data binding using the dataSource property.
Populate data
The dataSource
property accepts collection values as input. For example, a list of objects can be provided as input. Data can be given as either flat or hierarchical collection to the dataSource
property.
Flat collection
The following code shows, how to bind a flat collection as data source to the TreeMap control.
import { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' height='350px' [dataSource]='data' weightValuePath='GDP'
[leafItemSettings]='leafItemSettings'>
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [
{State:"United States", GDP:17946, percentage:11.08, Rank:1},
{State:"China", GDP:10866, percentage: 28.42, Rank:2},
{State:"Japan", GDP:4123, percentage:-30.78, Rank:3},
{State:"Germany", GDP:3355, percentage:-5.19, Rank:4},
{State:"United Kingdom", GDP:2848, percentage:8.28, Rank:5},
{State:"France", GDP:2421, percentage:-9.69, Rank:6},
{State:"India", GDP:2073, percentage:13.65, Rank:7},
{State:"Italy", GDP:1814, percentage:-12.45, Rank:8},
{State:"Brazil", GDP:1774, percentage:-27.88, Rank:9},
{State:"Canada", GDP:1550, percentage:-15.02, Rank:10}
];
public leafItemSettings: object = {
labelPath: 'State'
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);