Ignite UI for Angular

Ignite your Angular UX with Ignite UI

Ignite UI for Angular is a complete set of Material based UI widgets, components, and UI kits and supporting directives for Angular designed to enable developers to build the most modern, high-performance apps for modern browsers, mobile experiences and PWA’s.

Before getting started there are two steps needed to run an Angular app including Ignite UI for Angular and to build Ignite UI for Angular apps. To get statrted you must install both NodeJS and Visual Studio Code.

Now that we have everything we need, we can start making out application beautiful. Start by opening a terminal window and installing the Ignite UI CLI.

npm install -g igniteui-cli

The shortest and easiest way to bootstrap an application is to use the Ignite UI CLI guided experience, which builds a configured app that the developer can get up and running with the ease of a single command.

We can always use the Ignite UI CLI commands for generating an Ignite UI project, adding a new component or building and serving the project by ourselves. For that purpose, we can use the following commands:

ig new <project name> --framework=angular --type=igx-ts
cd <project name>
ig add <component/template> <component_name>
ig start

After executing those 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.

What if you want to use Ignite UI for Angular in an existing Angular CLI project. All you have to do is execute the command below:

ng add igniteui-angular

This will automatically install the igniteui-angular package, along with all of its dependencies, font imports and styles references to the existing project. After the installation has finished, we can now execute Ignite UI CLI commands in our updated application in order to further enrich it by using Ignite UI for Angular components!

Import modules and use components

In order to easily add new components to our application, we can take advantage of the Ignite UI CLI!

ig add

After going through the options of the menu and choosing which component we want to add to our application, we will notice that we have a brand new component in our project, which we can use anywhere on our page! Now let’s run our application with the ig start command to see our new page.

ig start

Any Ignite components used must be installed manually in the app.module.ts file. In this example, we will install the grid component.

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component'; 
import { IgxGridModule } from 'igniteui-angular'; 
@NgModule({  
  declarations: [     
    AppComponent  
  ],   
  imports: [     
    BrowserModule,     
    BrowserAnimationsModule,    
    IgxGridModule   
  ],   
  providers: [],   
  bootstrap: [AppComponent] 
}) 
export class AppModule { }\

Use components

We are now ready to use the igxGrid in our markup! Let’s go ahead and define it in our app.component.html file:

<!-- app.component.html -->
<div style="text-align:center; margin-bottom: 20px;">
  <h1>
    Welcome to {{title}}!
  </h1>
</div>
<div style="text-align: center;">
  <igx-grid [data]="localData" width="600px" height="400px" style="margin: auto" [allowFiltering]="true">
    <igx-column field="Name" dataType="string"></igx-column>
    <igx-column field="Age" dataType="number"></igx-column>
  </igx-grid>
</div>
HTML

We will also define the data of the grid and the title of our application that are referenced from the app.component.ts:

// app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  localData = [
    { Name:'John', Age: 29 },
    { Name:'Alice', Age: 27 },
    { Name:'Jessica', Age: 31 },
  ];
title = 'My Ignite UI project';
}

Finally, if the application was created using the Ignite UI CLI run the application with the following command:

ig start

Otherwise, if the application was created by using the Angular CLI use:

ng serve

The final result should look like this:

Another great component to use is Input Group.

Input groups in the Ignite UI for Angular controls allow developers to create easy-to-use and aesthetic forms. The user experiences simplicity with inputting data, and the inputs also provide mitigation for handling validation and errors.

The default styling of the Input Group component as well as its complimentary directives follow the text fields specification in the Material Design guidelines.

To get started import all modules for Ignite UI components and the FormsModule in order to have working Template Driven Form:

import { IgxIconModule, IgxInputGroupModule, IgxButtonModule, IgxRippleModule, IgxDatePickerModule, IgxTimePickerModule, IgxComboModule, igxSelectModule } from "igniteui-angular"; import { FormsModule } from "@angular/forms";  @NgModule({     ...     imports: [..., IgxIconModule, IgxInputGroupModule, IgxButtonModule, IgxRippleModule, IgxDatePickerModule, IgxTimePickerModule, IgxComboModule, igxSelectModule, FormsModule],     ... }) export class AppModule {}

Styling

Our inputs could be styled differently by using the type property of the igxInputGroup component. Currently we support four different ways of styling: line (the default one), box, border and search. This is how they look: