Ignite UI for Angular - From Infragistics
View samples here
Note: as of January 3rd 2017 the license for this project has changed from MIT to Apache 2.0. For more information about these licenses please click here
Material-based UI Components and supporting directives for Angular by Infragistics including samples and tests. Source files under the src folder.
Current list of controls include:
| Components | Status | Docs | Directives | Status | Docs | |
|---|---|---|---|---|---|---|
| avatar | Available | Readme | button | Available | Readme | |
| badge | Available | Readme | filter | Available | Readme | |
| carousel | Available | Readme | ripple | Available | Readme | |
| list | Available | Readme | input | Available | Readme | |
| navbar | Available | Readme | label | Available | Readme | |
| tabbar | Available | Readme | layout | Available | Readme | |
| dialog | Available | Readme | ||||
| snackbar | Available | Readme | ||||
| toast | Available | Readme | ||||
| navigation drawer | Available | Readme | ||||
| radio | Available | Readme | ||||
| checkbox | Available | Readme | ||||
| switch | Available | Readme | ||||
| scroll | Available | Readme | ||||
| linear progress | Available | Readme | ||||
| circular progress | Available | Readme | ||||
| icon | Available | Readme | ||||
| card | Available | Readme | ||||
| grid | Available | Readme | ||||
| slider | Available | Readme | ||||
| calendar | Available | Readme | ||||
| buttonGroup | Available | Readme | ||||
| dataContainer | Available | Readme | ||||
| dataUtil | Available | Readme | ||||
| datePicker | Available | Readme |
Setup
From the root folder run:
npm install
Build Library
In case your editor cannot auto-compile the TypeScript files (VS, VS Code, others with plugins) there's a configured npm command in place to run the compiler:
For both ESM and UMD builds
npm run build
npm run build:watch // run in watch mode
ESM build only
npm run build:esm
npm run build:esm:watch // run in watch mode
UMD build only
npm run build:umd
npm run build:umd:watch // run in watch mode
Run Demos
The demos directory contains a sample application showcasing the components and directives of the library.
If you want to run the application make sure to install the application dependencies:
cd demos && npm install
Run the following command from the root directory of your repository. This will open the demos application in your preferred browser. Any changes in the application code will trigger a rebuild of the application.
npm run start:demos
In case you want to explore/experiment with the library code start the demo application with:
npm run start:dev
It will watch both the src and demos directories and will rebuild both the library and the application.
NPM Package
You can include Ignite UI JS Blocks in your project as a dependency using the NPM package.
npm install igniteui-js-blocks --save-dev
Contributing
Quickstart App
IgniteUI JS Blocks Quickstart app This repository is a fork of the Angular QuickStart Source and has been updated to demonstrate how to include and use components from the Ignite UI JS Blocks. It basically follows the shortest path to bootstrap writing the application with IgniteUI JS Blocks:
- Fork the the angular quickstart
- Install IgniteUI JS Blocks from npm using
npm install igniteui-js-blocks --save-dev - Update the views with sample JS Blocks controls.