Logo for Ignite UI

Build Better Modern Web Experiences, Faster with Angular Components

Create feature-rich, progressive web apps with Ignite UI for Angular components! A complete library of Angular-native UI components, Material-based components, including the fastest Angular data grid and 60+ high-performance chart Angular components! All Angular 11 compatible and built to be enterprise-grade.

Trusted by the World's Best

Bank of America logo
Intuit Logo
Charles Schawb Corporation logo
Blue Yonder logo
Tyler logo

The overall performance has improved, the response was a lot faster even for high volume data processing, the richness in graphics, grids, charts and tables was a huge plus.

Ayana Abe, Pasona Tech Systems Solutions
Pasona Tech logo

Pasona Tech

Learn how Pasona Tech uses Ignite UI to accelerate their clients move to the cloud. Read More

The Fastest Angular Charts

Build expressive dashboards, apply deep analytics, and render millions of data points with 60+ real-time Angular charts. Including the most asked for financial and category charts, Ignite UI for Angular fulfills your fintech and business needs.

Dashboard of Ignite UI for Angular charts component featuring financial chart

An Angular Chart for Every Occasion

Your Angular charts shouldn’t just be fast; they should be all-encompassing. With every common category chart type – bar, line, column, area, pie, and more – you can visualize your data the way you prefer. In need of financial charts? With Ignite UI for Angular, we offer the same features you come across with Google Finance and Yahoo Finance Charts.

Angular category chart samples Angular Financial Chart Samples

Ignite UI spaceman building a rocket

Angular UI Components to Ignite your Next Project

View All Samples

Angular Component Examples and Samples!

Get started on your next project with over 100+ Angular UI components and Angular component examples. We have over a dozen Angular samples with beautiful styling, data access and best practices for Angular components and Angular app building.

View all reference applications

Angular Example: Task Planner

The Task Planner application provides an effective means for managing projects and related tasks.

Get the app

Angular Example: FinTech

Display, high-volume data streams with ease using this powerful financial app.

Get the app

Angular Example: Marketing Dashboard

This marketing dashboard displays data visualizations that are actionable, leveraging multiple charts and grids.

Get the app

Resources

Leverage these helpful resources to learn how to build better web apps, faster.

  • Angular Ref Card Leveraging a standard UI toolkit can help reduce project development and testing time by 33%. Download this Reference Card and learn how your organization can reduce time-to-market and development costs.
  • Getting Started with the Ignite UI CLI Get started with your next project faster using the Ignite UI CLI. This tool helps to initialize, develop, scaffold, and maintain applications in a wide variety of frameworks, providing predefined templates for Ignite UI for jQuery components. Learn More
  • Desktop to Web Learn how you can build high-performance, progressive web apps in modern frameworks, such as Angular using Ignite UI. Learn More
  • Angular Essential whitepaper showing architecture of Ignite UI for Angular components
  • Development environment showing console output of command line interface for Ignite UI for Angular
  • Brian Lagunas giving thumbs up for Ignite UI Resources for Desktop to web

Help and Samples

Everything you need to get started with your next Angular project!

Accelerate Your App Creation by 80%

What if you could skip the complex iterations and costly errors that occur across design and development teams that delay app creation?

Now you can with Indigo.Design, a digital product design platform that accelerates app delivery. Included in Infragistics Ultimate, Indigo.Design is the only complete design-to-code system on the market that integrates prototyping, design systems, user testing, app building and code generation. With the new Cloud-based, WYSIWYG drag & drop tool so you can build complete business apps faster than ever before, saving both time and money!

Indigo.Design dashboards for design to code process from design systems to user testing and code generation.

Choose the Plan that's Right for You!

Good Value

The comprehensive, UI components library for Angular.

$0 per developer, royalty-free subscription

Multi-year discount

No multi-year discounts available.
Great Value

The comprehensive UI components library for web, mobile, and desktop.

$0 per developer, royalty-free subscription

Multi-year discount

No multi-year discounts available.

Join the Conversation

Frequently Asked Questions

What is Angular Material?

Material is an open-source design system created by Google designed for apps targeting the Web, Android, iOS or Flutter. Based on components that back up the design system, developers have a starting point to build out the user interface of their apps. Infragistics Ignite UI for Angular is built on top of the Material design system. Angular Material include guides, specifications, and examples for:

  • Layout
  • Navigation
  • Color
  • Typography
  • Sound
  • Iconography
  • Shape
  • Motion
  • Interaction

Like any good design system, Angular Material is meant to be adaptable. It is a system of guidelines, components, and tools that support the best practices of user interface design.

What are Angular Components?

An Angular component, a subset of an Angular Directive, is the foundational building block of the user interface (UI) that makes up an Angular app. In an Angular app, a hierarchical tree of Angular components describes the user interface and encapsulates every aspect of the application that a user sees and interacts with in their browser. Angular components include things like Templates, Styles, Animations, Change Detection, Providers, Injectable Views, and more.

When you create an Angular component, there are three files:

  1. A TypeScript class called the component class
  2. An HTML file called the template of the component
  3. An optional CSS file for the styling of the component

When an Angular app loads in your browser, you are looking at a “View” in Angular. That “View” is made up of one or more Angular components (usually more than one). In the Angular application, as a user navigates pages, or interacts with different components in the view, the Angular framework takes care of creating, updating, or destroying components. The component itself can respond to those events occurring in the application lifecycle, letting the developer write code that reacts to events in the component’s lifecycle.

Learn more about Angular components at https://angular.io/api/core/Component.

How to Use Angular Components

You can use an Angular CLI command to generate a component using this command:

ng generate component Product

This command will generate ProductComponent as shown below:

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.scss'] }) export class ProductComponent implements OnInit { constructor() { } ngOnInit() { }

A component is a class decorated with the @Component decorator.

There are four steps to create a component:

  1. Create a class and export it. This class will contain data and the logic.
  2. Decorate the class with @component metadata. Metadata describes the component and sets the value for different properties.
  3. Import the required libraries and modules to create the component.
  4. Create a template of the component and optionally the style of the component.

As you can see, the generated ProductComponent consists of:

  • A class to hold data and the logic.
  • HTML template and styles to display data in the app. It is also called a view and is seen by the user on the screen to interact.
  • Metadata that defines the behavior of a component.

Component metadata is applied to the class using the @Component decorator. Different behavior of the component can be passed as properties of the object, which is an input parameter of the @Component decorator.

What is CLI in Angular?

A command line interface in Angular is a tool launched from a Command Window (Terminal on Mac, or Command Prompt / PowerShell in Windows, or a Terminal Window in Visual Studio Code.

To install the Angular CLI, make sure you have NodeJS installed from https://nodejs.org/en/download/. Once installed, open a Command Window and type:

npm install -g @angular/cli

Using a the Angular CLI (Command Line Interface), you can use templates using Angular Schematics from different commands that will generate all or a part of an application. The Angular CLI from the Google team is the fastest way to generate the structure and dependencies of an Angular application. A schematic is a template-based code generator which includes instructions and logic to add or modify code from a code generation process.

The Ignite UI CLI from Infragistics goes a step further than the Angular CLI. While still based on templates using Angular Schematics, the Ignite UI CLI can add user interface components like Charts, Data Grids, and even entire application scenarios to a new or existing Angular application. You can even create your own custom templates based on your team or business need to accelerate app development and generate code in seconds.

To get started with step-by-step instructions using the Angular CLI and the Ignite UI CLI, click here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started

What are Directives in Angular?

Angular Directives create DOM elements and change their structure or behavior in an Angular application. There are three types of directives in Angular:

  1. Components: Directives with templates.
  2. Attribute Directives: Change appearance and behavior of an element, component, or other directive.
  3. Structural Directives: Change DOM layout by adding or removing elements.

The basic difference between an Angular component and an Angular directive is that a component has a template, whereas an attribute or structural directive does not have a template. Angular has provided us many inbuilt structural and attribute directives.

  • Inbuilt structural directives are *ngFor and *ngIf.
  • Attribute directives are NgStyle and NgModel.

Angular Components vs Directives

The architecture of an Angular application has many parts that work together to deliver an Angular app to the browser. Here is a brief overview of the architecture involved and the building blocks of an Angular application.

  • NgModules: Declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a related set of capabilities.
  • Components: Defines a class that contains application data and logic and works with an HTML template that defines a view.
  • Template: Combines HTML with Angular markup that can modify HTML elements before they're displayed.
  • Directive: Attaches custom behavior to elements in the DOM.
  • Two-way data binding: Coordinates the parts of a template with the parts of a component.
  • Services: Typically, a class used to increase modularity and reusability with a narrow and well-defined purpose.
  • Dependency injection: Provides components with needed services and gives access to a service class.
  • Routing: Defines a navigation path among the different application states lets you view application hierarchies.

What is Ignite UI for Angular?

Ignite UI for Angular is a complete set of Material-based UI widgets, Angular components & Sketch UI kits and supporting directives for Angular by Infragistics. It enables developers to build modern high-performance HTML5 & JavaScript apps for desktop browsers, mobile experiences, and progressive web apps (PWA’s) targeting Google's Angular framework.

Why should I choose Ignite UI for Angular controls and components?

Ignite UI for Angular is a complete library of user interface (UI) components for building data-rich and responsive web apps in Angular, including 100+ data charts, grids, and components.

How much does the Ignite UI for Angular product cost?

Ignite UI for Angular is licensed via a subscription model. A single developer license starts at $750.00 USD for a one-year subscription, including one year of standard support and updates. We also offer discounts for multi-year licenses. Please refer to our Pricing page for more information on pricing.

How do I get started with Ignite UI for Angular?

The best place to begin is with our Getting Started Documentation.

Where can I find Ignite UI for Angular samples?

The team at Infragistics maintains a comprehensive library of code samples. We also maintain a library of sample applications.

Connect with Infragistics

Follow Us for the Latest News and Updates

Ignite UI rocket taking off