# Ignite UI for Angular > Component and API reference docs for Ignite UI for Angular. ## Documentation sets - [Abridged documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/llms-small.txt): a compact version of the documentation, with non-essential content removed - [Combined docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/llms-full.txt): Single-file Markdown export of all docs. - [API Reference](https://www.infragistics.com/api/angular/llms.txt): Full TypeDoc/docfx API reference for all packages — classes, interfaces, enums, and members ## AI-Assisted Development - [Agent Workflow](https://www.infragistics.com/products/ignite-ui-angular/angular/components/ai/ai-assisted-development-overview.md): Ignite UI for Angular provides a complete AI toolchain - Agent Skills, the Ignite UI CLI MCP server, the Ignite UI Theming MCP server and the MAKER MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. - [Ignite UI for Angular Skills](https://www.infragistics.com/products/ignite-ui-angular/angular/components/ai/skills.md): Ignite UI for Angular ships with Agent Skills - structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with Ignite UI for Angular. - [CLI MCP](https://www.infragistics.com/products/ignite-ui-angular/angular/components/ai/cli-mcp.md): The Ignite UI CLI MCP is a Model Context Protocol (MCP) server that enables AI assistants to scaffold projects, modify existing apps, create and update components, and answer documentation questions for Ignite UI for Angular applications. - [Theming MCP](https://www.infragistics.com/products/ignite-ui-angular/angular/components/ai/theming-mcp.md): The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. - [Maker Framework](https://www.infragistics.com/products/ignite-ui-angular/angular/components/ai/maker-framework.md): The MAKER Framework (@igniteui/maker-mcp) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. ## General - [Angular: A Complete Guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/angular-grid-overview-guide.md): Get to know the Angular Data Grid and how to use it by checking out this informative section part of our Grid Overview topic. - [Data Analysis](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/data-analysis.md): Data analysis is the process of examining, transforming, and arranging data in a specific way to generate useful information based on it. - [Data Visualization Changelog](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-changelog-dv.md): Release history for Ignite UI for Angular data visualization components, covering new features, fixes, and breaking changes. - [Getting started](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started.md): Ignite UI for Angular is a library of 100+ enterprise UI components - including data grids, charts, editors, navigation controls, and layout containers - distributed as the igniteui-angular npm package by Infragistics. - [Licensing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing.md): Ignite UI for Angular is offered under a dual-license model, which allows for both commercial and permissive open-source use, depending on the components, modules, directives, and services being used. - [Localization (i18n)](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/localization.md): As of 21.1.0 this is the recommended way of applying localization to the Ignite UI for Angular components. - [Multiple Entry Points](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/code-splitting-and-multiple-entry-points.md): Starting with version 21.0.0, Ignite UI for Angular supports multiple entry points, enabling better tree-shaking, code splitting, and lazy loading of components. - [Open-Source vs Premium](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/open-source-vs-premium.md): Ignite UI for Angular offers two distinct paths for building modern, data-driven applications: Open-Source Components and Premium Components. - [Server-side rendering (SSR)](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ssr-rendering.md): All Angular applications run in the client's browser and often this may result in a negative performance hit on the Largest Contentful Paint (LCP) i.e. when a browser first renders the largest content of a page. - [Update guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide.md): In the Ignite UI for Angular versioning the first number always matches the major version of Angular the code supports and the second is dedicated for major version releases. ### Angular Schematics & Ignite UI CLI - [Angular Schematics & Ignite UI CLI Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli-overview.md): The Ignite UI CLI and the Ignite UI for Angular Schematics collection are two complementary scaffolding tools for generating Angular projects and component views pre-configured for Ignite UI for Angular. - [Getting Started with Ignite UI for Angular Schematics](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/getting-started-with-angular-schematics.md): The Ignite UI for Angular Schematics collection is a set of Angular CLI schematics for scaffolding Angular projects and component views pre-configured for Ignite UI for Angular. - [Step by Step guide using Ignite UI for Angular Schematics](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/step-by-step-guide-using-angular-schematics.md): The Ignite UI for Angular Schematics step-by-step mode is an interactive wizard built into the @igniteui/angular-schematics collection. - [Getting Started with Ignite UI CLI](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/getting-started-with-cli.md): The Ignite UI CLI is a standalone global command-line tool for scaffolding Angular, React, and jQuery projects pre-configured for Ignite UI components. - [Step by Step guide using Ignite UI CLI](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/step-by-step-guide-using-cli.md): The Ignite UI CLI step-by-step mode is an interactive wizard that guides you through project creation, template selection, theming, and component view addition for Ignite UI CLI-based Angular projects. - [Templates](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/component-templates.md): Component templates are pre-configured Angular component scaffolds that the Ignite UI CLI (ig add) and Ignite UI Angular Schematics (ng g @igniteui/angular-schematics:c) generate into an existing Angular project. - [Authentication Project Template](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/auth-template.md): When creating an Ignite UI for Angular project with Angular Schematics or Ignite UI CLI, authentication is available as an add-on option when you select a supported navigation template. ### How to - [Build Real-time SignalR App with .NET Core](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/how-to/signal-r-service-live-data.md): In this topic, we’ll see how to create applications for both streaming and receiving data with ASP.NET Core SignalR. - [Angular Reactive Forms](https://www.infragistics.com/products/ignite-ui-angular/angular/components/angular-reactive-form-validation.md): Reactive forms in Angular provide a direct access to the underlying form object model, offering an immutable and explicit approach to handling form inputs. - [Build CRUD operations with IgxGrid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/how-to/how-to-perform-crud.md): CRUD is an acronym in computer programming that stands for the CREATE, READ, UPDATE, DELETE operations that can be performed against a data collection. - [Customize and Optimize Themes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/how-to/how-to-customize-theme.md): This article will walk you through the details of customizing Ignite UI for Angular application theming and optimizing the size of the produced stylesheet. - [Use Standalone Components](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/how-to/how-to-use-standalone-components.md): Angular 14 introduced the concept of standalone components which allows for a simplified way of building applications by reducing the need for using NgModules. - [Build App with CLI MCP and Theming MCP](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/how-to/general-how-to-mcp-e2e.md): Ignite UI CLI MCP and Ignite UI Theming MCP work together to let an AI assistant scaffold, extend, and theme an Ignite UI for Angular application through chat prompts. ### WPF to Angular guide - [WPF to Angular guide Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/wpf-to-angular-guide/wpf-to-angular-guide.md): WPF to Angular tutorial is the first step that you should take in order to make a smooth transition from a desktop to web framework transition. - [Create your first Angular app](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/wpf-to-angular-guide/create-first-angular-app.md): Learn how to start creating an Angular application when you migrate from WPF to Angular. - [Create your UI with Angular components](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/wpf-to-angular-guide/create-ui-with-components.md): When it comes to creating user interface in an Angular application you can use an Angular component to facilitate the process. - [One-Way Binding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/wpf-to-angular-guide/one-way-binding.md): One-way data binding in Angular (i.e. unidirectional binding) is a way to bind data from the component to the view (DOM) or vice versa - from view to the component. - [Two-Way Binding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/wpf-to-angular-guide/two-way-binding.md): The two-way data binding in Angular enables data to flow from the component to the view and the other way round. - [Angular Events](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/wpf-to-angular-guide/angular-events.md): The Angular events are emitted as a response to user interactions. - [Transforming Data with Angular Pipes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/wpf-to-angular-guide/angular-pipes.md): You can use the Angular pipes to transform data from one value to another. - [Structural Directives in Angular](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/wpf-to-angular-guide/structural-directives.md): When it comes to control the appearance of the visual tree elements’ appearance in WPF, the most common way is to use binding and visibility converter, which requires some extra logic and static resources. - [Layout Elements](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/wpf-to-angular-guide/layout.md): In WPF, in order to layout the elements in your application, you need to put them inside a Panel. ## Interactivity - [RTL Support](https://www.infragistics.com/products/ignite-ui-angular/angular/components/interactivity/right-to-left-support.md): Most of the components in the framework have full right-to-left (RTL) support by default. - [Accessibility Compliance](https://www.infragistics.com/products/ignite-ui-angular/angular/components/interactivity/accessibility-compliance.md): As the leading global provider of UI and UX tools for developers, our Angular team at Infragistics is committed to providing components and tools that make it easier for you to create the best possible user experience. ## Grids & Lists - [Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grids-and-lists.md): Ignite UI for Angular provides a complete library of Angular-native, Material-based UI components, including the world’s fastest virtualized Angular data grid. - [Tree](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tree.md): The Angular Tree Component allows users to represent hierarchical data in a tree-view structure with parent-child relationships, as well as to define static tree-view structure without a corresponding data model. - [List View](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list.md): The Ignite UI for Angular List component displays rows of items and supports one or more header items as well as search and filtering of list items. ### Data Grid - [Data Grid Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid.md): The Angular Data Grid is a component for displaying data in a tabular format. - [Cell Merging](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/cell-merging.md): The Ignite UI for Angular Grid provides a Cell Merging feature that combines two or more adjacent cells with the same value into a single, larger cell. - [Clipboard Interactions](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/clipboard-interactions.md): Copy to clipboard operations are now available in the Grid. - [Collapsible Column Groups](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/collapsible-column-groups.md): Multi-column headers allow you to have multiple levels of nested columns and column groups. - [Column Data Types](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-types.md): Ignite UI for Angular Grid provides a default handling of number, string, date, boolean, currency and percent column data types, based on which the appearance of the default and editing templates will be present. - [Column Hiding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-hiding.md): The Ignite UI for Angular Grid provides a ColumnActions component with a ColumnHidingDirective which allows users to perform column hiding directly through the user interface or by using the Angular component. - [Column Moving](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-moving.md): The Grid component in Ignite UI for Angular provides the Column Moving feature to allow columns reordering via standard drag/drop mouse or touch gestures, or by using the Column Moving API. - [Column Pinning](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-pinning.md): A column or multiple columns can be pinned to the left or right side of the Angular UI Grid. - [Column Resizing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-resizing.md): With deferred grid column resizing, the user will see a temporary resize indicator while the Angular drag resizing operation is in effect. - [Conditional Styling](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/conditional-cell-styling.md): If you need to provide any custom styling in the IgxGrid component, you can do it on either row or cell level. - [Data Grid Export services](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/export-excel.md): Whether your audience needs a spreadsheet for deeper analysis or a polished PDF they can share right away, the Ignite UI exporters help you deliver the right file from the IgxGrid in seconds. - [Group By](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/groupby.md): A Group By behavior in an Ignite UI for Angular Table or UI Grid creates grouped data rows based on the column values. - [Keyboard navigation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/keyboard-navigation.md): Keyboard navigation in the IgxGrid provides a rich variety of keyboard interactions for the user. - [Live Data / Real-Time](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/live-data.md): The Grid component is able to handle thousands of updates per second, while staying responsive for user interactions. - [Master-Detail Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/master-detail.md): The igxGrid component supports specifying a detail template that displays additional details for a particular row by expanding/collapsing its content. - [Multi-column Headers](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/multi-column-headers.md): Grid supports multi-column headers which allows you to group columns by placing them under a common multi headers. - [Multi-row Layout](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/multi-row-layout.md): Multi-row Layout extends the rendering capabilities of the igxGridComponent. - [Data Grid Paging](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging.md): Pagination is used to split a large set of data into a sequence of pages that have similar content. - [Paste from Excel](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paste-excel.md): The Ignite UI for Angular Grid can read Excel data that is copied to the clipboard. - [Remote Data Operations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/remote-data-operations.md): The Ignite UI for Angular Grid supports remote data operations such as remote virtualization, remote sorting, remote filtering and others. - [Row Actions](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-actions.md): The grid component in Ignite UI for Angular provides the ability to use ActionStrip and utilize CRUD for row/cell components and row pinning. - [Row Drag](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-drag.md): In Ignite UI for Angular Grid, RowDrag is initialized on the root igx-grid component and is configurable via the rowDraggable input. - [Row Pinning](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-pinning.md): One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. - [Searching](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/search.md): Angular Grid search enables the process of finding values in the collection of data. - [Size](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/display-density.md): IgxGrid design is based on Material Design Guidelines. - [Sizing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sizing.md): There are many different ways to size the Grid in order to accommodate a lot of scenarios that the users can have. - [Data Grid Sorting](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sorting.md): In Ignite UI for Angular Grid, data sorting is enabled on a per-column level, meaning that the igx-grid can have a mix of sortable and non-sortable columns. - [State Persistence](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/state-persistence.md): The igxGridState directive allows developers to easily save and restore the grid state. - [Data Grid Summaries](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/summaries.md): The Angular UI grid in Ignite UI for Angular has a summaries feature that functions on a per-column level as group footer. - [Data Grid Toolbar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/toolbar.md): The Grid in Ignite UI for Angular provides a GridToolbar which is essentially a container for UI operations. - [Data Grid Virtualization and performance](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/virtualization.md): In Ignite UI for Angular, the Grid control now utilizes the igxForOf directive and virtualizes its content both vertically and horizontally. #### Editing - [Data Grid Editing Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/editing.md): Ignite UI for Angular Grid component provides an easy way to perform data manipulation operations like creating, updating, and deleting records. - [Data Grid Cell Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/cell-editing.md): Ignite UI for Angular Grid component provides powerful data manipulation capabilities and powerful API for Angular CRUD operations. - [Data Grid Row Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-editing.md): The Grid provides a convenient way to perform data manipulations through inline editing and a powerful API for Angular CRUD operations. - [Data Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-adding.md): The Grid provides a convenient way to perform data manipulations through inline row adding and a powerful API for Angular CRUD operations. - [Data Grid Batch Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/batch-editing.md): The Batch Editing feature of the IgxGrid is based on the TransactionService. - [Data Grid Validation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/validation.md): The Grid's editing exposes a built-in validation mechanism of user input when editing cells/rows. - [Grid with Cascading combos](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/cascading-combos.md): The Grid's Editing functionality provides with the opportunity to use Cascading Combos. #### Filtering - [Data Grid Filtering Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/filtering.md): IgniteUI for Angular Grid component provides three different filtering types - Quick filtering, Excel style filtering and Advanced filtering which enable you to display only the records that meet specified criteria. - [Data Grid Excel Style Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/excel-style-filtering.md): The grid Excel filtering provides an Excel like filtering UI for any Angular table like the Grid. - [Data Grid Advanced Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/advanced-filtering.md): The Advanced filtering provides a dialog which allows the creation of groups with filtering conditions across all columns for any Angular table like the Grid. #### Selection - [Data Grid Selection Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/selection.md): With Ignite UI for Angular Grid you can easily select data by using variety of events, rich API or with simple mouse interactions like single select. - [Data Grid Row selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-selection.md): With row selection in Ignite UI for Angular, there is row selector column that precedes all other columns within the row. - [Data Grid Cell selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/cell-selection.md): The selection feature enables rich data select capabilities in the Material UI based Grid. - [Data Grid Selection-based Aggregates](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/selection-based-aggregates.md): With the sample, illustrated beyond, you may see how multiple selection is being used, alongside with custom summary functions, to display aggregates based on the selected values in the grid footer. - [Data Grid Column Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-selection.md): The Column selection feature provides an easy way to select an entire column with a single click. ### Tree Grid - [Tree Grid Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid.md): The Ignite UI for Angular Tree Grid is used to display and manipulate hierarchical or flat self-referencing data. - [Cell Merging](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/cell-merging.md): The Ignite UI for Angular Tree Grid provides a Cell Merging feature that combines two or more adjacent cells with the same value into a single, larger cell. - [Clipboard Interactions](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/clipboard-interactions.md): Copy to clipboard operations are now available in the Tree Grid. - [Collapsible Column Groups](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/collapsible-column-groups.md): Multi-column headers allow you to have multiple levels of nested columns and column groups. - [Column Data types](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/column-types.md): Ignite UI for Angular Tree Grid provides a default handling of number, string, date, boolean, currency and percent column data types, based on which the appearance of the default and editing templates will be present. - [Column Hiding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/column-hiding.md): The Ignite UI for Angular Tree Grid provides a ColumnActions component with a ColumnHidingDirective which allows users to perform column hiding directly through the user interface or by using the Angular component. - [Column Moving](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/column-moving.md): The Tree Grid component in Ignite UI for Angular provides the Column Moving feature to allow columns reordering via standard drag/drop mouse or touch gestures, or by using the Column Moving API. - [Column Pinning](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/column-pinning.md): A column or multiple columns can be pinned to the left or right side of the Angular UI Grid. - [Column Resizing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/column-resizing.md): With deferred grid column resizing, the user will see a temporary resize indicator while the Angular drag resizing operation is in effect. - [Conditional Styling](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/conditional-cell-styling.md): If you need to provide any custom styling in the IgxTreeGrid component, you can do it on either row or cell level. - [Tree Grid Export services](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/export-excel.md): Whether your audience needs a spreadsheet for deeper analysis or a polished PDF they can share right away, the Ignite UI exporters help you deliver the right file from the IgxTreeGrid in seconds. - [Group By](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/groupby.md): If you have non-hierarchical data and you want to group by one or more columns and populate the parent rows with aggregated values, you could use the TreeGrid along with treeGridGrouping pipe and the UI component with selector igx-tree-grid-group-by-area. - [Keyboard navigation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/keyboard-navigation.md): Keyboard navigation in the IgxTreeGrid provides a rich variety of keyboard interactions for the user. - [Live Data / Real-Time](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/live-data.md): The Tree Grid component is able to handle thousands of updates per second, while staying responsive for user interactions. - [Load On Demand](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/load-on-demand.md): The Ignite UI for Angular TreeGrid can be rendered in such way that it requires the minimal amount of data to get from the server so the user could see it as quickly as possible. - [Multi-column Headers](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/multi-column-headers.md): TreeGrid supports multi-column headers which allows you to group columns by placing them under a common multi headers. - [Tree Grid Paging](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/paging.md): Pagination is used to split a large set of data into a sequence of pages that have similar content. - [Remote Data Operations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/remote-data-operations.md): The Ignite UI for Angular Tree Grid supports remote data operations such as remote virtualization, remote sorting, remote filtering and others. - [Row Actions](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/row-actions.md): The grid component in Ignite UI for Angular provides the ability to use ActionStrip and utilize CRUD for row/cell components and row pinning. - [Row Drag](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/row-drag.md): In Ignite UI for Angular Tree Grid, RowDrag is initialized on the root igx-tree-grid component and is configurable via the rowDraggable input. - [Row Pinning](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/row-pinning.md): One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. - [Searching](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/search.md): Angular Tree Grid search enables the process of finding values in the collection of data. - [Size](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/display-density.md): IgxTreeGrid design is based on Material Design Guidelines. - [Sizing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/sizing.md): There are many different ways to size the TreeGrid in order to accommodate a lot of scenarios that the users can have. - [Tree Grid Sorting](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/sorting.md): In Ignite UI for Angular Tree Grid, data sorting is enabled on a per-column level, meaning that the igx-tree-grid can have a mix of sortable and non-sortable columns. - [State Persistence](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/state-persistence.md): The igxGridState directive allows developers to easily save and restore the grid state. - [Tree Grid Summaries](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/summaries.md): The Angular UI grid in Ignite UI for Angular has a summaries feature that functions on a per-column level as group footer. - [Tree Grid Toolbar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/toolbar.md): The Tree Grid in Ignite UI for Angular provides a GridToolbar which is essentially a container for UI operations. - [Tree Grid Virtualization and performance](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/virtualization.md): In Ignite UI for Angular, the TreeGrid control now utilizes the igxForOf directive and virtualizes its content both vertically and horizontally. #### Editing - [Tree Grid Editing Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/editing.md): Ignite UI for Angular Tree Grid component provides an easy way to perform data manipulation operations like creating, updating, and deleting records. - [Tree Grid Cell Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/cell-editing.md): Ignite UI for Angular Tree Grid component provides powerful data manipulation capabilities and powerful API for Angular CRUD operations. - [Tree Grid Row Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/row-editing.md): The Tree Grid provides a convenient way to perform data manipulations through inline editing and a powerful API for Angular CRUD operations. - [Tree Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/row-adding.md): The Tree Grid provides a convenient way to perform data manipulations through inline row adding and a powerful API for Angular CRUD operations. - [Tree Grid Batch Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/batch-editing.md): The Batch Editing feature of the IgxTreeGrid is based on the TransactionService. - [Tree Grid Validation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/validation.md): The Tree Grid's editing exposes a built-in validation mechanism of user input when editing cells/rows. #### Filtering - [Tree Grid Filtering Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/filtering.md): IgniteUI for Angular Tree Grid component provides three different filtering types - Quick filtering, Excel style filtering and Advanced filtering which enable you to display only the records that meet specified criteria. - [Tree Grid Excel Style Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/excel-style-filtering.md): The grid Excel filtering provides an Excel like filtering UI for any Angular table like the Tree Grid. - [Tree Grid Advanced Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/advanced-filtering.md): The Advanced filtering provides a dialog which allows the creation of groups with filtering conditions across all columns for any Angular table like the Tree Grid. #### Selection - [Tree Grid Selection Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/selection.md): With Ignite UI for Angular Tree Grid you can easily select data by using variety of events, rich API or with simple mouse interactions like single select. - [Tree Grid Row selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/row-selection.md): With row selection in Ignite UI for Angular, there is row selector column that precedes all other columns within the row. - [Tree Grid Cell selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/cell-selection.md): The selection feature enables rich data select capabilities in the Material UI based Tree Grid. - [Tree Grid Column Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/column-selection.md): The Column selection feature provides an easy way to select an entire column with a single click. ### Hierarchical Grid - [Hierarchical Grid Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical-grid.md): The Ignite UI for Angular Hierarchical Data Grid is used to display and manipulate hierarchical tabular data. - [Cell Merging](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/cell-merging.md): The Ignite UI for Angular Hierarchical Grid provides a Cell Merging feature that combines two or more adjacent cells with the same value into a single, larger cell. - [Collapsible Column Groups](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/collapsible-column-groups.md): Multi-column headers allow you to have multiple levels of nested columns and column groups. - [Column Data types](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/column-types.md): Ignite UI for Angular Hierarchical Grid provides a default handling of number, string, date, boolean, currency and percent column data types, based on which the appearance of the default and editing templates will be present. - [Column Hiding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/column-hiding.md): The Ignite UI for Angular Hierarchical Grid provides a ColumnActions component with a ColumnHidingDirective which allows users to perform column hiding directly through the user interface or by using the Angular component. - [Column Moving](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/column-moving.md): The Hierarchical Grid component in Ignite UI for Angular provides the Column Moving feature to allow columns reordering via standard drag/drop mouse or touch gestures, or by using the Column Moving API. - [Column Pinning](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/column-pinning.md): A column or multiple columns can be pinned to the left or right side of the Angular UI Grid. - [Column Resizing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/column-resizing.md): With deferred grid column resizing, the user will see a temporary resize indicator while the Angular drag resizing operation is in effect. - [Conditional Styling](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/conditional-cell-styling.md): If you need to provide any custom styling in the IgxHierarchicalGrid component, you can do it on either row or cell level. - [Hierarchical Grid Export services](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/export-excel.md): Whether your audience needs a spreadsheet for deeper analysis or a polished PDF they can share right away, the Ignite UI exporters help you deliver the right file from the IgxHierarchicalGrid in seconds. - [Keyboard navigation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/keyboard-navigation.md): Keyboard navigation in the IgxHierarchicalGrid provides a rich variety of keyboard interactions for the user. - [Load on Demand](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/load-on-demand.md): The Ignite UI for Angular HierarchicalGrid allows fast rendering by requesting the minimum amount of data to be retrieved from the server so that the user can see the result in view and interact with the visible data as quickly as possible. - [Multi-column Headers](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/multi-column-headers.md): HierarchicalGrid supports multi-column headers which allows you to group columns by placing them under a common multi headers. - [Hierarchical Grid Paging](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/paging.md): Pagination is used to split a large set of data into a sequence of pages that have similar content. - [Remote Data Operations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/remote-data-operations.md): The Ignite UI for Angular Hierarchical Grid supports remote data operations such as remote virtualization, remote sorting, remote filtering and others. - [Row Actions](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/row-actions.md): The grid component in Ignite UI for Angular provides the ability to use ActionStrip and utilize CRUD for row/cell components and row pinning. - [Row Drag](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/row-drag.md): In Ignite UI for Angular Hierarchical Grid, RowDrag is initialized on the root igx-hierarchical-grid component and is configurable via the rowDraggable input. - [Row Pinning](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/row-pinning.md): One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. - [Size](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/display-density.md): IgxHierarchicalGrid design is based on Material Design Guidelines. - [Sizing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/sizing.md): There are many different ways to size the HierarchicalGrid in order to accommodate a lot of scenarios that the users can have. - [Hierarchical Grid Sorting](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/sorting.md): In Ignite UI for Angular Hierarchical Grid, data sorting is enabled on a per-column level, meaning that the igx-hierarchical-grid can have a mix of sortable and non-sortable columns. - [State Persistence](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/state-persistence.md): The igxGridState directive allows developers to easily save and restore the grid state. - [Hierarchical Grid Summaries](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/summaries.md): The Angular UI grid in Ignite UI for Angular has a summaries feature that functions on a per-column level as group footer. - [Hierarchical Grid Toolbar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/toolbar.md): The Hierarchical Grid in Ignite UI for Angular provides a GridToolbar which is essentially a container for UI operations. - [Hierarchical Grid Virtualization and performance](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/virtualization.md): In Ignite UI for Angular, the HierarchicalGrid control now utilizes the igxForOf directive and virtualizes its content both vertically and horizontally. #### Editing - [Hierarchical Grid Editing Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/editing.md): Ignite UI for Angular Hierarchical Grid component provides an easy way to perform data manipulation operations like creating, updating, and deleting records. - [Hierarchical Grid Cell Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/cell-editing.md): Ignite UI for Angular Hierarchical Grid component provides powerful data manipulation capabilities and powerful API for Angular CRUD operations. - [Hierarchical Grid Row Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/row-editing.md): The Hierarchical Grid provides a convenient way to perform data manipulations through inline editing and a powerful API for Angular CRUD operations. - [Hierarchical Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/row-adding.md): The Hierarchical Grid provides a convenient way to perform data manipulations through inline row adding and a powerful API for Angular CRUD operations. - [Hierarchical Grid Batch Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/batch-editing.md): The Batch Editing feature of the IgxHierarchicalGrid is based on the TransactionService. - [Hierarchical Grid Validation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/validation.md): The Hierarchical Grid's editing exposes a built-in validation mechanism of user input when editing cells/rows. #### Filtering - [Hierarchical Grid Filtering Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/filtering.md): IgniteUI for Angular Hierarchical Grid component provides three different filtering types - Quick filtering, Excel style filtering and Advanced filtering which enable you to display only the records that meet specified criteria. - [Hierarchical Grid Excel Style Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/excel-style-filtering.md): The grid Excel filtering provides an Excel like filtering UI for any Angular table like the Hierarchical Grid. - [Hierarchical Grid Advanced Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/advanced-filtering.md): The Advanced filtering provides a dialog which allows the creation of groups with filtering conditions across all columns for any Angular table like the Hierarchical Grid. #### Selection - [Hierarchical Grid Selection Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/selection.md): With Ignite UI for Angular Hierarchical Grid you can easily select data by using variety of events, rich API or with simple mouse interactions like single select. - [Hierarchical Grid Row selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/row-selection.md): With row selection in Ignite UI for Angular, there is row selector column that precedes all other columns within the row. - [Hierarchical Grid Cell selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/cell-selection.md): The selection feature enables rich data select capabilities in the Material UI based Hierarchical Grid. - [Hierarchical Grid Column Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/column-selection.md): The Column selection feature provides an easy way to select an entire column with a single click. ### Pivot Grid - [Pivot Grid Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotgrid/pivot-grid.md): Ignite UI for Angular Pivot Grid is one of our best Angular Components, representing a table of grouped values and aggregates that lets you organize and summarize data in a tabular form. - [Pivot Grid Export services](https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotgrid/export-excel.md): Whether your audience needs a spreadsheet for deeper analysis or a polished PDF they can share right away, the Ignite UI exporters help you deliver the right file from the IgxPivotGrid in seconds. - [Pivot Grid Features](https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotgrid/pivot-grid-features.md): The pivot and flat grid component classes inherit from a common base and thus share some functionality and features. - [Pivot Grid Remote Operations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotgrid/pivot-grid-custom.md): In scenarios where the pivot data is already grouped and aggregated from a remote service and there's no need for further processing on the client, the pivot grid can be configured to use a custom empty strategy that will skip data processing on the client and allow it to. - [State Persistence](https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotgrid/state-persistence.md): The igxGridState directive allows developers to easily save and restore the grid state. ### Grid Lite - [Grid Lite Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid-lite/overview.md): The Ignite UI for Angular Grid Lite is a lightweight, high-performance Angular data grid that’s free to use, open-source, and built for modern Angular applications. - [Data Binding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid-lite/binding.md): The Grid Lite accepts an array of plain objects as a data source. - [Grid Lite Filtering Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid-lite/filtering.md): The Grid Lite supports filtering operations on its data source. - [Grid Lite Sorting](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid-lite/sorting.md): The Grid Lite supports sorting operations on its data source. - [Grid Lite Styling & Theming](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid-lite/theming.md): The Grid Lite comes with four distinct themes - Bootstrap, Material, Fluent and Indigo. #### Column Configuration - [Grid Lite Column Configuration Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid-lite/column-configuration.md): Columns are defined declaratively using column child components within the grid. - [Grid Lite Cell Template](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid-lite/cell-template.md): By default, the grid uses the field of the column to render the value as a string inside the cell. - [Grid Lite Header Template](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid-lite/header-template.md): Similar to the cell templates, column headers can also be customized to better fit the desired use case. ### Combo - [Combo Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo.md): The Angular ComboBox component represents a drop-down list that provides editable functionalities, allowing users to choose multiple options from a predefined list. - [Features](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo-features.md): The Ignite UI for Angular ComboBox control exposes several features including data and value binding, custom values, filtering, grouping, etc. - [Remote Binding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo-remote.md): The Ignite UI for Angular ComboBox Component exposes an API that allows binding a combobox to a remote service and retrieving data on demand. - [Templates](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo-templates.md): The Ignite UI for Angular ComboBox Component allows defining custom templates for different areas such as header, footer, items, empty list and adding button. - [Single Select ComboBox](https://www.infragistics.com/products/ignite-ui-angular/angular/components/simple-combo.md): The Angular Single Select ComboBox component is a modification of ComboBox component that allows single selection. ### Spreadsheet - [Spreadsheet Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/spreadsheet-overview.md): The Angular Spreadsheet (Excel viewer) component is lightweight, feature-rich and supplied with all the necessary options for operating, visualizing, and editing all types of spreadsheet data – scientific, business, financial, and more. - [Activation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/spreadsheet-activation.md): The Angular Spreadsheet component exposes properties that allow you to determine the currently active cell, pane, and worksheet in the control. - [Chart Adapter](https://www.infragistics.com/products/ignite-ui-angular/angular/components/spreadsheet-chart-adapter.md): The Angular Spreadsheet component allows displaying charts in your Spreadsheet. - [Clipboard](https://www.infragistics.com/products/ignite-ui-angular/angular/components/spreadsheet-clipboard.md): Explains how to copy, cut, and paste cells in the Angular Spreadsheet by using its clipboard commands and API. - [Conditional Formatting](https://www.infragistics.com/products/ignite-ui-angular/angular/components/spreadsheet-conditional-formatting.md): The Angular Spreadsheet component allows you to conditionally format the cells of a worksheet. - [Configuring Spreadsheet](https://www.infragistics.com/products/ignite-ui-angular/angular/components/spreadsheet-configuring.md): The Angular Spreadsheet component allows the user to configure many different aspects of the control. - [Commands](https://www.infragistics.com/products/ignite-ui-angular/angular/components/spreadsheet-commands.md): The Angular Spreadsheet component allows you to perform commands for activating different features of the spreadsheet. - [Data Validation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/spreadsheet-data-validation.md): When setting up the data validation rules you will need to import the rules you want to use. - [Hyperlinks](https://www.infragistics.com/products/ignite-ui-angular/angular/components/spreadsheet-hyperlinks.md): The Angular Spreadsheet component allows display of pre-existing hyperlinks in your Excel workbook as well as insertion of new ones that can link to websites, file directories, and even other worksheets in the workbook. - [Excel Utility](https://www.infragistics.com/products/ignite-ui-angular/angular/components/excel-utility.md): Describes the ExcelUtility helper used to load, save, and convert workbook data with the Ignite UI for Angular Excel Library. ## Dashboards - [Dashboard Tile](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dashboard-tile.md): The Angular Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. ## Charts - [Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/chart-overview.md): Ignite UI for Angular Charts & Graphs is an extensive library of data visualizations that enable stunning, interactive charts and dashboards for your web and mobile apps. - [Area Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/area-chart.md): The Ignite UI for Angular Area Chart renders as a collection of points connected by straight line segments with the area below the line filled in. - [Bar Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/bar-chart.md): The Ignite UI for Angular Bar Chart, Bar Graph, or Horizontal Bar Chart, is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars with equal heights but different. - [Bubble Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/bubble-chart.md): The Ignite UI for Angular Bubble Chart is a type of Scatter Chart that show markers with variable scaling to represent the relationship among items in several distinct series of data or to plot data items using x and y coordinates. - [Column Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/column-chart.md): The Ignite UI for Angular Column Char, Column Graph, or Vertical Bar Chart is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by columns with equal widths but different heights. - [Composite Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/composite-chart.md): The Ignite UI for Angular Composite Chart, also called a Combo Chart, is visualization that combines different types of chart types in the same plot area. - [Data Pie Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/data-pie-chart.md): The Ignite UI for Angular Data Pie Chart is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value. - [Donut Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/donut-chart.md): The Ignite UI for Angular Donut Chart is similar to the Pie Chart, proportionally illustrating the occurrences of a variable. - [Financial / Stock Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart.md): The Ignite UI for Angular Stock Chart, sometimes referred to as Angular Financial Chart or Candlestick Chart, is a composite visualization that renders stock ticker data, or price data in an interactive time-series display. - [Line Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/line-chart.md): The Ignite UI for Angular Line Chart or Line Graph is a type of category charts that show the continuous data values represented by points connected by straight line segments of one or more quantities over a period of time. - [Pie Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/pie-chart.md): The Ignite UI for Angular Pie Chart, or Pie Graph, is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value. - [Point Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/point-chart.md): The Ignite UI for Angular Point Chart renders a collection of points. - [Polar Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/polar-chart.md): The Ignite UI for Angular Polar Chart uses the polar coordinate system (angle, radius) instead of the Cartesian coordinate system (x, y) to plot data in chart. - [Radial Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/radial-chart.md): The Ignite UI for Angular Radial Chart takes data and render it as collection of data points wrapped around a circle (rather than stretching along a horizontal line). - [Scatter Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/scatter-chart.md): The Ignite UI for Angular Scatter Chart belongs to a group of charts that show the relationship among items in distinct series of data or to plot data items using numeric x and y coordinates. - [Shape Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/shape-chart.md): The Ignite UI for Angular Shape Charts are a group of charts that take array of shapes (array or arrays of X/Y points) and render them as collection of polygons or polylines in Cartesian (x, y) coordinate system. - [Spline Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/spline-chart.md): The Ignite UI for Angular Spline Chart belongs to a group of Category Charts that render as a collection of points connected by smooth curves of spline. - [Sparkline Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/sparkline-chart.md): The Ignite UI for Angular Sparkline is a lightweight charting control. - [Stacked Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stacked-chart.md): The Ignite UI for Angular Stacked Chart belongs to a special group of charts that render multiple values of data items as stacked area/polygons, bars, columns, lines, or splines. - [Step Chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/step-chart.md): The Ignite UI for Angular Step Chart belongs to a group of category charts that render as a collection of points connected by continuous vertical and horizontal lines. - [Treemap](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/treemap-chart.md): The Ignite UI for Angular Treemap chart displays hierarchical (tree-structured) data as a set of nested nodes. - [Chart API](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/chart-api.md): The Ignite UI for Angular charts provide simple and easy to use APIs to plot your data in CategoryChart, FinancialChart, DataChart, DataPieChart, DoughnutChart, PieChart, and Sparkline UI elements. ### Chart Features - [Chart Features Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/chart-features.md): The Ignite UI for Angular Charts allow you to display many different features to portray the full data story to be told with your chart. - [Axis Gridlines](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-axis-gridlines.md): All Ignite UI for Angular charts include built-in capability to modify appearance of axis lines as well as frequency of major/minor gridlines and tickmarks that are rendered on the X-Axis and Y-Axis. - [Axis Layouts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-axis-layouts.md): All Ignite UI for Angular charts include options to configure many axis layout options such as location as well as having the ability to share axis between series or have multiple axes in the same chart. - [Axis Options](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-axis-options.md): In all Ignite UI for Angular charts, the axes provide properties for visual configurations such as titles, labels, and ranges. - [Axis Types](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-axis-types.md): The Ignite UI for Angular Category Chart uses only one CategoryXAxis and one NumericYAxis type. - [Chart Animations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-animations.md): Animations allow you to ease-in the series as it loads a new data source. - [Chart Annotations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-annotations.md): The Angular chart's hover interactions and annotations are implemented through hover interaction layers, which are series that are added to the series collection. - [Chart Data Aggregations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-data-aggregations.md): In the Ignite UI for Angular CategoryChart control Data Aggregations feature allows you to group data in the chart by unique values on the XAxis and then sort those groups. - [Chart Data Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-data-filtering.md): Data Filtering allows you to query large data in order to analyze and plot small subset of data entries via filter expressions, all without having to manually modify the datasource bound to the chart. - [Chart Data Legend](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-data-legend.md): In Ignite UI for Angular, the DataLegend is highly-customizable version of the Legend, that shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. - [Chart Data Annotations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-data-annotations.md): In the Angular chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands). - [Chart Data Tooltip](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-data-tooltip.md): In Ignite UI for Angular, the DataToolTip displays values and titles of series as well as legend badges of series in a tooltip. - [Chart Data Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-data-selection.md): The Ignite UI for Angular selection feature in Angular Data Chart allows users to interactively select, highlight, outline and vice-versa deselect single or multiple series within a chart. - [Chart Highlight Filter](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-highlight-filter.md): The Ignite UI for Angular Chart components support a data highlighting overlay that can enhance the visualization of the series plotted in those charts by allowing you to view a subset of the data plotted. - [Chart Highlighting](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-highlighting.md): All Angular Charts support a variety of highlighting options. - [Chart Markers](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-markers.md): In Ignite UI for Angular, markers are visual elements that display the values of data points in the chart's plot area. - [Chart Navigation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-navigation.md): The Ignite UI for Angular charts allows for interactive panning and zooming via the mouse, keyboard and touch. - [Chart Overlays](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-overlays.md): The Angular DataChart allows for placement of horizontal or vertical lines at a single numeric value that you define through usage of the ValueOverlay. - [Chart Performance](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-performance.md): Angular charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. - [Chart Synchronization](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-synchronization.md): The Ignite UI for Angular data chart allows for synchronization with respect to the coordination of zooming, panning, and crosshair events between multiple charts. - [Chart Tooltips](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-tooltips.md): In Angular charts, tooltips provide details about bound data and they are rendered in popups when the end-user hovers over data points. - [Chart Trendlines](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-trendlines.md): In Ignite UI for Angular charts, trendlines help in identifying a trend or finding patterns in data. - [Chart User Annotations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-user-annotations.md): In Ignite UI for Angular, you can annotate the DataChart with slice, strip, and point annotations at runtime using the user annotations feature. - [Zoom Slider](https://www.infragistics.com/products/ignite-ui-angular/angular/components/zoomslider-overview.md): The Angular ZoomSlider control provides zooming functionality to range-enabled controls. ## Maps - [Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map.md): The Ignite UI for Angular map component allows you to display data that contains geographic locations from view models or geo-spatial data loaded from shape files on geographic imagery maps. - [Geographic Area Map](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-type-scatter-area-series.md): In Angular map component, you can use the GeographicScatterAreaSeries to draw a colored surface, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. - [Geographic Contour Map](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-type-scatter-contour-series.md): In Angular map component, you can use the GeographicContourLineSeries to draw colored contour lines, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. - [Geographic High Density Map](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-type-scatter-density-series.md): In Angular map component, you can use the GeographicHighDensityScatterSeries to bind and show scatter data ranging from hundreds to millions of data points requiring exceedingly little loading time. - [Geographic Bubble Map](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-type-scatter-bubble-series.md): In Angular map component, you can use the GeographicProportionalSymbolSeries to plot bubbles or proportional markers at the geographic locations specified by the data in your application. - [Geographic Symbol Map](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-type-scatter-symbol-series.md): In Angular map component, you can use the GeographicSymbolSeries to display geo-spatial data using points or markers in a geographic context. - [Geographic Polygon Map](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-type-shape-polygon-series.md): In Angular map component, you can use the GeographicShapeSeries to display geo-spatial data using shape polygons in a geographic context. - [Geographic Polyline Map](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-type-shape-polyline-series.md): In Angular map component, you can use the GeographicPolylineSeries to display geo-spatial data using polylines in a geographic context. - [Geographic Map API](https://www.infragistics.com/products/ignite-ui-angular/angular/components/maps/map-api.md): API reference for the Angular Geographic Map component covering zoom and viewport management (WorldRect, WindowRect, WindowScale), geographic coordinate conversion (GetGeographicPoint, GetPixelPoint, GetGeographicFromZoom), and the Zoomable interface. ### Geographic Map Features - [Binding CSV File](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-binding-data-csv.md): With the Ignite UI for Angular map component, you can plot geographic data loaded from various file types. - [Binding JSON File](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-binding-data-json-points.md): With the Ignite UI for Angular map, you can plot geographic data loaded from various file types. - [Binding Data Model](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-binding-data-model.md): The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. - [Binding Shape File](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-binding-shp-file.md): The Ignite UI for Angular map component, the ShapefileRecord class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of IgxShapefileRecord objects. - [Binding Multiple Shapes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-binding-multiple-shapes.md): In the Ignite UI for Angular map, you can add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. - [Binding Multiple Sources](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-binding-multiple-sources.md): In the Ignite UI for Angular map, you can add multiple geographic series objects to overlay custom data sources with geo-spacial data. - [Displaying Azure Imagery](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-display-azure-imagery.md): The Angular AzureMapsImagery is geographic imagery mapping service provided by Microsoft®. - [Displaying Bing Imagery](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-display-bing-imagery.md): NOTE: As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. - [Displaying Esri Imagery](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-display-esri-imagery.md): The ArcGISOnlineMapImagery is a free geographic imagery mapping service created by Esri company. - [Displaying Heat Imagery](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-display-heat-imagery.md): The Ignite UI for Angular map control has the ability to show heat-map imagery through the use of the ShapefileRecord that are generated by a ShapefileRecord by loading geo-spatial data by loading shape files to a tile series. - [Displaying OSM Imagery](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-display-osm-imagery.md): The Angular OpenStreetMapImagery is a free geographic imagery mapping service created collaboratively by OpenStreetMap© contributors from around the world. - [Navigating Map Content](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-navigation.md): Navigation in the GeographicMap control is enabled by default and it allows zooming and panning of the map content. - [Shape Files Reference](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-shape-files-reference.md): Before plotting geo-spatial data in the control, one should get familiar with the following resources which provide general information about maps and geo-spatial data. - [Shape Styling](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-shape-styling.md): Explains how to apply data-driven conditional styling to geographic shape series in the Ignite UI for Angular Map. - [Shape Styling Utility](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-resources-shape-styling-utility.md): The resource topic provides implementation of an utility that helps with styling UI elements of GeographicShapeSeries in Angular GeographicMap component. - [World Connections](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-resources-world-connections.md): The resource topic provides implementation of data utility for generating locations of airports, flight paths, and geographic gridlines. - [World Locations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-resources-world-locations.md): The resource topic provides implementation of data utility for generating geographic locations of cities and capitals of countries. - [World Utility](https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-resources-world-util.md): The resource topic provides implementation of utility that helps with generating Angular geographic data. ## Frameworks ### Excel Library - [Excel Library Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/excel-library.md): The Infragistics Angular Excel Library allows you to work with spreadsheet data using familiar Microsoft® Excel® spreadsheet objects like Workbook, Worksheet, Cell, Formula and many more. - [Using Cells](https://www.infragistics.com/products/ignite-ui-angular/angular/components/excel-library-using-cells.md): The WorksheetCell objects in an Excel worksheet is the object that holds your actual data values for the worksheet. - [Using Tables](https://www.infragistics.com/products/ignite-ui-angular/angular/components/excel-library-using-tables.md): The Infragistics Angular Excel Engine's WorksheetTable functionality allows you to format your data in rows and columns The data in a worksheet table can be managed independently from the data in the other rows and columns in a Worksheet. - [Using Workbooks](https://www.infragistics.com/products/ignite-ui-angular/angular/components/excel-library-using-workbooks.md): The Infragistics Angular Excel Engine enables you to save data to and load data from Microsoft® Excel®. - [Using Worksheets](https://www.infragistics.com/products/ignite-ui-angular/angular/components/excel-library-using-worksheets.md): The Infragistics Angular Excel Engine's Worksheet is where your data is kept. - [Working with Charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/excel-library-working-with-charts.md): The Infragistics Angular Excel Engine's WorksheetChart functionality allows you to add visual charting representations of data trends across regions of cells in a worksheet. - [Working with Sparklines](https://www.infragistics.com/products/ignite-ui-angular/angular/components/excel-library-working-with-sparklines.md): The Infragistics Angular Excel Library has support for adding sparklines to an Excel Worksheet. ## Gauges - [Bullet Graph](https://www.infragistics.com/products/ignite-ui-angular/angular/components/bullet-graph.md): The Angular bullet graph component allows for a linear and concise view of measures compared against a scale. - [Linear Gauge](https://www.infragistics.com/products/ignite-ui-angular/angular/components/linear-gauge.md): The Ignite UI for Angular linear gauge component allows for visualizing data in the form of a linear gauge. - [Radial Gauge](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radial-gauge.md): The Angular radial gauge component provides a number of visual elements, like a needle, tick marks, ranges, and labels, in order to create a predefined shape and scale. ## Styling & Themes - [Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes.md): With only a few lines of code, users can easily change the theming for their components. - [Palettes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/palettes.md): Ignite UI for Angular exposes CSS variables that allow you to update the colors in your application in a consistent way. - [Elevations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/elevations.md): Elevations are used to establish and maintain functional boundaries between Document Object Model trees to enable better functional encapsulation. - [Typography](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/typography.md): The typography in Ignite UI for Angular is modeled after the Material Type System. - [Roundness](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/roundness.md): Ignite UI for Angular allows you to customize the shape of components by adjusting their roundness using a value between 0 and 1. - [Size](https://www.infragistics.com/products/ignite-ui-angular/angular/components/display-density.md): Size configuration can significantly improve the visual representation of large amounts of data. - [Spacing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/spacing.md): Spacing configuration can significantly improve the visual representation of large amounts of data. ### Sass - [Sass Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass.md): Ignite UI for Angular doesn't shy away from exposing its Sass theming API so you can take full control of the styling in your application. - [Sass Configuration](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/configuration.md): The Ignite UI for Angular theming library exposes several input arguments variables that let you configure how the theming engine works. - [Palettes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/palettes.md): The Ignite UI for Angular theming engine provides several powerful functions and mixins for generating and retrieving colors. - [Elevations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/elevations.md): Elevations are used to establish and maintain functional boundaries between Document Object Model trees to enable better functional encapsulation. - [Typography](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/typography.md): The Ignite UI for Angular Typography Sass module allows you to modify the typography for all components in your application, specific typographic scale, or specific components. - [Schemas](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/schemas.md): Schemas are a simple, declarative way to list all properties a component theme uses. - [Animations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/animations.md): Ignite UI for Angular includes over 100+ pre-built animations specially designed for a better user experience. - [Roundness](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/roundness.md): Ignite UI for Angular allows you to change the shape of components by setting their roundness to a value between 0 and 1. - [Global Themes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/global-themes.md): The global theme allows you to quickly generate a theme that uses your custom color palette, schema, and elevations. - [Component Themes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/component-themes.md): Component themes allow you to change the styles of specific component instances by overriding the globally defined theme. #### Predefined Themes - [Sass Material](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/presets/material.md): The light version of the Material theme is the default theme in Ignite UI for Angular. - [Sass Fluent](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/presets/fluent.md): Since version 8.2 our components include a new theme inspired by the Microsoft Fluent Design System - [Sass Bootstrap](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/presets/bootstrap.md): Since version 9.0 our components include a new theme inspired by Bootstrap 4 and ng-bootstrap. - [Sass Indigo](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/presets/indigo.md): Since version 10.1 our components include a new theme inspired by our own design language. #### Misc - [Sass Using Tailwind Custom Classes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/misc/tailwind-classes.md): Ignite UI for Angular offers full theming customization through CSS variables and a powerful Sass engine. - [Sass Printing styles](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/misc/printing-styles.md): The Ignite UI for Angular theming engine provides some default printing styles, which make sure that our components have at least the bare minimum to look the same on paper as they appear on the web page. - [Sass Angular Material Theming](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/misc/angular-material-theming.md): The Ignite UI for Angular theming engine makes it easy to be used together with external components imported from other theming libraries like the Angular Material library. - [Sass Bootstrap Theming](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/misc/bootstrap-theming.md): The Ignite UI for Angular theming engine provides an opportunity to be used in conjunction with other component libraries such as the popular NG Bootstrap based on Bootstrap’s markup and CSS. ## Data Entry & Display - [Autocomplete](https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.md): Angular Autocomplete is a search box directive that enables users to easily find, filter and select an item from a list of suggestions while they type. - [Badge](https://www.infragistics.com/products/ignite-ui-angular/angular/components/badge.md): Angular Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. - [Button](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button.md): Angular Button directive is used for creating and adding actionable buttons to a web page/application. - [Button Group](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button-group.md): Angular Button Group component is used to organize buttons into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling. - [Checkbox](https://www.infragistics.com/products/ignite-ui-angular/angular/components/checkbox.md): Angular Checkbox is an extension of the standard HTML input type checkbox, providing similar functionality, only enhanced with things like animations and Material Design styling. - [Chip](https://www.infragistics.com/products/ignite-ui-angular/angular/components/chip.md): The Angular Chip component is a visual element that displays information in an oval container. - [Circular Progress](https://www.infragistics.com/products/ignite-ui-angular/angular/components/circular-progress.md): The Ignite UI for Angular Circular Progress Indicator component provides a visual indicator of an application’s process as it changes. - [Color Editor](https://www.infragistics.com/products/ignite-ui-angular/angular/components/inputs/color-editor.md): The Ignite UI for Angular Color Editor is a lightweight color picker component. - [Divider](https://www.infragistics.com/products/ignite-ui-angular/angular/components/divider.md): The divider component enables users to separate content both horizontally and vertically. - [Icon Button](https://www.infragistics.com/products/ignite-ui-angular/angular/components/icon-button.md): The Ignite UI for Angular Icon Button directive is intended to turn any icon into a fully functional button. - [Input Group](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input-group.md): The IgxInputGroupComponent allows the user to enhance input elements like input, select, textarea, etc. - [Label & Input](https://www.infragistics.com/products/ignite-ui-angular/angular/components/label-input.md): The Ignite UI for Angular Input and Label directives are used to decorate and style single-line or multi-line input elements in an igx-input-group component. - [Linear Progress](https://www.infragistics.com/products/ignite-ui-angular/angular/components/linear-progress.md): The Ignite UI for Angular Linear Progress Bar Indicator component provides a visual indicator of an application’s process as it changes. - [Mask](https://www.infragistics.com/products/ignite-ui-angular/angular/components/mask.md): By applying the igxMask directive on a text input field, the developer can control user input and format the visible value, based on configurable mask rules. - [Paginator](https://www.infragistics.com/products/ignite-ui-angular/angular/components/paginator.md): Pagination in Angular is an optimization technique when working with huge data sets. - [Radio & Radio Group](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio-button.md): The Ignite UI for Angular Radio Button component allows the user to select a single option from an available set of options that are listed side by side. - [Rating](https://www.infragistics.com/products/ignite-ui-angular/angular/components/rating.md): Rating in Angular represents a widget enabling users to quickly provide feedback and evaluate a product or a service on a web page by using a star rating system. - [Select](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select.md): Angular Select is a form component used for selecting a single value from a list of predefined values. - [Switch](https://www.infragistics.com/products/ignite-ui-angular/angular/components/switch.md): The Ignite UI for Angular Switch component is a binary choice selection component that behaves similarly to the switch component in iOS. - [Text Highlight](https://www.infragistics.com/products/ignite-ui-angular/angular/components/texthighlight.md): The TextHighlightDirective and IgxTextHighlightService in Ignite UI for Angular are used to highlight parts of a text, providing options for case sensitive searches and to highlight only exact matches. - [Virtual For Directive](https://www.infragistics.com/products/ignite-ui-angular/angular/components/for-of.md): The Ignite UI for Angular igxForOf directive is an alternative to ngForOf for templating large amounts of data. ### Drop Down - [Drop Down Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop-down.md): The Ignite UI for Angular Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. - [Virtual Drop Down](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop-down-virtual.md): The Ignite UI for Angular Drop Down component can fully integrate with the IgxForOf directive in order to display a very large list of items for its selection. - [Multi-select Hierarchical Drop Down](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop-down-hierarchical-selection.md): For the drop-down list we will use the DropDown as well as the ToggleActionDirective to open/close the drop-down. ### Icon - [Icon Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/icon.md): The Ignite UI for Angular Icon component unifies icon/font families so developers can use them interchangeably and add material icons to markup. - [Icon Service](https://www.infragistics.com/products/ignite-ui-angular/angular/components/icon-service.md): The Ignite UI for Angular Icon Service allows developers to add new icons from various sources to their UIs. - [Material Icons Extended](https://www.infragistics.com/products/ignite-ui-angular/angular/components/material-icons-extended.md): The Ignite UI Material Icons Extended is a subset of icons that extends the material icon set by Google. ### Query Builder - [Query Builder Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/query-builder.md): Angular Query Builder is part of our Angular Components and it provides a rich UI that allows developers to build complex data filtering queries for a specified data set. - [Using Query Builder Model](https://www.infragistics.com/products/ignite-ui-angular/angular/components/query-builder-model.md): Angular Query Builder provides a serializable/deserializable JSON format model, making it easy to build SQL queries. ## Interactions - [Action Strip](https://www.infragistics.com/products/ignite-ui-angular/angular/components/action-strip.md): The Ignite UI for Angular Action Strip component provides an overlay area containing one or more actions allowing additional UI and functionality to be shown on top of a specific target container upon user interaction e.g. hover. - [Chat](https://www.infragistics.com/products/ignite-ui-angular/angular/components/chat.md): The Chat component provides a complete solution for building conversational interfaces in your applications. - [Dialog Window](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog.md): Use the Ignite UI for Angular Dialog Window component to display messages or present forms for users to fill out. - [Drag and Drop](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drag-drop.md): The Ignite UI for Angular Drag and Drop directives enable dragging of elements around the page. - [Ripple](https://www.infragistics.com/products/ignite-ui-angular/angular/components/ripple.md): The Ignite UI for Angular Ripple component creates an animation in response to a touch or a mouse click. - [Slider](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider/slider.md): The Ignite UI for Angular Slider is a form component which allows selection in a given range by moving a thumb along a track. - [Toggle](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toggle.md): The Ignite UI for Angular Toggle directive allows the users to make a container in the DOM toggleable through user interaction. - [Tooltip](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip.md): The igxTooltip and the igxTooltipTarget directives provide us with the ability to create a fully customizable tooltip and attach it to any element on our page. ### Overlay - [Overlay Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay.md): The overlay service provides an easy and quick way to dynamically render content in the foreground of an app. - [Positioning Strategies](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-position.md): Position strategies determine where the content is displayed in the provided IgxOverlayService. - [Scrolling Strategies](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-scroll.md): The scroll strategy determines how the scrolling is handled in the provided IgxOverlayService. - [Overlay Styling](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-styling.md): IgxOverlayService is used to display content above the page content. ## Menus - [Navbar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navbar.md): The Ignite UI for Angular Navbar is an application header component that informs the user of their current position in an app, and helps them move back (much like the “back” button in a browser). - [Navigation Drawer](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer.md): The Ignite UI for Angular Navigation Drawer component is a side navigation container. - [Toolbar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/menus/toolbar.md): The Angular Toolbar component is a companion container for UI operations to be used primarily with our charting components. ## Layouts - [Accordion](https://www.infragistics.com/products/ignite-ui-angular/angular/components/accordion.md): The Angular Accordion is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container. - [Avatar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/avatar.md): Angular Avatar component helps adding initials, images, or material icons to your application. - [Bottom Navigation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabbar.md): The Ignite UI for Angular Bottom Navigation component enables the user to navigate among a number of content panels displayed in a single view. - [Card](https://www.infragistics.com/products/ignite-ui-angular/angular/components/card.md): Angular Card represents a flexible container that has different elements like title text, descriptions, image styles, call to action buttons, links and others. - [Carousel](https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel.md): Ignite UI for Angular Carousel is a responsive, lightweight component that provides the most flexible way to create slideshow-like web experience for users who navigate back and forth through a collection of images with text slides, links, and other html elements. - [Dock Manager](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dock-manager.md): The Ignite UI Dock Manager component provides means to manage the layout of your application through panes, allowing your end-users to customize it further by pinning, resizing, moving and hiding panes. - [Expansion Panel](https://www.infragistics.com/products/ignite-ui-angular/angular/components/expansion-panel.md): Ignite UI for Angular provides developers with one of the most useful and easy-to-use layout components - Expansion Panel. - [Layout Manager](https://www.infragistics.com/products/ignite-ui-angular/angular/components/layout.md): The Ignite UI for Angular Layout Directives allow developers to specify a layout direction for any children of the container it is applied to. - [Splitter](https://www.infragistics.com/products/ignite-ui-angular/angular/components/splitter.md): The Ignite UI for Angular Splitter component provides the ability to create layouts, split into multiple vertically or horizontally arranged panes that may be resized, expanded and collapsed. - [Stepper](https://www.infragistics.com/products/ignite-ui-angular/angular/components/stepper.md): The Ignite UI for Angular Stepper is a highly customizable component that visualizes content as a process and shows its progress by dividing the content into successive steps. - [Tabs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs.md): Ignite UI for Angular Tabs is a full-featured user interface component that has the primary purpose to organize and group related content in a single tabbed view, thus saving space and making content more comprehensible. - [Tile Manager](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tile-manager.md): The Tile Manager component enables the display of content in individual tiles. ## Notifications - [Banner](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.md): Angular Banner Component provides a way to easily display a prominent message to your application's users in a way that is less transient than a snackbar and less obtrusive than a dialog. - [Snackbar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar.md): The Ignite UI for Angular Snackbar component provides feedback about an operation with a single-line message, which can include an action. - [Toast](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast.md): The Ignite UI for Angular Toast component provides information and warning messages that are auto-hiding, non-interactive and cannot be dismissed by the user. ## Scheduling - [Calendar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar.md): Angular Calendar is a UI component used for displaying dates and days in an app. - [Date Picker](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-picker.md): Angular Date Picker is a feature rich component used for entering a date through manual text input or choosing date values from a calendar dialog that pops up. - [Date Range Picker](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-range-picker.md): The Angular Date Range Picker is a lightweight component that includes a text input and a calendar pop-up, allowing users to easily select start and end dates. - [Date Time Editor](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-time-editor.md): The Ignite UI for Angular Date Time Editor Directive allows the user to set and edit the date and time in a chosen input element. - [Month Picker](https://www.infragistics.com/products/ignite-ui-angular/angular/components/month-picker.md): The Ignite UI for Angular Month Picker component provides an easy and intuitive way to select a specific month and year using a month-year calendar view. - [Time Picker](https://www.infragistics.com/products/ignite-ui-angular/angular/components/time-picker.md): The time picker component allows users to input or select time portions of a Date object from a dropdown or dialog with spinners, which is then mirrored in the input field. ## Services - [CSV Exporter](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter-csv.md): The IgniteUI CSV Exporter service can export data in a Character Separated Values format from both raw data (array) or from an IgxGrid, IgxHierarchicalGrid and IgxTreeGrid. - [Excel Exporter](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter-excel.md): The Ignite UI for Angular Excel Exporter service can export data in Microsoft® Excel® format from raw data (array) or from the IgxGrid, IgxTreeGrid and IgxHierarchicalGrid components. - [PDF Exporter](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter-pdf.md): The Ignite UI for Angular PDF Exporter service provides powerful functionality to export data in PDF format from various sources, including raw data arrays and advanced grid components such as IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, and IgxPivotGrid. ### Transaction Service - [Services Transaction Service Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/transaction.md): The Transaction Service is an injectable middleware (through Angular's DI) that a component may use to accumulate changes without immediately affecting the underlying data. - [Services Transaction Service class hierarchy](https://www.infragistics.com/products/ignite-ui-angular/angular/components/transaction-classes.md): The Transaction is the main building block of the Transaction service. - [Services How to use the Transaction Service](https://www.infragistics.com/products/ignite-ui-angular/angular/components/transaction-how-to-use.md): You may get advantage of the Transaction Service when using any component that needs to preserve the state of its data source and to commit many transactions at once.