Getting Started With Ignite UI for Web Components

The Ignite UI for Web Components is a complete set of Web Components components designed to enable developers to build the most modern, high-performance HTML5 & TypeScript apps for modern desktop browsers.

Setting Up Computer

Before you can run Ignite UI for Web Components, there are 2 steps to get everything on your machine set up to run any Web Components app, including Ignite UI for Web Components, and to build Web Components apps. To get started, you must install both NodeJS and Visual Studio Code on your machine. Modern web development with Web Components requires NodeJS, it’s sort of like an ASP.NET app running in the browser and requires ASP.NET runtime deployed on the server. For development, there is nothing better than Visual Studio Code to build Web Components apps. Getting started is easy, just download and install both Node.js and Visual Studio Code.

Updating Existing App

If you want to use Ignite UI for Web Components in an existing Web Components CLI project (one that you have from before). We have you covered! All you have to do is execute these commands:

  • npm install --save igniteui-webcomponents-charts igniteui-webcomponents-core
  • npm install --save igniteui-webcomponents-excel igniteui-webcomponents-core
  • npm install --save igniteui-webcomponents-gauges igniteui-webcomponents-core
  • npm install --save igniteui-webcomponents-grids igniteui-webcomponents-core
  • npm install --save igniteui-webcomponents-maps igniteui-webcomponents-core
  • npm install --save igniteui-webcomponents-spreadsheet igniteui-webcomponents-core


  • yarn add igniteui-webcomponents-charts igniteui-webcomponents-core
  • yarn add igniteui-webcomponents-excel igniteui-webcomponents-core
  • yarn add igniteui-webcomponents-gauges igniteui-webcomponents-core
  • yarn add igniteui-webcomponents-grids igniteui-webcomponents-core
  • yarn add igniteui-webcomponents-maps igniteui-webcomponents-core
  • yarn add igniteui-webcomponents-spreadsheet igniteui-webcomponents-core

This will automatically install packages for Ignite UI for Web Components, along with all of their dependencies, font imports and styles references to the existing project.

Starting App

You can build for production or start your application with these commands:

  • npm run-script build
  • npm run-script start

After executing those simple commands, your project will be built and served. It will automatically open in your default browser and you will be able to use Ignite UI for Web Components components in your project.

Importing Modules

First we have to import the required modules of the components we want to use. We will go ahead and do this for the GeographicMap component.

import { IgcGeographicMapModule } from "igniteui-webcomponents-maps/ES5/igc-geographic-map-module";
import { IgcGeographicMapComponent } from "igniteui-webcomponents-maps/ES5/igc-geographic-map-component";
import { IgcDataChartInteractivityModule } from "igniteui-webcomponents-charts/ES5/igc-data-chart-interactivity-module";
import { ModuleManager } from 'igniteui-webcomponents-core/ES5/module-manager';


Using Components

We are now ready to use the Ignite UI for Web Components map component in our markup! Let's go ahead and define it:

<div style="height: 100%, width: 100%">

Running Application

Finally, we can run our new application by using one of the following commands:

  • npm run-script start

The final result should look something like this screenshot: