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

Ignite UI for Angular Installation

Verify that you are running at least node v4.x.x and npm 3.x.x by running node -v and npm -v in a terminal/console window.

We recommend using npm for managing front-end dependencies. If you are new to npm, check out the npm documentation.

The shortest path to bootstrap an application is to use the Angular CLI, which builds a configured app that the developer can get up and running with the ease of two 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-js-blocks
// Hammerjs and @types/hammerjs are dependencies required by Ignite UI for Angular
$ npm install hammerjs @types/hammerjs

How to Use Ignite UI for Angular In Your Project

How to Use Ignite UI for Angular In Your Project

After installing Ignite UI for Angular, let’s make sure that the project references Ignite UI for Angular styles and the HammerJs library in the angular-cli.json:

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

You also need to import the components (all or just the ones you need in the app.module.ts:

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

// import the IgxDatePickerModule that will be used
import { IgxDatePickerModule } from 'igniteui-js-blocks/main';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    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.