Examples of Ignite UI for Web Components

This repository contains over 300 examples on how to use Ignite UI for Web components:

• Charts: Area, Bar, Column, Composite, Donut, Financial/Stock, Line, Pie, Polar, Radial, Scatter, Shape, Sparkline, Stacked, Step,
• Maps: Geographic Map, Treemap,
• Gauges: Bullet Graph, Linear Gauge, Radial Gauges
• Grids: Table / Grid, Excel Spreadsheet, Excel Library
• Other: Dock Manager, Date Picker, Multi-Column Combobox

Preview

You can preview and browse all samples in this repository by opening our Web Components Browser. Alternatively, you you can view these samples with detailed information in our Web Component Documentation.

In addition, you can run each sample project individually from the ./samples folder or you can run from the ./browser folder to browse all samples in one website (see instructions below). You can run each sample on Code Sandbox website by clicking on the Edit Sandbox button in a readme file of sample project, e.g.

./samples/charts/category-chart/overview/README.md

Setup

To set up this project locally, clone this repository:

git clone https://github.com/IgniteUI/igniteui-wc-examples.git

Running Individual Sample

Follow these instructions to run a single sample on your computer:

• in VS Code, open a folder with existing sample, e.g.

./samples/charts/category-chart/overview

• type npm install command in terminal window

• type npm run start command in terminal window

• Wait until the build is completed and then open http://localhost:4200 in your browser.

At this point, you should see a website hosted example of Ignite UI for Web Components

Running All Samples

Follow these instructions to run all samples locally in a browser application.

• open VS Code as Administrator

• open the ./browser folder

• select View - Terminal menu item

• type npm install command in terminal window

This will install required packages and Ignite UI for Web Components packages from npm website:

• igniteui-webcomponents-core
• igniteui-webcomponents-charts
• igniteui-webcomponents-excel
• igniteui-webcomponents-gauges
• igniteui-webcomponents-grids
• igniteui-webcomponents-maps
• igniteui-webcomponents-spreadsheet
• igniteui-webcomponents-datasources

Next, follow these steps:

• type gulp updateBrowser command in terminal window. This will copy all source files of individually sample projects from ./samples to the ./browser folder.

• type npm run start command in terminal window to start the browser application locally

• Wait until the build is completed and then open http://localhost:4200 in your browser. You should see a website with navigation menu for browning all samples in this repository.

Adding New Sample

• create a new branch from the vnext branch

• open a folder with existing sample, e.g.

./samples/charts/category-chart/axis-options/

• copy the sample and rename the new folder, e.g.

./samples/charts/category-chart/axis-types/

• open the newly created folder in VS Code

• rename the .ts file in src folder, using this naming convention:

ControlNameSampleName.ts

./samples/charts/category-chart/axis-types/src/CategoryChartAxisTypes.ts

• open the .ts file

• rename class to the name of .tsx file

• type npm install command in terminal window

• type npm run start command in terminal window

• implement the new sample in the .tsx file

• close the new sample project in VS Code

• delete node_modules folder in the new sample project

• follow instructions in the next section

Verify New Sample

• open the ./browser folder of this repository in VS Code

• type gulp updateSamples command in terminal window

NOTE this will re-generate the Readme.md file in the new sample

• type npm run start command in terminal window

• open http://localhost:4200 in your browser

• verify that the new sample is listed in the navigation menu

• verify that the new sample loads by clicking navigation link

• verify that there are no errors in DEV console

• take a screenshot of the new sample with navigation menu

• commit your changes

• create a pull request and target the vnext branch

• paste the screenshot in you pull request

• submit your pull request

Learn More

To learn more about Ignite UI for Web Components components, check out the Web Components documentation.