Ignite UI for Angular - Samples

This project is using Ignite UI for Angular components to demonstrate different scenarios related to the usage of each component. The project is tightly related to Ignite UI DocFX Site Builder. All samples are part of the official component topics from our website.

The project is divided into two separate applications:

• A default application, which uses all the igniteui-angular components to demonstrate sample applications

• A Line of Business application, complemented with UI and functionality from the Ignite UI for Angular Charts and Ignite UI for Angular Excel library.

Setup

To setup the project run:

npm install

Build

Default App

To build the application project run:

npm run build

Line of Business App

To build the application project run:

npm run build:app-lob

These commands will produce an AOT build and live editing samples supporting both Sass and CSS.

Dev Server

Default App

To start the application dev server run:

npm run start

To start in modern browsers only, run:

npm run start:es6

Line of Business App

To start the application dev server run:

npm run start:app-lob

Starting from Angular v8 the project will not be supported/start in IE due to the new default compilation target es2015.

Dev Server and Live Editing

Default App

To generate the live editing applications along with the dev server run:

npm run start:live-editing

To start in modern browsers only, run:

npm run start:live-editing:es6

To generate live editing applications, using only Sass for styling run:

npm run start:live-editing:noCss

Line of Business App

To generate the live editing applications along with the dev server run:

npm run start:app-lob:live-editing

To omit CSS styling in the live editing applications:

npm run start:app-lob:live-editing:noCss

Live-Editing

All live-editing capabilities are performed by the package, that was previously part of the project.

Live-editing documentation could be found here. If you are interested in how the engine works, read the following section.

One of the most important functionality is the Configurator Generator as each Ignite UI for Angular component has a separate configurations (config) generator - read the following section if you are interested in the actual structure and how to configure it.

Live-Editing Watcher

Use this command to start the server with capability to regenerate live editing JSON files (e.g. "/src/assets/samples/avatar-sample-3.json") when a change related to the samples is made:

npm run start:watch-live-editing

To start in modern browsers only, run:

npm run start:watch-live-editing:es6

Generate Live-Editing JSON files

To generate only the live editing samples files (e.g. "/src/assets/samples/avatar-sample-3.json") run:

Default App

With CSS styling generation

npm run generate-live-editing --css=true

Without CSS styling generation:

npm run generate-live-editing

Line of Business App

With CSS styling generation

npm run generate-live-editing --css=true --appDv=true

Without CSS styling generation:

npm run generate-live-editing --appDv=true

Running with the DocFX project

In order to combine the execution of both DocFX and Ignite UI Angular Samples projects, use npm run start. After starting both projects you will see the embed samples into the DocFX site builder, under localhost:port hostname.

Running with custom igniteui-angular build

In order to test a specific branch created in igniteui-angular project with igniteui-angular-samples you have to follow these steps:

In igniteui-angular :

• build the source code with the version/branch you want to test:

  npm run build:lib

• copy the builded igniteui-angular folder, located in the dist directory

In igniteui-angular-samples:

• paste the copied igniteui-angular folder in the place of its corresponding folder in node_modules directory