Getting started with Angular TreeMap component

30 Jul 20268 minutes to read

This document explains the steps required to create and render a TreeMap component and demonstrates the component’s basic usage.

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion® Angular UI Components, which covers supported Node.js, Angular, and @syncfusion/ej2-angular-treemap versions.

You also need a modern code editor such as Visual Studio Code, Cursor, or Syncfusion® CodeStudio.

Setup the Angular application

A straightforward approach to begin with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Verify the installation:

ng version

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Installing a specific version

To install a particular version of Angular CLI, use:

npm install -g @angular/[email protected]

Create an Angular application

With Angular CLI installed, execute this command to generate a new application. When prompted, accept the default options unless you have a specific reason to change them.

ng new syncfusion-angular-app
  • This command prompts you to configure settings like enabling Angular routing and choosing a stylesheet format. Accept the defaults (no routing, CSS) to follow this guide.
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]
  • By default, a CSS-based application is created. Use SCSS if required:
ng new syncfusion-angular-app --style=scss
  • During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Server-side rendering prompt

  • Select the required AI tool, or ‘none’ if you do not need any AI tool.

AI tool selection prompt

  • Navigate to your newly created application directory:
cd syncfusion-angular-app

In Angular 19 and below, the CLI generates files named app.component.ts, app.component.html, app.component.css, and so on. In Angular 20+, the structure is simpler: src/app/app.ts, app.html, and app.css (no .component. suffixes).

Adding the Syncfusion® Angular TreeMap package

To install the Syncfusion® Angular TreeMap package, use the following command:

ng add @syncfusion/ej2-angular-treemap

The ng add command installs the package, registers it in package.json, and configures the required entries in your workspace automatically.

If ng add is unavailable in your setup, install the package manually with:

npm install @syncfusion/ej2-angular-treemap

Add Syncfusion® Angular TreeMap component

Modify the template in app.component.ts to render the ej2-angular-treemap component. The example below shows a minimal standalone component that mounts an empty TreeMap container.

import { Component } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
    imports: [TreeMapModule],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the treemap component
    template: `<ejs-treemap id='treemap-container'></ejs-treemap>`,
})
export class AppComponent { }

Run the application

Run the following command to launch the development server and open the application in your default browser:

npm start

Module Injection

The TreeMap component is divided into individual feature-based modules. To use a specific feature, you must inject its service provider. For standalone components, register services in the providers array of the component. This example uses the tooltip feature of the TreeMap component.

  • TreeMapTooltipService - Inject this provider to use tooltip feature.
import { Component, ViewEncapsulation } from '@angular/core';
import { TreeMapModule, TreeMapTooltipService } from '@syncfusion/ej2-angular-treemap';

@Component({
    imports: [TreeMapModule],
    standalone: true,
    selector: 'app-root',
    providers: [TreeMapTooltipService],
})
export class AppComponent { }

Render TreeMap with Data

This section shows how to render a TreeMap using a bound data source. The example visualizes the number of international airports in South America.

import { TreeMapModule, TreeMapTooltipService } from '@syncfusion/ej2-angular-treemap'
import { Component } from '@angular/core';

@Component({
imports: [TreeMapModule],
providers: [ TreeMapTooltipService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-treemap id='container' style='display: block;' height='350px' [tooltipSettings]='tooltipSettings' [dataSource]='data' weightValuePath='Count'
    [leafItemSettings]='leafItemSettings'>
    </ejs-treemap>`
})
export class AppComponent {
    public data: object[] = [
        { Title: 'State wise International Airport count in South America', State: 'Brazil', Count: 25 },
        { Title: 'State wise International Airport count in South America', State: 'Colombia', Count: 12 },
        { Title: 'State wise International Airport count in South America', State: 'Argentina', Count: 9 },
        { Title: 'State wise International Airport count in South America', State: 'Ecuador', Count: 7 },
        { Title: 'State wise International Airport count in South America', State: 'Chile', Count: 6 },
        { Title: 'State wise International Airport count in South America', State: 'Peru', Count: 3 },
        { Title: 'State wise International Airport count in South America', State: 'Venezuela', Count: 3 },
        { Title: 'State wise International Airport count in South America', State: 'Bolivia', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Paraguay', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Uruguay', Count: 2 },
        { Title: 'State wise International Airport count in South America', State: 'Falkland Islands',Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'French Guiana', Count:1 },
        { Title: 'State wise International Airport count in South America', State: 'Guyana', Count: 1 },
        { Title: 'State wise International Airport count in South America', State: 'Suriname', Count: 1 },
    ];
    public leafItemSettings: object = {
        labelPath: 'State'
    };

    public tooltipSettings: object = {
            visible: true
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Troubleshooting

  • Empty TreeMap container - Verify that dataSource and weightValuePath are set, and that the field referenced by weightValuePath contains numeric values.
  • Feature not working (legend, tooltip, selection, highlight) - Ensure the matching service (TreeMapLegendService, TreeMapTooltipService, etc.) is registered in the providers array.
  • Build errors with standalone components - Make sure TreeMapAllModule is imported in the imports array of every standalone component that uses TreeMap directives.

See also