Ignite UI for Angular logo

Build Modern Web Experiences, Faster With Angular Components

A complete library of Angular-native, Material-based UI components, including the fastest Angular data grid and 60+ high-performance charts! Compatible with Angular 12 and 13 and built to be enterprise-grade.

NEW App Builder™ with 60+ Angular Components

Grid table showing list of sales information per person built using Ignite UI for Angular's grid component.

Design and Build Real Angular Apps Blazing Fast

App Builder™ is a new cloud-based WYSIWYG drag & drop IDE that eliminates the complexity of user interface design and development so you can build business apps faster than ever before. Choose from a library of pre-built app templates or responsive screen layouts or drop in a Sketch or Adobe XD file. Then customize with a toolbox of 60+ UI controls and 65+ charts to kick-start your next digital product design!

Logo for Ignite UI for Angular

The Fastest Angular Data Grids

Our Angular Data Grid can handle unlimited rows and columns of data, while providing access to custom templates and real-time data updates. Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal code.

Trusted by the World's Best

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

With Ignite UI for Angular, the grid performance was fast and included improved row selection with features such as multi-click, use of tabs that made data entry easier, and more friendly navigation.

Katy Faulkner, Lead UI Developer, Tier One UK Investment Bank
Tier One UK Investment Bank

UK Investment Bank

Learn how England’s most prominent investment bank used Ignite UI’s Angular components to upgrade a strategic pricing application with a modern, intuitive and user-friendly UI. 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’s Angular components, we offer the same features you come across with Google Finance and Yahoo Finance charts.

Angular 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 Learn the essentials of Angular. From Angular’s basic architecture to property and event binding, this Refcard highlights the foundational and advanced topics needed for successful app development in Angular. Download the Reference Card
  • 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!

Choose the Plan That's Right for You!

All bundles include App Builder™, the only cloud-based, WYSIWYG drag & drop design-to-code tool that helps teams build complete business apps faster than ever before. Every control has user experience ‘built-in,’ and our continuous release schedule ensures the fastest updates to all major frameworks.

Good Value

  • 100s of UI controls and components for every major web framework
  • Fastest way to build modern web apps
$0 per developer, royalty-free subscription

Multi-year discount

No multi-year discounts available.
Great Value

  • Everything in Ignite UI
  • .NET components
  • The comprehensive UI components library for web, mobile and desktop developers
$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. Ignite UI for Angular now includes our new WYSIWYG App Builder, the fastest way build modern, enterprise-grade web applications.

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?

Our Angular components are included as a part of our Ignite UI bundle. A single developer license starts at $1,295 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