# Ignite UI for Angular - from Infragistics

[![Build Status](https://dev.azure.com/IgniteUI/igniteui-angular/_apis/build/status/IgniteUI.igniteui-angular)](https://dev.azure.com/IgniteUI/igniteui-angular/_build/latest?definitionId=3)
[![Build Status](https://travis-ci.org/IgniteUI/igniteui-angular.svg?branch=master)](https://travis-ci.org/IgniteUI/igniteui-angular)
[![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-angular/badge.svg?branch=master)](https://coveralls.io/github/IgniteUI/igniteui-angular?branch=master)
[![npm version](https://badge.fury.io/js/igniteui-angular.svg)](https://badge.fury.io/js/igniteui-angular)

[Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular) is a complete set of Material-based UI Widgets, Components & Sketch UI kits and supporting directives for [Angular](https://angular.io/) by Infragistics.  Ignite UI for Angular is designed to enable developers to build the most modern, high-performance HTML5 & JavaScript apps for modern desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting Google's Angular framework.

You can find source files under the [`src`](https://github.com/IgniteUI/igniteui-angular/tree/master/src) folder, including samples and tests.

#### [**View running samples here**](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html)
#### [**Install our VSCode Toolbox extension**](https://marketplace.visualstudio.com/items?itemName=Infragistics.igniteui-angular-toolbox)
![](https://dl.infragistics.com/tools/extensions/angular-toolbox/toolbox.gif)
#### [**Install our VSCode tooltip extension**](https://marketplace.visualstudio.com/items?itemName=Infragistics.igniteui-angular-tooltips)
![](https://dl.infragistics.com/tools/extensions/angular-tooltips/tooltip_preview.gif)

**IMPORTANT** The repository has been renamed from `igniteui-js-blocks` to `igniteui-angular`. Read more on our new [naming convention](https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-github-repo-name-changes).

Current list of controls include:


| *Components*          | Status        |                                                                                                                                               |                                                                                                           |     | *Directives*            | Status            |                                                                                                                                               |                                                                                                           |
| :-:                   | :-:           | :-:                                                                                                                                           | :-:                                                                                                       | :-: | :-:                     | :-:               | :-:                                                                                                                                           | :-:                                                                                                       |
| **avatar**            | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/avatar/README.md)                         | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/avatar.html)            |     | **button**              |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/button/README.md)              | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button.html)            |
| **badge**             | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/badge/README.md)                          | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/badge.html)             |     | **dragdrop**            |     InProgress    | [Readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/directives/dragdrop/README.md)            | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dragdrop.html)          |
| **buttonGroup**       | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/buttonGroup/README.md)                    | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html)       |     | **filter**              |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/filter/README-FILTER.md)       | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list.html)              |
| **calendar**          | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/calendar/README.md)                       | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar.html)          |     | **forOf**               |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/for-of/README.md)              | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/for_of.html)            |
| **card**              | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/card/README.md)                           | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/card.html)              |     | **hint**                |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/input-group/README.md)                    | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)       |
| **carousel**          | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/carousel/README.md)                       | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel.html)          |     | **input**               |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/input/README.md)               | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)       |
| **checkbox**          | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/checkbox/README.md)                       | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/checkbox.html)          |     | **label**               |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/label/README.md)               | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)       |
| **chips**             | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/chips/README.md)                          | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/chip.html)             |     | **layout**              |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/layout/README.md)              | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/layout.html)            |
| **circular progress** | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/progressbar/README.md)                    | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/circular_progress.html) |     | **mask**                |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/mask/README.md)                | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/mask.html)              |
| **combo**             | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/README.md)                          | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo.html)   |     | **prefix**              |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/input-group/README.md)                    | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)       |
| **datePicker**        | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-picker/README.md)                    | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date_picker.html)       |     | **ripple**              |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/ripple/README.md)              | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button.html)            |
| **dialog**            | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/dialog/README.md)                         | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog.html)            |     | **suffix**              |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/input-group/README.md)                    | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)       |
| **drop down**         | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/drop-down/README.md)                      | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop_down.html)         |     | **text-highlight**      |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/directives/text-highlight/README.md)      |                                                                                                           |
| **grid**              | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grid/README.md)                           | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html)              |     | **text-selection**      |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/directives/text-selection/README.md)      |                                                                                                           |
| **icon**              | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/icon/README.md)                           | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/icon.html)              |     | **toggle**              |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/toggle/README.md)              | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toggle.html)            |
| **input group**       | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/input-group/README.md)                    | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)       |     | *Others*                | Status            | Docs                                                                                                                                          |                                                                                                           |
| **list**              | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/list/README.md)                           | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list.html)              |     | **Animations**          |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/animations/README.md)                     |                                                                                                           |
| **navbar**            | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/navbar/README.md)                         | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navbar.html)            |     | **dataUtil**            |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/data-operations/README-DATAUTIL.md)       |                                                                                                           |
| **navigation drawer** | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/navigation-drawer/README.md)              | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer.html)         |     | **dataContainer**       |     Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/data-operations/README-DATACONTAINER.md)  |                                                                                                           |
| **radio**             | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/radio/README.md)                          | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio_button.html)      |     |                         |                   |                                                                                                                                               |                                                                                                           |
| **slider**            | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/slider/README.md)                         | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider.html)            |     |                         |                   |                                                                                                                                               |                                                                                                           |
| **snackbar**          | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/snackbar/README.md)                       | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar.html)          |     |                         |                   |                                                                                                                                               |                                                                                                           |
| **switch**            | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/switch/README.md)                         | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/switch.html)            |     |                         |                   |                                                                                                                                               |                                                                                                           |
| **tabbar**            | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tabbar/README.md)                         | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabbar.html)            |     |                         |                   |                                                                                                                                               |                                                                                                           |
| **tabs**              | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tabs/README.md)                           | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs.html)              |     |                         |                   |                                                                                                                                               |                                                                                                           |
| **time picker**       | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/time-picker/README.md)                    | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/time_picker.html)       |     |                         |                   |                                                                                                                                               |                                                                                                           |
| **toast**             | Available     | [Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/toast/README.md)                          | [Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast.html)             |     |                         |                   |                                                                                                                                               |                                                                                                           |


## Setup
From the root folder run:

```
npm install
```

## Getting Started with CLI
To get started with the Ignite UI CLI and Ignite UI for Angular:

```
npm i -g igniteui-cli
ig new <project name> --framework=angular
cd <project name>
ig add grid <component name>
ig start
```

## Building the Library
```
// build the code
ng build igniteui-angular

// build the css
npm run build:style

// build them both
npm run build:lib
```

You can find the build ouput under `dist/igniteui-angular`.

## Running the tests

Running the tests in watch mode:

```
ng test igniteui-angular // or npm run test:lib:watch
```

Running the tests once with code coverage enabled:
```
npm run test:lib
```

## Building the API Docs
The API docs are produced using TypeDoc and SassDoc. In order to build the docs, all you need to do is run:

```
npm run build:docs
```

The output of the API docs build is located under `dist/igniteui-angular/docs`.

## Run Demos Application

The repository includes a sample application featuring the showcasing the different components/directives.
In order to run the demo samples, build the library first and start the application.
```
npm start
```

**NOTE**: Experimental demos are not always stable.

## NPM Package

You can include Ignite UI for Angular in your project as a dependency using the NPM package.

`npm install igniteui-angular --save-dev`

## Contributing
[Coding Guidelines](../../wiki//Coding-guidelines-for-Ignite-UI-for-Angular)

[General Naming Guidelines](../../wiki//General-Naming-Guidelines-for-Ignite-UI-for-Angular)


## Quickstart App
[Ignite UI for Angular Quickstart app](https://github.com/IgniteUI/igniteui-angular-quickstart)
This repository is a fork of the Angular QuickStart Source and has been updated to demonstrate how to include and use components from Ignite UI for Angular. It basically follows the shortest path to bootstrap writing the application with Ignite UI for Angular:

- Fork the [the angular quickstart](https://github.com/angular/quickstart)
- Install Ignite UI for Angular from npm using `npm install igniteui-angular --save-dev`
- Update the views with sample Ignite UI for Angular controls.

## Demo Apps & Documentation
The [Warehouse Picklist App](https://github.com/IgniteUI/warehouse-js-blocks) demonstrates using several Ignite UI for Angular widgets together to build a modern, mobile app.

To get started with the Data Grid, use the steps in the [grid walk-through](https://www.infragistics.com/angular-samples/components/grid.html).

All help, related API documents and walk-throughs can be found for each control [here](https://www.infragistics.com/angular-samples/components/grid.html).

## Roadmap
[Roadmap document](https://github.com/IgniteUI/igniteui-angular/blob/master/ROADMAP.md)

## Support
Developer support is provided as part of the commercial, paid-for license via [Infragistics Forums](https://www.infragistics.com/community/forums/), or via Chat & Phone with a Priority Support license.  To acquire a license for paid support or Prioroty Support, please visit this [page](https://www.infragistics.com/how-to-buy/product-pricing#developers).

Community support for open source usage of this product is available at [StackOverflow](https://stackoverflow.com/questions/tagged/ignite-ui-angular).

Infragistics is only successful if you are successful, if you need additional assitance beyond our help documentation, forums or Prioroty Support, we have a full suite of Services offerings, including Angular Training, Application Architecture and Development and full Design Consultation.  Click to learn more about our [Services offerings](https://www.infragistics.com/consulting#popular-services).

## License
This project is released under the Apache License, version 2.0.  This is a commercial product, requiring a valid paid-for license for commercial use.  This product is free to use for non-commercial applications, like non-profits and educational usage.

To acquire a license for commercial usage, please register for a trial and acquire a license at [Infragistics.com/Angular](https://www.infragistics.com/products/ignite-ui-angular/getting-started).

© Copyright 2017 INFRAGISTICS. All Rights Reserved.  The Infragistics Ultimate license & copyright applies to this distribution.  For information on that license, please go to our website [here](https://www.infragistics.com/legal/license).



