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

Branches

NOTE: You should use master branch of this repository if you want to run samples on your computer. Use the vnext branch only when you want to contribute new samples to this repository.

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
git checkout master

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 --legacy-peer-deps 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
select View - Terminal menu item
type npm install --legacy-peer-deps command in terminal window

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

Next, follow these steps:

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 --legacy-peer-deps 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

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.

Updating Version of IgniteUI Packages

Perform these steps to update version of Ignite UI for WebComponent packages in all samples. NOTE that the order of these steps is very important.

open this repo in VS Code
open gulp-samples.js file
navigate to the updateIG function
change version of Ignite UI for WebComponent packages in the packageUpgrades array
open terminal window
run gulp updateIG command
run npm install --legacy-peer-deps command
create pull request with your changes
open the Igniteui-xplat-example repo in VS Code
update version of Ignite UI for WebComponent packages in WC template
create pull request with your changes in Igniteui-xplat-example repo