Create Projects with Angular Schematics for Ignite UI

This blog is a 3-minute read and the project setup takes 5 minutes!

We all know Angular CLI, the Google assembly line for Angular projects, components, services, and much more. At Infragistics, we have developed our own Ignite UI CLI which, in a similar manner, lets you create projects with Ignite UI for Angular components, among other products. And because we love Angular we have created our own schematics in order to scaffold projects using ng commands and our components. If you are interested, you can read more about Ignite UI CLI and Angular Schematics for Ignite UI here.

Prerequisites: creating Angular projects requires NodeJS and Angular CLI.

Adding Ignite UI Grid to your Angular project

Let’s assume you already have an Angular project created and you suddenly need to add a performance grid, consuming live data with easy data access and manipulation, similar to this one.

Using Ignite UI for Angular Schematics, you can easily achieve this in only two quick steps! In a terminal, run the commands below to add the Ignite UI for Angular package to your project and generate an awesome-grid component from a predefined list with templates:

ng add igniteui-angular

With our latest version, this will also add our Angular Schematics package to your project’s dev dependencies, which means you can now also generate additional views with them:

ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid

That’s it — you have an awesome grid in your application! Oh wait, you don’t have an Angular project, yet?

Creating an Angular Project with our Schematics

You want to scaffold an Angular project from scratch and have routing and authentication?

First, you need to install Ignite UI for Angular Schematics. The command below will make the schematics available to use a collection parameter for the command:

npm i -g @igniteui/angular-schematics

Just use the command below with the proper value for the parameter to create a new project with routing and authentication:

ng new newIgniteUIAngularProject --collection="@igniteui/angular-schematics" --template=side-nav-auth

Then add one or more predefined choosing from different controls groups like grids, lists, charts, gauges, editors, custom scenarios, among others. You can invoke the schematics Step-by-Step mode:

ng g @igniteui/angular-schematics:c

As an alternative, you can repeat the `ng g` command, passing template and name as parameters, in order to add more templates:

ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid

In that case, you’re just a quick `ng serve` away from running your beautiful app and achieving the same result as the one above!

Thank you!

Originally published at https://www.infragistics.com on March 31, 2020.