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.

To install Ignite UI for Angular in your project, run:

$ npm install igniteui-js-blocks
 

How to Use Ignite UI for Angular In Your Project

Usage

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 and start coding.

After installing Ignite UI for Angular in the project, you need to import the components (all or just the ones you need) by changing the src/app/app.module.ts code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';       
import { AppComponent } from './app.component';
import { IgxGridModule, IgxNavbarModule, IgxAvatarModule, IgxInput } from 'igniteui-js-blocks/main';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    IgxGridModule,
    IgxNavbarModule,
    IgxAvatarModule,
    IgxInput
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

All that is left is to insert markup in the template app.component.html:

<igx-navbar title="Home"
  actionButtonIcon="home"
  (onAction)="doStuff()">
</igx-navbar>
<h1>{{title}}</h1>

Setting (onAction)="doStuff()" determines the action of the navbar button.

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'Hello World!';
 
    doStuff() {
       // do your stuff;
    }
}

Now let’s do ng serve to see our Hello World page with a functional navigation bar!

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.