Step-by-Step with Images to Add Ignite UI for Angular in an Existing Angular Project

Let’s say that you’re already working on an existing Angular project, and you wish to add the Ignite UI for Angular library into the project. In this blog post, we will follow a step-by-step approach to add the Ignite UI for Angular library in existing Angular project.

Step 1: Add Ignite UI for Angular library

Begin with adding the Ignite UI for Angular library in the project. We can use npm to do this. So, run the command shown below to install Ignite UI for Angular.

npm install igniteui-angular

Step 2: Add HammerJS

 

Next, you need to install Hammerjs, as  Ignite UI for Angular uses Hammerjs for gesture.

 

npm install Hammerjs

Step 3: Modify angular.json file

After installing Ignite UI for Angular, let us make sure that the project references the Ignite UI for Angular styles and the Hammerjs library in the angular.json. Modify angular.json as shown below:

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

We have added references in styles and scripts section, as depicted in the image below:

Step 4: Modify style.css

Ignite UI for Angular styles uses the Material Icons. Let us import those in the styles.css, as shown below:

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

Step 5: Import Hammerjs

We have installed Hammerjs and next we need to install Hammerjs in main.ts as shown below:

import 'hammerjs';

After importing, main.ts should have following imports:

By this step, we have added Ignite UI for Angular in existing Angular project and configured required files.

 

Step 6: Use component

 We are going to use Ignite UI for Angular DatePicker component to test whether everything is configured and installed correctly or not.

Add igxDatePicker on the component template, as shown in the below listing:

<igx-datePicker item-width="50%"
                [value]="date" [formatter]="formatter">
</igx-datePicker>

Then add below code in the component class to configure:

• Day formatter
• Month formatter

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()}`;
   }

In addition, to work with DatePicker component, you need to add following modules.

imports: [
      BrowserModule, BrowserAnimationsModule, IgxDatePickerModule
  ],

Run application

Now, when you run the application, you should get DatePicker component from Ignite UI for Angular added in the application. You can select a date and that will be displayed.

I hope this article will help you in adding Ignite UI for Angular library in existing Angular project.