DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

SBOMs are essential to circumventing software supply chain attacks, and they provide visibility into various software components.

Related

  • CORS Misconfigurations: The Simple API Header That Took Down Our Frontend
  • Rediscovering Angular: Modern Advantages and Technical Stack
  • Angular Input/Output Signals: The New Component Communication
  • Azure Deployment Using FileZilla

Trending

  • Designing Microservices Architecture With a Custom Spring Boot Starter and Auto-Configuration Framework
  • How We Broke the Monolith (and Kept Our Sanity): Lessons From Moving to Microservices
  • Why Traditional CI/CD Falls Short for Cloud Infrastructure
  • A Software Engineer’s Guide to Thrive in Gen AI Era: Master It or Fade Out
  1. DZone
  2. Coding
  3. Frameworks
  4. How to Add Ignite UI to an Existing Angular Project

How to Add Ignite UI to an Existing Angular Project

In this post, we will follow a step-by-step approach in order to add the Ignite UI Angular library to an existing Angular application.

By 
Dhananjay Kumar user avatar
Dhananjay Kumar
·
Aug. 03, 18 · Tutorial
Likes (2)
Comment
Save
Tweet
Share
16.7K Views

Join the DZone community and get the full member experience.

Join For Free

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 Ignite UI Angular library into an existing Angular project.

Step 1: Add Ignite UI for Angular library

Begin by adding the Ignite UI 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 Hammer.js

Next, you need to install Hammer.js, as Ignite UI for Angular uses Hammer.js for gestures.

 npm install Hammerjs 


Step 3: Modify the angular.json File

After installing Ignite UI for Angular, make sure that the project references Ignite UI for Angular styles and the Hammer.js library in the angular.json file. Modify the angular.json file 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 the 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's import those into the styles.css file, as shown below:

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

Step 5: Import Hammer.js

We have installed Hammer.js and next we need to import Hammer.js into the main.ts file as shown below:

import 'hammerjs';

After importing, main.ts should have following imports:

With this step, we have added Ignite UI for Angular into an existing Angular project and configured the required files.

Step 6: Use a Component

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

Add igx-datePicker into the component template, as shown in the below listing:

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

Then add the 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 the datePicker component, you need to add the following modules.

imports: [
      BrowserModule, BrowserAnimationsModule, IgxDatePickerModule
  ],

Run Application

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

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

AngularJS

Published at DZone with permission of Dhananjay Kumar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • CORS Misconfigurations: The Simple API Header That Took Down Our Frontend
  • Rediscovering Angular: Modern Advantages and Technical Stack
  • Angular Input/Output Signals: The New Component Communication
  • Azure Deployment Using FileZilla

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • [email protected]

Let's be friends: