Getting Started

Enjoy the very best out of Ignite UI for Angular

To start using Ignite UI for Angular, you need an active trial or commercial license to Ignite UI, Infragistics Pro or Ultimate.

If you don’t have one, register for an Infragistics account today and activate your Ignite UI for Angular trial. Having an Infragistics account provides stellar standard support during your 30 day trial.


Get Started with Standard Support

* Required Field
Loading...
 

How to Setup Ignite UI for Angular

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:

ig 

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>
ig start 

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 
cd newAngularProject
ig add grid newGrid 
ig start 

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 
cd 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:

"styles": [
        "styles.css",
        "node_modules/igniteui-angular/styles/igniteui-angular.css"
],
      "scripts": ["node_modules/hammerjs/hammer.min.js"], 

Ignite UI for Angular styles uses the Material Icons. Let’s import those in the styles.css:

/* styles.css */ 
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

How to Use Ignite UI for Angular In Your Project

How to Use Ignite UI for Angular In Your Project

In order to use the Ignite UI for Angular components in your application, you need to import them (all or just the ones you need) in the app.module.ts. Please note that some components have animations depending on BrowserAnimationsModule, let’s import it as well:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 

// import the IgxDatePickerModule that will be used 
import { IgxDatePickerModule } from 'igniteui-angular'; 

@NgModule({ 
  declarations: [ 
    AppComponent 
  ], 
  imports: [ 
    BrowserModule,
    BrowserAnimationsModule,
    IgxDatePickerModule 
  ], 
  providers: [], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Now we are ready to add the markup for initializing the igxDatePicker in the app.component.html:

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="https://static.infragistics.com/marketing/Website/General/infragistics_vertical_logo.svg">
</div>
<h2>Please pick a date: </h2><br />
<igx-datePicker item-width="50%" [value]="date" [formatter]="formatter"></igx-datePicker>

And define the properties and methods that the above declarations refer to in the app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  // adding properties and methods that will be used by the igxDatePicker
  public date: Date = new Date(Date.now());

  private dayFormatter = new Intl.DateTimeFormat('en', { weekday: 'long'});
  private monthFormatter = new Intl.DateTimeFormat('en', { month: 'long'});

  public formatter = (_: Date) => {
      return `You selected ${this.dayFormatter.format(_)}, ${_.getDate()} ${this.monthFormatter.format(_)}, ${_.getFullYear()}`;
  }
}

Now let’s do ng serve to see our Hello World page with a the igx-date-picker initialized !

The final result should look something like this:

Ignite UI for Angular example Ignite UI for Angular example

Ignite UI for Angular Components

Getting Started with Ignite UI for Angular is Easy

Components to Ignite Your Next Project

Check out how easy it is to get up and running with  Ignite UI for Angular.