Using Ignite UI for Angular
We recommend using the latest versions of node and npm. If you are new to npm, check out the npm documentation.
The shortest path to bootstrap an application is to use the Ignite UI CLI, which builds a configured app that the developer can get up and running with the ease of two commands. First, you need to install the Ignite UI CLI:
npm install -g igniteui-cli
After that, you can start the step-by-step mode that will provide you with a guided experience through the available options:
If you prefer to provide the commands for generating an Ignite UI project, adding a new component, building and serving the project by yourself, you can use the following commands:
ig new <project name> --framework=angular --type=igx-ts
cd <project name>
ig add <component/template> <component_name>
Here is an example of creating a new Ignite UI for Angular project with an igxGrid control:
ig new newAngularProject --framework=angular --type=igx-ts
ig add grid newGrid
After executing those three simple commands, your new project will be built and served. It will automatically open in your default browser and you will be able to inspect your grid control and to make changes to the project.
You can find the list with all the currently available Ignite UI for Angular templates inside the Ignite UI CLI Wiki.
Using Ignite UI for Angular with Angular CLI
If you do not want to take advantage of the fully-automated process of Ignite UI for Angular projects creation in the Ignite UI CLI, and you prefer creating your project manually, using the Angular CLI – you can achieve that relatively simply.
Ignite UI for Angular Installation
To bootstrap a new Ignite UI for Angular application using the Angular CLI, you need to run the following commands:
npm install -g @angular/cli
ng new my-igniteui-project
To install Ignite UI for Angular in your project, run:
npm install igniteui-angular
After installing Ignite UI for Angular, let’s make sure that the project references the Ignite UI for Angular styles and the HammerJs library in the angular.json:
Ignite UI for Angular styles uses the Material Icons. Let’s import those in the styles.css:
/* styles.css */