` tag (`##` Main Title).
-
-### 3. Using nested titles.
-Minor titles related to the main titles can be used with ``(`###`) or `` (`####`).
-Note: when `` (`####`) is used the title wont appear on the submenu on the right.
-
-# Writing a Styling section for article
-
-The main purpose of the Styling section is to provide simple examples on how to style most common parts of the UI (lets say styling for alternate rows in the grid), copy/paste the code in any sample and see it working. In order to write content that fullfills the purpose, follow the steps below:
-
-### 1. Give the content an `` Section header, so that it appears on the submenu on the right.
-### 2. Start the content with the example of adding the theming index file.
-### 3. Provide the simplest styling example, which is to extend the default theme for the corresponding feature/component. For example, when styling the paginator UI, the `igx-grid-paginator-theme` needs to be extended:
-
-```scss
-$dark-grid-paginator: grid-paginator-theme(
- $text-color: #F4D45C,
- $background-color: #575757,
- $border-color: #292826
-);
-```
-
-### 4. If other elements in the feature UI are styled by another theme, add example for that theme too. For example - the buttons in the paginator UI require that a new theme for buttons is created.
-### 5. If a theme provides a ton of parameters for styling, choose those that you decide would be the most common. You may state in one sentence what each property controls, and provide a link to the theme under the SASS API.
-### 6. Provide the last step, which is to include the component mixin, along with two notes – the first one for scoping any mixin if needed, and the second note about penetrating the `ViewEncapsulation`, along with example on how to overcome the encapsulation.
-### 7. Add an iframe with an example, along with a Stackblitz button
-### 8. Examples on styling with `igx-color`, `palettes` and `schemas` are not necessary, but you may add a link to Theming engine topics as they are quite detailed.
-### 9. When adding a section for a certain grid feature, add it for the igxHierachicalGrid and igxTreeGrid as well.
-
-
-# Workflow
-
-When working on an issue for the Ignite UI for Angular DocFX Site Builder, you need to be aware of and to follow a correct status workflow. We have created a number of status labels in order to communicate well what the current status of a single issue/pull request is. The statuses are as follows:
-
-## Development - applicable to issues and pull requests
-1. `status: in-review` this is the initial status of an issue. If the label is not placed, go ahead and place it.
-2. `status: in-development` this is the status once you start working on an issue. Assign the issue to yourself if it hasn't been assigned already and remove the previous status and assign it an in development status.
-3. `status: by-design` this is the status of an issue that has been reviewed and has been determined that the current design of the feature is such that the issue describes the correct behavior as incorrect. Remove other statuses and place this status if you've reviewed the issue.
-4. `status: third-party-issue` this is the status of an issue that has been reviewed, has been determined to be an issue, but the root case is not in the Ignite UI for Angular code. Example would be browser specific bugs caused by the particular browser's rendering or JavaScript engines, or an issue with the Angular framework. Remove other statuses and place only this one if you're the one performing the investigation.
-5. `status: not-to-fix` this is the status of issues that derive from our code, but have been decided to leave as is. This is done when fixes require general design and/or architecture changes and are very risky.
-6. `status: already-fixed` this status indicates that the issue is already fixed in the source code. When setting this status assign the person that logged the issue so that he can verify the issue is fixed in the respective development branch. Remove other statuses and place this status if you've reviewed the issue.
-7. `status: cannot-reproduce` this status indicates that you cannot reproduce the issue in the source code. A reason may be because the issue is already fixed. When setting this status assign the person that logged the issue so that he can respond with more details on how to reproduce it.
-8. `status: not a bug` this is the status of an issue that you reviewed and concluded that it's not a bug. You should comment explaining the reasons why you think the issue is not a bug.
-9. `status: resolved` this is the status of an issue that has been fixed and there are active pull requests related to it.
-
-Example status workflows:
-
-`status: in-review` => `status: in-development` => `status: resolved` (PR is created)
-
-`status: in-review` => `status: by-design` (Issue can be closed)
-
-`status: in-review` => `status: third-party-issue` (Issue can be closed)
-
-`status: in-review` => `status: not-to-fix` (Issue can be closed)
-
-> Note: In most cases the development will be related to new topics creation or updating of existing one. Keep in mind that **for each newly added topic the toc.json should be updated with a reference to the new topic**. It is recommended `Additional references` section to be added at the end of each topic.
-
-## Testing - applicable to pull requests
-1. `status: awaiting-test` this is the initial status of pull requests. If you're performing the pull request, please place this status on it. Pull requests are accepted if and only if all status checks pass, review is performed, and the pull request has been tested and contains `status: verified`.
-2. `status: in-test` place this status once you pick up the pull request for testing.
-3. `status: verified` place this status once you've tested the pull request, have verified that the issue is fixed, and have included all necessary automated tests for the issue.
-4. `status: not-fixed` place this status once you've tested the pull request and you are still able to reproduce the issue it's attempting to fix. Then assign the developer back on the pull request.
-
-Example status workflows:
-
-`status: awaiting-test` => `status: in-test` => `status: verified` (PR can be merged if all prerequisites are met)
-
-`status: awaiting-test` => `status: in-test` => `status: not-fixed` => `status: in-development` => `status: awaiting-test`
-
-> Note: When you are assigned to test a PR related to new topic creation or updating an existing one:
-1. Check the build result.
-2. Be sure that `Writing an article` guidance is respected.
-3. Check whether the embed sample is working.
-4. Code views are working as well
-5. Each hyperlink is working properly.
-6. Table of content is correct.
-
-> Note: Testing a PR from Angular Samples (when new sample is added) with combination of PR related to topic update (or when new topic is added).
-Open both repositories and perform `npm start`. This will start both projects and you will see the embed sample in your topic under `localhost`.
-
-## Localization - applicable to issues and pull requests
-Ensure that whenever a change is made to the text content the appropriate status is set:
-1. `status: pending-localization` this status tells that there are changes in the localization strings that need to be translated. When you make such changes, put this status badge without removing the other applicable ones and assign a person to do the translations.
-
-> Note: This status should be set only when the PR is approved. This will indicate that no further changes will be applied.
-2. `status: localized` this status is for issues that were with a pending translation status and have already been localized. Place this status label once these translation changes have been included in the current pull request, or the changes are already pulled with a different pull request.
-
-> Note: Keep in mind that when you submit a change in the EN .md files, you don't need to make the same change in the JP/KR versions. This task will be handled by the Localization team.
-
-
-## Fixing a bug
-
-1. Depending on where the bug/change/feature was found/is planned `the current version` or the `ongoing release version`, checkout a development branches from `vnext` or/and `master` branch. `vnext` is the version that is going to be used upon release (next version), and `master` is the branch with the current state (current version available on production). If the change/fix is applicable only to the ongoing release branch (`vnext`) there is no need to cherry-pick to `master` branch as the change/fix/feature will be pushed to `master` branch upon release.
-2. Run lint
-4. Pull request your changes and reference the issue. Use the enforced commit message format with applicable type, scope, etc.
-5. Don't forget to make the necessary status updates, as described in the workflow section.
-
-> Note: Cherry-pick to `master` branch only changes with **high priority**. There is no need to cherry-pick into `master` every bug fix/change from `vnext`> A regular mass merge PRs are going to be made from `vnext` into `master`.
-
-**Example workflow for a bug with high priority**
-The process will look like this:
-
-1. Checkout new branch from `vnext`. For code example purposes let's say the new branch is called `fixing-bug-5423-vnext`.
-2. Commit your changes to your `fixing-bug-5423-vnext` branch.
-3. Push and PR to the `vnext` branch.
-4. Switch to the `master` branch.
-5. Create a new branch from `master`. For code example purposes let's say the new branch is called `fixing-bug-5423-master`.
-6. Cherry pick your commit from the `fixing-bug-5423-vnext` branch: `git cherry-pick fixing-bug-5423-master`
-7. Push to your `fixing-bug-5423-master` branch and PR to the `master` branch.
-
-# Environment variables
-The environment variables are a syntactic sugar for pointing out the location of the resources used in a topic.
-These variables are defined in the [**environment.json**](https://github.com/IgniteUI/igniteui-docfx/blob/master/en/environment.json) file of a docfx project. Each environment variable is replaced with its corresponding value during build time.
-
-# Code View Configuration
-
-If you want to add a sample and introduce the code behind this sample to the readers, you have to add a ```
-
-```
-
-Here is a brief explanation of how the code view element works. For each sample (grid-sample-1) a .json file is created (grid--grid-sample-1.json). Each .json file contains the source code of the sample.
-All of the `.json` files are located under `/assets/samples` of [igniteui-angular-samples](https://github.com/IgniteUI/igniteui-angular-samples/) project.
-
-> Note: Samples without a respective .json file are still rendered in the code view, but the code tabs and the footer will be omitted.
-
-# Add/Change environment variables
-Our samples are embedded in the topics with iframes. Some topics have more than one sample and in order to prevent loading delays, we've added lazy loading functionality of [the iframes](https://github.com/IgniteUI/igniteui-docfx-template/issues/75). In order to achieve this we use [lazysizes](https://www.npmjs.com/package/lazysizes#recommendedpossible-markup-patterns) library.
-
-Follow the steps below for lazy loading implementation in a topic ([PR example](https://github.com/IgniteUI/igniteui-docfx/pull/1001/files#diff-52bafd164f6207a20517090ad21d7a6aR13)):
-1. Generally the first sample should not be lazily loaded. Add `loading` class to the sample container and: `onload="onSampleIframeContentLoaded(this);` on the `iframe`.
-2. For all of the sample you'd like to load lazily, add
-- `loading` class to the sample container
-- `lazyload` class to the `iframe`
-- rename the `src` of the iframe to `data-src`
-- you shouldn't have `onload="onSampleIframeContentLoaded(this);"`
-
-# Creating shared help topics
-[Here](https://github.com/IgniteUI/igniteui-docfx/wiki/Creating-Shared-Help-Topics) you can find the document which describes how to create a shared topic (template) which is used to produce separate topics for a particular features. For example shared templates for IgxGrid, IgxTreeGrid and/or IgxHierarchicalGrid components.
-
-# Updating of Data Visualization related topics
-Our cross platform docs are in `internal repo`.
-
-If you need to update the cross platform docs, please do so from the [`igniteui-xplat-doc`](https://github.com/IgniteUI/igniteui-xplat-docs) repo, queue an Angular build from `AngularDocFX_EN` build definition in the `igniteui-xplat-doc` repository, and then approve the PR that will come into public repo from ESShared.
-
-# Adding of images in the topic
-When there is a need to add image (png, jpeg and etc.) to a topic use the following guidance:
-- add `b-lazy` and `responsive-img` classes - these are responsible for the lazy loading and part of the image responsiveness
-- always add the image as part of the `images` folder.
-- define `data-srcset` with 480w, 768w and 1100w
-- set `alt` and `title` attributes
-
-
-Example:
-
-```html
-
-
-```
\ No newline at end of file
diff --git a/docs/angular/README.md b/docs/angular/README.md
deleted file mode 100644
index fa1501b140..0000000000
--- a/docs/angular/README.md
+++ /dev/null
@@ -1,198 +0,0 @@
-# Ignite UI for Angular Docs (Astro + Starlight)
-
-The Astro-based migration of the [igniteui-docfx](https://github.com/IgniteUI/igniteui-docfx) documentation site for Ignite UI for Angular. Built with [Astro Starlight](https://starlight.astro.build) and the internal `docs-template` integration.
-
----
-
-## Prerequisites
-
-- **Node.js** 18 or later
-- **docs-template** package at `C:/Repos/docs/docs-template`
- (referenced as a `file:` dependency in `package.json`)
-
----
-
-## Getting started
-
-```bash
-npm install
-npm run dev # English, development env → http://localhost:4321
-```
-
----
-
-## Build commands
-
-The build depends on two environment variables:
-
-| Variable | Values | Default |
-| :---------- | :---------------------------------------- | :------------ |
-| `NODE_ENV` | `development`, `staging`, `production` | `development` |
-| `DOCS_LANG` | `en`, `jp`, `kr` | `en` |
-
-All combinations are available as npm scripts:
-
-### Development server
-
-```bash
-npm run dev # English (default)
-npm run dev:en # English (explicit)
-npm run dev:jp # Japanese
-npm run dev:kr # Korean
-```
-
-### Build (development URLs)
-
-```bash
-npm run build # English (default)
-npm run build:en # English (explicit)
-npm run build:jp # Japanese
-npm run build:kr # Korean
-```
-
-### Build for staging
-
-```bash
-npm run build-staging # English (default)
-npm run build-staging:en # English (explicit)
-npm run build-staging:jp # Japanese
-npm run build-staging:kr # Korean
-```
-
-### Build for production
-
-```bash
-npm run build-production # English (default)
-npm run build-production:en # English (explicit)
-npm run build-production:jp # Japanese
-npm run build-production:kr # Korean
-```
-
-### Preview
-
-```bash
-npm run preview # serve the last build locally
-```
-
----
-
-## Environment variables
-
-Documentation uses `{environment:variableName}` tokens inside markdown that are resolved **at build time**.
-
-All variable values are defined in each language's `environment.json` (e.g. `src/content/en/environment.json`), keyed by `NODE_ENV` (`development`, `staging`, `production`).
-
-At startup, `astro.config.mjs` reads `NODE_ENV` and `DOCS_LANG`. The `remark-docfx` plugin (from `docs-template`) resolves every `{environment:key}` token at render time using the matching variable set from `environment.json`.
-
-Key variables:
-
-| Token | Description |
-| :---- | :---------- |
-| `{environment:demosBaseUrl}` | Base URL for Angular sample iframes |
-| `{environment:dvDemosBaseUrl}` | Data Visualization samples base URL |
-| `{environment:lobDemosBaseUrl}` | LOB samples base URL |
-| `{environment:angularApiUrl}` | TypeScript API docs base URL |
-| `{environment:sassApiUrl}` | SASS API docs base URL |
-| `{environment:infragisticsBaseUrl}` | Main Infragistics site base URL |
-
-You can also set these via a `.env` file at the project root:
-
-```
-NODE_ENV=development
-DOCS_LANG=en
-```
-
----
-
-## How it works
-
-### 1. Content source
-
-Markdown files live in `src/content/{lang}/` (e.g. `src/content/en/`). They are either:
-
-- **Flat docs** — individual `.md` files (e.g. `accordion.md`, `calendar.md`).
-- **Grid template pages** — shared templates in `src/content/{lang}/grids_templates/` expanded at build time into per-variant pages.
-
-### 2. Grid page generation (`src/generate-grids.mjs`)
-
-Grid, Tree Grid, Hierarchical Grid, and Pivot Grid share documentation via DocFX-style conditional templates:
-
-```
-@@if (igxName === 'IgxGrid') { ... }
-@@if (igxName === 'IgxTreeGrid') { ... }
-```
-
-`generateGridTopics()` runs before Astro starts, evaluates the `@@if` blocks and replaces `@@variable` placeholders for each grid variant, writing resolved files into `src/content/{lang}/grid/`, `treegrid/`, `hierarchicalgrid/`, and `pivotGrid/`.
-
-### 3. Environment token resolution
-
-The `remark-docfx` plugin (from `docs-template`) resolves `{environment:key}` tokens at render time using the values from `src/content/{lang}/environment.json` matching the current `NODE_ENV`.
-
-### 4. Image path normalization
-
-`normalizeImagePaths()` rewrites relative `../images/` paths to absolute `/images/` so Astro resolves them from `public/`.
-
-### 5. Navigation (`src/content/{lang}/toc.json`)
-
-The sidebar is driven by `toc.json`, consumed by the `docs-template` integration via `source.tocPath`.
-
-### 6. Site configuration (`astro.config.mjs`)
-
-```js
-createDocsSite({
- site: 'https://www.infragistics.com/products/ignite-ui-angular',
- platform: 'angular',
- navLang: docsLang,
- mode, // 'development' | 'staging' | 'production'
- source: {
- tocPath: `./src/content/${docsLang}/toc.json`,
- docsDir: `./src/content/${docsLang}`,
- },
-})
-```
-
----
-
-## Project structure
-
-```
-.
-├── .github/
-│ └── CONTRIBUTING.md Contribution guidelines
-├── public/
-│ └── images/ Static images referenced by docs
-├── scripts/
-│ └── sync-docfx.mjs Pull content from igniteui-docfx
-├── src/
-│ ├── content/
-│ │ ├── en/ English docs + toc.json + environment.json
-│ │ ├── jp/ Japanese docs + toc.json + environment.json
-│ │ └── kr/ Korean docs + toc.json + environment.json
-│ │ ├── grids_templates/ Shared @@if-templated source files
-│ │ ├── grid/ Generated IgxGrid pages
-│ │ ├── treegrid/ Generated IgxTreeGrid pages
-│ │ ├── hierarchicalgrid/ Generated IgxHierarchicalGrid pages
-│ │ ├── pivotGrid/ Generated IgxPivotGrid pages
-│ │ ├── toc.json Sidebar navigation
-│ │ └── environment.json Environment variables (dev/staging/prod)
-│ ├── content.config.ts Astro content collection schema
-│ ├── generate-grids.mjs Build-time grid page generator
-├── astro.config.mjs Main site config (grid gen, createDocsSite)
-└── package.json Build scripts for all lang/env combinations
-```
-
----
-
-## Migrated from igniteui-docfx
-
-This project replaces the DocFX + Gulp build pipeline with Astro + Starlight. Key changes:
-
-| DocFX | Astro |
-| :---- | :---- |
-| `gulp serve --lang en` | `npm run dev:en` |
-| `cross-env NODE_ENV=staging gulp build --lang jp` | `npm run build-staging:jp` |
-| `cross-env NODE_ENV=production gulp build --lang kr` | `npm run build-production:kr` |
-| DocFX `docfx.json` | `astro.config.mjs` + `createDocsSite()` |
-| `gulp-file-include` (@@if/@@var) | `src/generate-grids.mjs` |
-| `environment.json` per locale dir | `src/content/{lang}/environment.json` per locale |
-| DocFX template (`igniteui-docfx-template`) | `docs-template` Astro integration |
diff --git a/docs/angular/scripts/generate.mjs b/docs/angular/scripts/generate.mjs
index 6b6c2c1da7..522737e41b 100644
--- a/docs/angular/scripts/generate.mjs
+++ b/docs/angular/scripts/generate.mjs
@@ -1,6 +1,7 @@
import { writeFileSync, rmSync, existsSync } from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
+import { generateGridTopics } from '../src/scripts/generate-grids.mjs';
const args = process.argv.slice(2);
const get = (prefix) => args.find(a => a.startsWith(prefix))?.split('=')[1];
@@ -12,6 +13,11 @@ const ROOT = path.join(path.dirname(fileURLToPath(import.meta.url)), '..');
writeFileSync(path.join(ROOT, '.platform.json'), JSON.stringify({ platform: 'Angular', lang: LANG }, null, 2));
console.log(`[generate] lang: ${LANG}`);
+// Generate per-grid-variant MDX files from grids_templates/ so that
+// check-relative-links:ci can validate the generated pages without starting Astro.
+const docsDir = path.join(ROOT, 'src', 'content', LANG);
+generateGridTopics(path.join(docsDir, 'grids_templates'), path.join(docsDir, 'components'));
+
// Clear Astro's content cache so the next build picks up fresh content
const cache = path.join(ROOT, '.astro');
if (existsSync(cache)) {
diff --git a/docs/angular/src/content/en/.gitignore b/docs/angular/src/content/en/.gitignore
index bf43056a16..7aae44cd45 100644
--- a/docs/angular/src/content/en/.gitignore
+++ b/docs/angular/src/content/en/.gitignore
@@ -15,6 +15,8 @@ components/treegrid/*.md
components/treegrid/*.mdx
components/hierarchicalgrid/*.md
components/hierarchicalgrid/*.mdx
+components/pivotgrid/*.md
+components/pivotgrid/*.mdx
components/pivotGrid/*.md
components/pivotGrid/*.mdx
@@ -45,6 +47,12 @@ components/pivotGrid/*.mdx
!components/hierarchicalgrid/load-on-demand.mdx
# All pivot grid specific files that should NOT be ignored:
+!components/pivotgrid/pivot-grid.md
+!components/pivotgrid/pivot-grid-features.md
+!components/pivotgrid/pivot-grid-custom.md
+!components/pivotgrid/pivot-grid.mdx
+!components/pivotgrid/pivot-grid-features.mdx
+!components/pivotgrid/pivot-grid-custom.mdx
!components/pivotGrid/pivot-grid.md
!components/pivotGrid/pivot-grid-features.md
!components/pivotGrid/pivot-grid-custom.md
diff --git a/docs/angular/src/content/en/components/action-strip.mdx b/docs/angular/src/content/en/components/action-strip.mdx
index 7b4caadeb1..5fb9dc7627 100644
--- a/docs/angular/src/content/en/components/action-strip.mdx
+++ b/docs/angular/src/content/en/components/action-strip.mdx
@@ -163,7 +163,7 @@ When `IgxActionStripComponent` is a child component of the grid, hovering a row
-More information about how to use ActionStrip in the grid component could be found in the [Grid Row Actions documentation](/components/grid/row-actions.html).
+More information about how to use ActionStrip in the grid component could be found in the [Grid Row Actions documentation](./grid/row-actions.mdx).
## Styling
diff --git a/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx b/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx
index e31ab2b743..a42367b6f9 100644
--- a/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx
+++ b/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx
@@ -114,7 +114,7 @@ Agent Skills are structured, developer-owned packages that tell AI coding assist
Ignite UI ships dedicated Skill packages for Angular, React, Web Components, and Blazor. The Skill package is developer-owned: edit the `SKILL.md` to match your team's conventions, add project-specific patterns, reference your internal design system, and version the package alongside your codebase.
-For full setup instructions and IDE wiring, see [Agent Skills](skills.md).
+For full setup instructions and IDE wiring, see [Agent Skills](skills.mdx).
## CLI MCP Server
@@ -126,7 +126,7 @@ The CLI MCP server runs via `npx` without a global install:
npx -y igniteui-cli mcp
```
-Use `ai-config` to write the MCP configuration for your AI client automatically. The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see [CLI MCP](cli-mcp.md) for the full setup guide.
+Use `ai-config` to write the MCP configuration for your AI client automatically. The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see [CLI MCP](cli-mcp.mdx) for the full setup guide.
It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts.
@@ -142,7 +142,7 @@ npx -y igniteui-theming igniteui-theming-mcp
The Theming MCP server supports Angular, React, Web Components, and Blazor. It updates with every Ignite UI release so agents always work against the current token surface.
-For configuration details, see [Theming MCP](theming-mcp.md).
+For configuration details, see [Theming MCP](theming-mcp.mdx).
## Supported AI Clients
@@ -205,7 +205,7 @@ The Skill package ships with the library in `node_modules/igniteui-{framework}/s
Wire it to your IDE using the persistent setup for your client.
-See [Agent Skills](skills.md) for the complete setup.
+See [Agent Skills](skills.mdx) for the complete setup.
### Step 2 - Connect the CLI MCP Server
@@ -237,7 +237,7 @@ Add the `igniteui-cli` MCP server entry to the configuration file for your AI cl
}
```
-For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP-compatible clients, see [CLI MCP](cli-mcp.md).
+For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP-compatible clients, see [CLI MCP](cli-mcp.mdx).
### Step 3 - Connect the Theming MCP Server (optional)
@@ -269,13 +269,13 @@ Add the `igniteui-theming` entry to the same MCP configuration file, alongside `
}
```
-For configuration details and theming workflows, see [Theming MCP](theming-mcp.md).
+For configuration details and theming workflows, see [Theming MCP](theming-mcp.mdx).
## Additional Resources
-- [Agent Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [Agent Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/cli-mcp.mdx b/docs/angular/src/content/en/components/ai/cli-mcp.mdx
index 419983b0fa..3d783fa41c 100644
--- a/docs/angular/src/content/en/components/ai/cli-mcp.mdx
+++ b/docs/angular/src/content/en/components/ai/cli-mcp.mdx
@@ -18,7 +18,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
## Overview
-Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside [Ignite UI Theming MCP](./theming-mcp.md). CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.
+Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside [Ignite UI Theming MCP](./theming-mcp.mdx). CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.
The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and prompts you to choose which AI clients and agents to configure. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists.
@@ -425,9 +425,9 @@ Validate that the JSON uses the `mcpServers` structure and that each local serve
## Additional Resources
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [Ignite UI for Angular Skills](./skills.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [Ignite UI for Angular Skills](./skills.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/maker-framework.mdx b/docs/angular/src/content/en/components/ai/maker-framework.mdx
index 8661cf69f4..905ec51cd9 100644
--- a/docs/angular/src/content/en/components/ai/maker-framework.mdx
+++ b/docs/angular/src/content/en/components/ai/maker-framework.mdx
@@ -13,7 +13,7 @@ mentionedTypes: []
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. MAKER stands for Maximal Agentic decomposition, first-to-ahead-by-K Error correction, and Red-flagging. The framework is based on the research paper _Solving a million-step LLM task with zero errors_ by Cognizant AI Lab. It runs as an MCP server via `npx` from the `@igniteui` GitHub Packages registry and connects to any MCP-compatible AI client through STDIO transport. Once connected, the AI assistant can invoke three tools - `plan`, `execute`, and `plan_and_execute` - to run long-horizon tasks with automatic error detection and correction.
-The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.md). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry.
+The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.mdx). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry.
## How MAKER Works
@@ -221,10 +221,10 @@ The binary cache location can be overridden with the `MAKER_MCP_CACHE` environme
## Additional Resources
-- [AI-Assisted Development Overview](ai-assisted-development-overview.md)
-- [Agent Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development Overview](ai-assisted-development-overview.mdx)
+- [Agent Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/skills.mdx b/docs/angular/src/content/en/components/ai/skills.mdx
index 3a95886d6c..bd88a0c726 100644
--- a/docs/angular/src/content/en/components/ai/skills.mdx
+++ b/docs/angular/src/content/en/components/ai/skills.mdx
@@ -255,9 +255,9 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](/a
- Getting Started with Ignite UI for Angular
- Angular Schematics & Ignite UI CLI
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/theming-mcp.mdx b/docs/angular/src/content/en/components/ai/theming-mcp.mdx
index a187ea6508..a581c90664 100644
--- a/docs/angular/src/content/en/components/ai/theming-mcp.mdx
+++ b/docs/angular/src/content/en/components/ai/theming-mcp.mdx
@@ -349,19 +349,19 @@ Also confirm that `core()` is called before any other theming mixin in your `sty
## Additional Resources
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [Ignite UI for Angular Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [MAKER Framework](./maker-framework.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [Ignite UI for Angular Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [MAKER Framework](./maker-framework.mdx)
{/* Ideally these should be included once documentation is combined
-- [Theming Overview](../themes/index)
-- [Palettes](../themes/palettes)
-- [Typography](../themes/typography)
-- [Elevations](../themes/elevations)
-- [Spacing](../themes/spacing)
-- [Roundness](../themes/roundness)
-- [Theming with Sass](../themes/sass/index)
+- [Theming Overview](../themes/index.mdx)
+- [Palettes](../themes/palettes.mdx)
+- [Typography](../themes/typography.mdx)
+- [Elevations](../themes/elevations.mdx)
+- [Spacing](../themes/spacing.mdx)
+- [Roundness](../themes/roundness.mdx)
+- [Theming with Sass](../themes/sass/index.mdx)
*/}
diff --git a/docs/angular/src/content/en/components/banner.mdx b/docs/angular/src/content/en/components/banner.mdx
index 7ca75f5d91..91ccea7456 100644
--- a/docs/angular/src/content/en/components/banner.mdx
+++ b/docs/angular/src/content/en/components/banner.mdx
@@ -29,7 +29,7 @@ To get started with the Ignite UI for Angular Banner component, first you need t
ng add igniteui-angular
```
-For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
+For a complete introduction to the Ignite UI for Angular, read the [_getting started_](./general/getting-started.mdx) topic.
The next step is to import the `IgxBannerModule` in your **app.module.ts** file.
@@ -117,7 +117,7 @@ Configuring the message displayed in the banner is easy - just change the conten
### Adding an icon
-An [`igx-icon`](/icon) can be displayed in the banner by passing it to the banner's content. The icon will always be positioned at the beginning of the banner message.
+An [`igx-icon`](./icon.mdx) can be displayed in the banner by passing it to the banner's content. The icon will always be positioned at the beginning of the banner message.
If several `igx-icon` elements are inserted as direct descendants of the banner, the banner will try to position all of them at the beginning. It is strongly advised to pass only one `igx-icon` directly to the banner.
@@ -278,7 +278,7 @@ $custom-banner-theme: banner-theme(
```
-Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the
The last step is to pass the custom banner theme:
diff --git a/docs/angular/src/content/en/components/bullet-graph.mdx b/docs/angular/src/content/en/components/bullet-graph.mdx
index 9896a0cc00..e616b1d40e 100644
--- a/docs/angular/src/content/en/components/bullet-graph.mdx
+++ b/docs/angular/src/content/en/components/bullet-graph.mdx
@@ -323,5 +323,5 @@ For your convenience, all above code snippets are combined into one code block b
You can find more information about other types of gauges in these topics:
-- [Linear Gauge](Linear-gauge.md)
-- [Radial Gauge](radial-gauge.md)
+- [Linear Gauge](linear-gauge.mdx)
+- [Radial Gauge](radial-gauge.mdx)
diff --git a/docs/angular/src/content/en/components/charts/chart-api.mdx b/docs/angular/src/content/en/components/charts/chart-api.mdx
index fb694797a0..f833a7bfa1 100644
--- a/docs/angular/src/content/en/components/charts/chart-api.mdx
+++ b/docs/angular/src/content/en/components/charts/chart-api.mdx
@@ -34,7 +34,7 @@ The Angular
-
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
|
+| -
-
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
|
The Angular
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
- and [many more](types/stock-chart.md) |
+| -
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
- and [many more](types/stock-chart.mdx) |
| Radial Series | Polar Series |
|---------------|--------------|
@@ -116,5 +116,5 @@ The Angular
+For `BubbleSeries`, the `MarkerSize` property does not override the bubble radius, which is controlled by the radius data column and the `RadiusScale`. Bubble sizes remain entirely driven by the data and scale configuration.
+
+
+
+
+## Angular Chart Checkmark Marker Type
+
+The Ignite UI for Angular charts include a `Checkmark` option in the `MarkerType` enum. This marker renders a V-shaped checkmark icon inside a circle on data points in your chart.
+
+You can apply the `Checkmark` marker type to an individual series by setting its `MarkerType` property to `MarkerType.Checkmark`. To use the checkmark shape for all series in the chart simultaneously, set the chart's `MarkerAutomaticBehavior` property to `MarkerAutomaticBehavior.Checkmark`.
+
+The `SeriesViewer.CheckmarkMarkerTemplate` property defines the marker template used for series with a checkmark marker type, and can be used to customize its appearance across the chart.
+
+
+
## Angular Chart Marker Templates
In addition to marker properties, you can implement your own marker by setting a function to the
- [Donut Chart](../types/donut-chart.md)
- [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart) |
-| Line Charts | - [Category Line Chart](../types/line-chart.md#angular-line-chart-example)
- [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example)
- [Step Line Chart](../types/step-chart.md#angular-step-line-chart)
- [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart)
- [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart)
- [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*)
- [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart)
- [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart)
|
-| Area Charts | - [Category Area Chart](../types/area-chart.md#angular-area-chart-example)
- [Step Area Chart](../types/step-chart.md#angular-step-area-chart)
- [Range Area Chart](../types/area-chart.md#angular-range-area-chart)
- [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart)
- [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart)
- [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*)
- [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart)
- [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart)
|
-| Column Charts | - [Column Chart](../types/column-chart.md#angular-column-chart-example)
- [Bar Chart](../types/bar-chart.md#angular-bar-chart-example)
- [Waterfall Chart](../types/column-chart.md#angular-waterfall-chart)
- [Range Column Chart](../types/column-chart.md#angular-range-column-chart)
- [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart) |
-| Spline Charts | - [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example)
- [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart)
- [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart)
- [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart)
|
-| Point Charts | - [Category Point Chart](../types/point-chart.md)
- [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart)
|
-| Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.md)
- [Stock Chart in Column Mode](../types/stock-chart.md)
- [Stock Chart in Bar Mode](../types/stock-chart.md)
- [Stock Chart in Candle Mode](../types/stock-chart.md)
- [Stock Chart with Overlays](../types/stock-chart.md)
- [Stock Chart with Zoom Pane](../types/stock-chart.md)
- [Stock Chart with Volume Pane](../types/stock-chart.md#volume-pane)
- [Stock Chart with Indicator Pane](../types/stock-chart.md#indicator-pane)
|
-| Scatter Charts | - [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart)
- [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart)
- [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart)
- [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*)
- [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*)
|
-| Radial Charts | - [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart)
- [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart)
- [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart)
- [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart)
|
-| Polar Charts | - [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart)
- [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart)
- [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart)
- [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart)
- [Polar Spline Area Chart](../types/polar-chart.md#angular-polar-spline-area-chart)
|
-| Stacked Charts | - [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart)
- [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart)
- [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart)
- [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart)
|
-
-\* Note that the [Scatter Polygon Chart](../types/shape-chart.md) and [Scatter Polyline Chart](../types/shape-chart.md) have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see [Series Collection](#series-collection) section. Otherwise, other chart types are faster.
+| Pie Charts | - [Pie Chart](../types/pie-chart.mdx)
- [Donut Chart](../types/donut-chart.mdx)
- [Radial Pie Chart](../types/radial-chart.mdx#angular-radial-pie-chart) |
+| Line Charts | - [Category Line Chart](../types/line-chart.mdx#angular-line-chart-example)
- [Category Spline Chart](../types/spline-chart.mdx#angular-spline-chart-example)
- [Step Line Chart](../types/step-chart.mdx#angular-step-line-chart)
- [Radial Line Chart](../types/radial-chart.mdx#angular-radial-line-chart)
- [Polar Line Chart](../types/polar-chart.mdx#angular-polar-line-chart)
- [Scatter Line Chart](../types/scatter-chart.mdx#angular-scatter-line-chart)
- [Scatter Polyline Chart](../types/shape-chart.mdx#angular-scatter-polyline-chart) (\*)
- [Scatter Contour Chart](../types/scatter-chart.mdx#angular-scatter-contour-chart)
- [Stacked Line Chart](../types/stacked-chart.mdx#angular-stacked-line-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.mdx#angular-stacked-100-line-chart)
|
+| Area Charts | - [Category Area Chart](../types/area-chart.mdx#angular-area-chart-example)
- [Step Area Chart](../types/step-chart.mdx#angular-step-area-chart)
- [Range Area Chart](../types/area-chart.mdx#angular-range-area-chart)
- [Radial Area Chart](../types/radial-chart.mdx#angular-radial-area-chart)
- [Polar Area Chart](../types/polar-chart.mdx#angular-polar-area-chart)
- [Scatter Polygon Chart](../types/shape-chart.mdx#angular-scatter-polygon-chart) (\*)
- [Scatter Area Chart](../types/scatter-chart.mdx#angular-scatter-area-chart)
- [Stacked Area Chart](../types/stacked-chart.mdx#angular-stacked-area-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.mdx#angular-stacked-100-area-chart)
|
+| Column Charts | - [Column Chart](../types/column-chart.mdx#angular-column-chart-example)
- [Bar Chart](../types/bar-chart.mdx#angular-bar-chart-example)
- [Waterfall Chart](../types/column-chart.mdx#angular-waterfall-chart)
- [Range Column Chart](../types/column-chart.mdx#angular-range-column-chart)
- [Range Bar Chart](../types/bar-chart.mdx#angular-range-bar-chart)
- [Radial Column Chart](../types/radial-chart.mdx#angular-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.mdx#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.mdx#angular-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.mdx#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.mdx#angular-stacked-100-bar-chart) |
+| Spline Charts | - [Category Spline Chart](../types/spline-chart.mdx#angular-spline-chart-example)
- [Polar Spline Chart](../types/polar-chart.mdx#angular-polar-spline-chart)
- [Scatter Spline Chart](../types/scatter-chart.mdx#angular-scatter-spline-chart)
- [Stacked Spline Chart](../types/stacked-chart.mdx#angular-stacked-spline-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.mdx#angular-stacked-100-spline-chart)
|
+| Point Charts | - [Category Point Chart](../types/point-chart.mdx)
- [Scatter HD Chart](../types/scatter-chart.mdx#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.mdx#angular-scatter-marker-chart)
- [Scatter Bubble Chart](../types/bubble-chart.mdx)
- [Polar Marker Chart](../types/polar-chart.mdx#angular-polar-marker-chart)
|
+| Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.mdx)
- [Stock Chart in Column Mode](../types/stock-chart.mdx)
- [Stock Chart in Bar Mode](../types/stock-chart.mdx)
- [Stock Chart in Candle Mode](../types/stock-chart.mdx)
- [Stock Chart with Overlays](../types/stock-chart.mdx)
- [Stock Chart with Zoom Pane](../types/stock-chart.mdx)
- [Stock Chart with Volume Pane](../types/stock-chart.mdx#volume-pane)
- [Stock Chart with Indicator Pane](../types/stock-chart.mdx#indicator-pane)
|
+| Scatter Charts | - [Scatter HD Chart](../types/scatter-chart.mdx#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.mdx#angular-scatter-marker-chart)
- [Scatter Line Chart](../types/scatter-chart.mdx#angular-scatter-line-chart)
- [Scatter Bubble Chart](../types/bubble-chart.mdx)
- [Scatter Spline Chart](../types/scatter-chart.mdx#angular-scatter-spline-chart)
- [Scatter Area Chart](../types/scatter-chart.mdx#angular-scatter-area-chart)
- [Scatter Contour Chart](../types/scatter-chart.mdx#angular-scatter-contour-chart)
- [Scatter Polyline Chart](../types/shape-chart.mdx#angular-scatter-polyline-chart) (\*)
- [Scatter Polygon Chart](../types/shape-chart.mdx#angular-scatter-polygon-chart) (\*)
|
+| Radial Charts | - [Radial Line Chart](../types/radial-chart.mdx#angular-radial-line-chart)
- [Radial Area Chart](../types/radial-chart.mdx#angular-radial-area-chart)
- [Radial Pie Chart](../types/radial-chart.mdx#angular-radial-pie-chart)
- [Radial Column Chart](../types/radial-chart.mdx#angular-radial-column-chart)
|
+| Polar Charts | - [Polar Marker Chart](../types/polar-chart.mdx#angular-polar-marker-chart)
- [Polar Line Chart](../types/polar-chart.mdx#angular-polar-line-chart)
- [Polar Area Chart](../types/polar-chart.mdx#angular-polar-area-chart)
- [Polar Spline Chart](../types/polar-chart.mdx#angular-polar-spline-chart)
- [Polar Spline Area Chart](../types/polar-chart.mdx#angular-polar-spline-area-chart)
|
+| Stacked Charts | - [Stacked Line Chart](../types/stacked-chart.mdx#angular-stacked-line-chart)
- [Stacked Area Chart](../types/stacked-chart.mdx#angular-stacked-area-chart)
- [Stacked Column Chart](../types/stacked-chart.mdx#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.mdx#angular-stacked-bar-chart)
- [Stacked Spline Chart](../types/stacked-chart.mdx#angular-stacked-spline-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.mdx#angular-stacked-100-line-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.mdx#angular-stacked-100-area-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.mdx#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.mdx#angular-stacked-100-bar-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.mdx#angular-stacked-100-spline-chart)
|
+
+\* Note that the [Scatter Polygon Chart](../types/shape-chart.mdx) and [Scatter Polyline Chart](../types/shape-chart.mdx) have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see [Series Collection](#series-collection) section. Otherwise, other chart types are faster.
### Chart Animations
-Enabling [Chart Animations](chart-animations.md) will slightly delay final rendering series in the Angular charts while they play transition-in animations.
+Enabling [Chart Animations](chart-animations.mdx) will slightly delay final rendering series in the Angular charts while they play transition-in animations.
### Chart Annotations
-Enabling [Chart Annotations](chart-annotations.md) such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the Angular chart.
+Enabling [Chart Annotations](chart-annotations.mdx) such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the Angular chart.
### Chart Highlighting
-Enabling the [Chart Highlighting](chart-highlighting.md) will slightly decrease performance of the Angular chart.
+Enabling the [Chart Highlighting](chart-highlighting.mdx) will slightly decrease performance of the Angular chart.
### Chart Legend
@@ -124,7 +124,7 @@ Adding a legend to the Angular charts might decrease performance if titles of se
### Chart Markers
-In Angular charts, [Markers](chart-markers.md) are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart.
+In Angular charts, [Markers](chart-markers.mdx) are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart.
This code snippet shows how to remove markers from the Angular charts.
@@ -155,11 +155,11 @@ this.LineSeries.Resolution = 10;
### Chart Overlays
-Enabling [Chart Overlays](chart-overlays.md) will slightly decrease performance of the Angular chart.
+Enabling [Chart Overlays](chart-overlays.mdx) will slightly decrease performance of the Angular chart.
### Chart Trendlines
-Enabling [Chart Trendlines](chart-trendlines.md) will slightly decrease performance of the Angular chart.
+Enabling [Chart Trendlines](chart-trendlines.mdx) will slightly decrease performance of the Angular chart.
### Axis Types
@@ -315,7 +315,7 @@ In addition to the general performance guidelines, the Angular --framework=angular --type=igx-ts`), component scaffolding (`ig add`), a development server (`ig start`), and a built-in MCP server for AI assistant integration (`ig mcp`).
-For setup instructions and all available commands, see [Getting Started with Ignite UI CLI](./cli/getting-started-with-cli).
+For setup instructions and all available commands, see [Getting Started with Ignite UI CLI](./cli/getting-started-with-cli.mdx).
## Ignite UI for Angular Schematics
@@ -25,14 +25,14 @@ For setup instructions and all available commands, see [Getting Started with Ign
The Schematics collection provides the same core project templates and component views as the CLI, within the native Angular CLI workflow. It does not include the MCP server - for AI assistant integration, use the Ignite UI CLI alongside your Angular CLI project.
-For setup instructions see [Getting Started with Ignite UI for Angular Schematics](./cli/getting-started-with-angular-schematics).
+For setup instructions see [Getting Started with Ignite UI for Angular Schematics](./cli/getting-started-with-angular-schematics.mdx).
## Step-by-Step Guides
Both tools support a guided interactive mode and a direct command mode:
-- [Step-by-Step Guide Using Ignite UI CLI](./cli/step-by-step-guide-using-cli)
-- [Step-by-Step Guide Using Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics)
+- [Step-by-Step Guide Using Ignite UI CLI](./cli/step-by-step-guide-using-cli.mdx)
+- [Step-by-Step Guide Using Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.mdx)
## AI Assistant Integration (MCP)
@@ -44,4 +44,4 @@ Start the MCP server with:
ig mcp
```
-For client configuration (VS Code, Claude Desktop, Cursor) and a description of available tools, see [Ignite UI CLI MCP](../ai/cli-mcp).
+For client configuration (VS Code, Claude Desktop, Cursor) and a description of available tools, see [Ignite UI CLI MCP](../ai/cli-mcp.mdx).
diff --git a/docs/angular/src/content/en/components/general/cli/auth-template.mdx b/docs/angular/src/content/en/components/general/cli/auth-template.mdx
index 720b3fa748..60660b30af 100644
--- a/docs/angular/src/content/en/components/general/cli/auth-template.mdx
+++ b/docs/angular/src/content/en/components/general/cli/auth-template.mdx
@@ -38,7 +38,7 @@ Answering yes generates one of two authenticated variants:
ng g @igniteui/angular-schematics:c grid newGrid
Ignite UI CLI:
ig add grid newGridBasic template for IgxGrid. | [IgxGrid](../../grid/grid.md) component with auto generated columns |
-| grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing
Ignite UI CLI:
ig add grid-batch-editing newGridBatchEditingSample IgxGrid with batch editing. | [IgxGrid](../../grid/grid.md) that uses Transaction service for [batch editing](../../grid/batch-editing.md) |
-| custom-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-grid newCustomGrid
Ignite UI CLI:
ig add custom-grid newCustomGridIgxGrid with optional features like sorting, filtering, editing, etc. | [IgxGrid](../../grid/grid.md) with optional features like [Sorting](../../grid/sorting.md), [Filtering](../../grid/filtering.md), [Cell Editing](../../grid/editing.md), [Row Editing](../../grid/row-editing.md), [Group By](../../grid/groupby.md), [Resizing](../../grid/column-resizing.md), [Selection](../../grid/selection.md), [Paging](../../grid/paging.md), [Column Pinning](../../grid/column-pinning.md), [Column Moving](../../grid/column-moving.md), [Column Hiding](../../grid/column-hiding.md) |
-| grid-summaries | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries
Ignite UI CLI:
ig add grid-summaries newGridSummariesIgxGrid with summaries feature. | [IgxGrid](../../grid/grid.md) with [summaries](../../grid/summaries.md) feature. |
-| grid-multi-column-headers | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders
Ignite UI CLI:
ig add grid-multi-column-headers newGridMultiColumnHeadersIgxGrid with multiple header columns. | [IgxGrid](../../grid/grid.md) with [multi-column headers](../../grid/multi-column-headers.md) |
-| tree grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid
Ignite UI CLI:
ig add custom-tree-grid newCustomTreeGridIgxTreeGrid with optional features like sorting, filtering, row editing, etc. | [IgxTreeGrid](../../treegrid/tree-grid.md) with optional features like [Sorting](../../treegrid/sorting.md), [Filtering](../../treegrid/filtering.md), [Cell Editing](../../treegrid/editing.md), [Row Editing](../../treegrid/row-editing.md), [Resizing](../../treegrid/column-resizing.md), [Row Selection](../../treegrid/selection.md), [Paging](../../treegrid/paging.md), [Column Pinning](../../treegrid/column-pinning.md), [Column Moving](../../treegrid/column-moving.md), [Column Hiding](../../treegrid/column-hiding.md) |
-| hierarchical-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid newHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid newHierarchicalGridBasic IgxHierarchicalGrid. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) component with auto generated columns. |
-| hierarchical-grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-batch-editing newHierarchicalGridBatchEditing
Ignite UI CLI:
ig add hierarchical-grid-batch-editing newHierarchicalGridBatchEditingIgxHierarchicalGrid with batch editing. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) that uses Transaction service for [batch editing](../../hierarchicalgrid/batch-editing.md). |
-| hierarchical-grid-custom | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-custom newCustomHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid-custom newCustomHierarchicalGridIgxHierarchicalGrid with optional features like sorting, filtering, editing, etc. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) with optional features like [Sorting](../../hierarchicalgrid/sorting.md), [Filtering](../../hierarchicalgrid/filtering.md), [Row Editing](../../hierarchicalgrid/row-editing.md), [Selection](../../hierarchicalgrid/selection.md). |
-| hierarchical-grid-summaries | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-summaries newHierarchicalGridSummaries
Ignite UI CLI:
ig add hierarchical-grid-summaries newHierarchicalGridSummariesIgxHierarchicalGrid with summaries feature. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) with [summaries](../../hierarchicalgrid/summaries.md) feature. |
-| pivot-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c pivot-grid newPivotGrid
Ignite UI CLI:
ig add pivot-grid newPivotGridBasic IgxPivotGrid. | [IgxPivotGrid](../../pivotGrid/pivot-grid.md) component for multi-dimensional data analysis. |
-| tree | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tree newTree
Ignite UI CLI:
ig add tree newTreeIgxTree with selection and load-on-demand nodes. | [IgxTree](../../tree.md) with selection and load-on-demand node support. |
-| list | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c list newList
Ignite UI CLI:
ig add list newListBasic IgxList. | [IgxList](../../list.md) with search and filtering logic. |
-| combo | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c combo newCombo
Ignite UI CLI:
ig add combo newComboBasic IgxCombo with templating. | [IgxCombo](../../combo.md) with custom [templating](../../combo-templates.md). |
+| grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid newGrid
Ignite UI CLI:
ig add grid newGridBasic template for IgxGrid. | [IgxGrid](../../grid/grid.mdx) component with auto generated columns |
+| grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing
Ignite UI CLI:
ig add grid-batch-editing newGridBatchEditingSample IgxGrid with batch editing. | [IgxGrid](../../grid/grid.mdx) that uses Transaction service for [batch editing](../../grid/batch-editing.mdx) |
+| custom-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-grid newCustomGrid
Ignite UI CLI:
ig add custom-grid newCustomGridIgxGrid with optional features like sorting, filtering, editing, etc. | [IgxGrid](../../grid/grid.mdx) with optional features like [Sorting](../../grid/sorting.mdx), [Filtering](../../grid/filtering.mdx), [Cell Editing](../../grid/editing.mdx), [Row Editing](../../grid/row-editing.mdx), [Group By](../../grid/groupby.mdx), [Resizing](../../grid/column-resizing.mdx), [Selection](../../grid/selection.mdx), [Paging](../../grid/paging.mdx), [Column Pinning](../../grid/column-pinning.mdx), [Column Moving](../../grid/column-moving.mdx), [Column Hiding](../../grid/column-hiding.mdx) |
+| grid-summaries | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries
Ignite UI CLI:
ig add grid-summaries newGridSummariesIgxGrid with summaries feature. | [IgxGrid](../../grid/grid.mdx) with [summaries](../../grid/summaries.mdx) feature. |
+| grid-multi-column-headers | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders
Ignite UI CLI:
ig add grid-multi-column-headers newGridMultiColumnHeadersIgxGrid with multiple header columns. | [IgxGrid](../../grid/grid.mdx) with [multi-column headers](../../grid/multi-column-headers.mdx) |
+| tree grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid
Ignite UI CLI:
ig add custom-tree-grid newCustomTreeGridIgxTreeGrid with optional features like sorting, filtering, row editing, etc. | [IgxTreeGrid](../../treegrid/tree-grid.mdx) with optional features like [Sorting](../../treegrid/sorting.mdx), [Filtering](../../treegrid/filtering.mdx), [Cell Editing](../../treegrid/editing.mdx), [Row Editing](../../treegrid/row-editing.mdx), [Resizing](../../treegrid/column-resizing.mdx), [Row Selection](../../treegrid/selection.mdx), [Paging](../../treegrid/paging.mdx), [Column Pinning](../../treegrid/column-pinning.mdx), [Column Moving](../../treegrid/column-moving.mdx), [Column Hiding](../../treegrid/column-hiding.mdx) |
+| hierarchical-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid newHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid newHierarchicalGridBasic IgxHierarchicalGrid. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) component with auto generated columns. |
+| hierarchical-grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-batch-editing newHierarchicalGridBatchEditing
Ignite UI CLI:
ig add hierarchical-grid-batch-editing newHierarchicalGridBatchEditingIgxHierarchicalGrid with batch editing. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) that uses Transaction service for [batch editing](../../hierarchicalgrid/batch-editing.mdx). |
+| hierarchical-grid-custom | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-custom newCustomHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid-custom newCustomHierarchicalGridIgxHierarchicalGrid with optional features like sorting, filtering, editing, etc. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) with optional features like [Sorting](../../hierarchicalgrid/sorting.mdx), [Filtering](../../hierarchicalgrid/filtering.mdx), [Row Editing](../../hierarchicalgrid/row-editing.mdx), [Selection](../../hierarchicalgrid/selection.mdx). |
+| hierarchical-grid-summaries | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-summaries newHierarchicalGridSummaries
Ignite UI CLI:
ig add hierarchical-grid-summaries newHierarchicalGridSummariesIgxHierarchicalGrid with summaries feature. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) with [summaries](../../hierarchicalgrid/summaries.mdx) feature. |
+| pivot-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c pivot-grid newPivotGrid
Ignite UI CLI:
ig add pivot-grid newPivotGridBasic IgxPivotGrid. | [IgxPivotGrid](../../pivotgrid/pivot-grid.mdx) component for multi-dimensional data analysis. |
+| tree | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tree newTree
Ignite UI CLI:
ig add tree newTreeIgxTree with selection and load-on-demand nodes. | [IgxTree](../../tree.mdx) with selection and load-on-demand node support. |
+| list | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c list newList
Ignite UI CLI:
ig add list newListBasic IgxList. | [IgxList](../../list.mdx) with search and filtering logic. |
+| combo | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c combo newCombo
Ignite UI CLI:
ig add combo newComboBasic IgxCombo with templating. | [IgxCombo](../../combo.mdx) with custom [templating](../../combo-templates.mdx). |
| Charts | | |
-| category chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c category-chart newCategoryChart
Ignite UI CLI:
ig add category-chart newCategoryChartBasic category chart with chart type selector. | Basic [category chart](../../charts/types/column-chart.md) with chart type selector. |
-| financial chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
Ignite UI CLI:
ig add financial-chart newFinancialChartBasic financial chart with automatic toolbar and type selection. | Basic [financial chart](../../charts/types/stock-chart.md) with automatic toolbar and type selection. |
+| category chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c category-chart newCategoryChart
Ignite UI CLI:
ig add category-chart newCategoryChartBasic category chart with chart type selector. | Basic [category chart](../../charts/types/column-chart.mdx) with chart type selector. |
+| financial chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
Ignite UI CLI:
ig add financial-chart newFinancialChartBasic financial chart with automatic toolbar and type selection. | Basic [financial chart](../../charts/types/stock-chart.mdx) with automatic toolbar and type selection. |
| Gauges | | |
-| bullet graph | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph
Ignite UI CLI:
ig add bullet-graph newBulletGraphIgxBulletGraph with different animations. | [IgxBulletGraph](../../bullet-graph.md) with different animations. |
-| linear gauge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge
Ignite UI CLI:
ig add linear-gauge newLinearGaugeIgxLinearGauge with different animations. | [IgxLinearGauge](../../linear-gauge.md) with different animations. |
-| radial gauge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge
Ignite UI CLI:
ig add radial-gauge newRadialGaugeIgxRadialGauge with different animations. | [IgxRadialGauge](../../radial-gauge.md) with different animations. |
+| bullet graph | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph
Ignite UI CLI:
ig add bullet-graph newBulletGraphIgxBulletGraph with different animations. | [IgxBulletGraph](../../bullet-graph.mdx) with different animations. |
+| linear gauge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge
Ignite UI CLI:
ig add linear-gauge newLinearGaugeIgxLinearGauge with different animations. | [IgxLinearGauge](../../linear-gauge.mdx) with different animations. |
+| radial gauge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge
Ignite UI CLI:
ig add radial-gauge newRadialGaugeIgxRadialGauge with different animations. | [IgxRadialGauge](../../radial-gauge.mdx) with different animations. |
| Maps | | |
-| geographic-map | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c geographic-map newGeographicMap
Ignite UI CLI:
ig add geographic-map newGeographicMapBasic IgxGeographicMap. | [IgxGeographicMap](../../geo-map.md) displaying geo-spatial data on geographic imagery maps. |
+| geographic-map | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c geographic-map newGeographicMap
Ignite UI CLI:
ig add geographic-map newGeographicMapBasic IgxGeographicMap. | [IgxGeographicMap](../../geo-map.mdx) displaying geo-spatial data on geographic imagery maps. |
| Layouts | | |
-| dock-manager | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dock-manager newDockManager
Ignite UI CLI:
ig add dock-manager newDockManagerBasic IgcDockManager. | [IgcDockManager](../../dock-manager.md) with nine content slots. |
-| carousel | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c carousel newCarousel
Ignite UI CLI:
ig add carousel newCarouselBasic IgxCarousel. | [IgxCarousel](../../carousel.md) cycling through a series of images. |
-| tabs | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tabs newTabs
Ignite UI CLI:
ig add tabs newTabsBasic IgxTabs. | [IgxTabs](../../tabs.md) component that includes three customized tab-groups. |
-| bottom-nav | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
Ignite UI CLI:
ig add bottom-nav newBottomNavThree item bottom-nav template. | Three item bottom [navbar](../../navbar.md) template. |
-| accordion | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c accordion newAccordion
Ignite UI CLI:
ig add accordion newAccordionBasic IgxAccordion sample. | [IgxAccordion](../../accordion.md) with multiple collapsible panels in a single container. |
-| stepper | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c stepper newStepper
Ignite UI CLI:
ig add stepper newStepperBasic IgxStepper sample. | [IgxStepper](../../stepper.md) visualizing content as a process with successive steps. |
+| dock-manager | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dock-manager newDockManager
Ignite UI CLI:
ig add dock-manager newDockManagerBasic IgcDockManager. | [IgcDockManager](../../dock-manager.mdx) with nine content slots. |
+| carousel | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c carousel newCarousel
Ignite UI CLI:
ig add carousel newCarouselBasic IgxCarousel. | [IgxCarousel](../../carousel.mdx) cycling through a series of images. |
+| tabs | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tabs newTabs
Ignite UI CLI:
ig add tabs newTabsBasic IgxTabs. | [IgxTabs](../../tabs.mdx) component that includes three customized tab-groups. |
+| bottom-nav | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
Ignite UI CLI:
ig add bottom-nav newBottomNavThree item bottom-nav template. | Three item bottom [navbar](../../navbar.mdx) template. |
+| accordion | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c accordion newAccordion
Ignite UI CLI:
ig add accordion newAccordionBasic IgxAccordion sample. | [IgxAccordion](../../accordion.mdx) with multiple collapsible panels in a single container. |
+| stepper | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c stepper newStepper
Ignite UI CLI:
ig add stepper newStepperBasic IgxStepper sample. | [IgxStepper](../../stepper.mdx) visualizing content as a process with successive steps. |
| Data Entry & Display | | |
-| chip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c chip newChip
Ignite UI CLI:
ig add chip newChipBasic IgxChip. | [IgxChip](../../chip.md) components inside igx-chips-area. |
-| dropdown | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dropdown newDropDown
Ignite UI CLI:
ig add dropdown newDropDownBasic IgxDropDown. | Basic [IgxDropDown](../../drop-down.md) that displays a list of items. |
-| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select newSelect
Ignite UI CLI:
ig add select newSelectBasic IgxSelect. | Simple [IgxSelect](../../select.md) that displays a list of items. |
-| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-groups newGroupsSelect
Ignite UI CLI:
ig add select-groups newGroupsSelectSelect With Groups. | [IgxSelect](../../select.md) displaying grouped items. |
-| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-in-form newFormSelect
Ignite UI CLI:
ig add select-in-form newFormSelectIgxSelect in a form. | [IgxSelect](../../select.md) component usage in a form. |
-| input group | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c input-group newInputGroup
Ignite UI CLI:
ig add input-group newInputGroupBasic IgxInputGroup form view. | Form view created with [IgxInputGroup](../../input-group.md). |
-| autocomplete | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c autocomplete newAutocomplete
Ignite UI CLI:
ig add autocomplete newAutocompleteSimple IgxAutocomplete. | [IgxAutocomplete](../../autocomplete.md) enhancing text input with a dropdown of suggested options. |
-| enhanced-autocomplete | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c enhanced-autocomplete newEnhancedAutocomplete
Ignite UI CLI:
ig add enhanced-autocomplete newEnhancedAutocompleteIgxAutocomplete with enhanced groups. | [IgxAutocomplete](../../autocomplete.md) with grouped suggestion items. |
+| chip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c chip newChip
Ignite UI CLI:
ig add chip newChipBasic IgxChip. | [IgxChip](../../chip.mdx) components inside igx-chips-area. |
+| dropdown | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dropdown newDropDown
Ignite UI CLI:
ig add dropdown newDropDownBasic IgxDropDown. | Basic [IgxDropDown](../../drop-down.mdx) that displays a list of items. |
+| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select newSelect
Ignite UI CLI:
ig add select newSelectBasic IgxSelect. | Simple [IgxSelect](../../select.mdx) that displays a list of items. |
+| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-groups newGroupsSelect
Ignite UI CLI:
ig add select-groups newGroupsSelectSelect With Groups. | [IgxSelect](../../select.mdx) displaying grouped items. |
+| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-in-form newFormSelect
Ignite UI CLI:
ig add select-in-form newFormSelectIgxSelect in a form. | [IgxSelect](../../select.mdx) component usage in a form. |
+| input group | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c input-group newInputGroup
Ignite UI CLI:
ig add input-group newInputGroupBasic IgxInputGroup form view. | Form view created with [IgxInputGroup](../../input-group.mdx). |
+| autocomplete | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c autocomplete newAutocomplete
Ignite UI CLI:
ig add autocomplete newAutocompleteSimple IgxAutocomplete. | [IgxAutocomplete](../../autocomplete.mdx) enhancing text input with a dropdown of suggested options. |
+| enhanced-autocomplete | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c enhanced-autocomplete newEnhancedAutocomplete
Ignite UI CLI:
ig add enhanced-autocomplete newEnhancedAutocompleteIgxAutocomplete with enhanced groups. | [IgxAutocomplete](../../autocomplete.mdx) with grouped suggestion items. |
| Interactions | | |
-| dialog | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dialog newDialog
Ignite UI CLI:
ig add dialog newDialogBasic IgxDialog. | Sample of the [IgxDialog](../../dialog.md) used as a standard confirmation dialog. |
-| tooltip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tooltip newTooltip
Ignite UI CLI:
ig add tooltip newTooltipA fully customizable tooltip. | Basic tooltip created with the [IgxTooltip](../../tooltip.md). |
+| dialog | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dialog newDialog
Ignite UI CLI:
ig add dialog newDialogBasic IgxDialog. | Sample of the [IgxDialog](../../dialog.mdx) used as a standard confirmation dialog. |
+| tooltip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tooltip newTooltip
Ignite UI CLI:
ig add tooltip newTooltipA fully customizable tooltip. | Basic tooltip created with the [IgxTooltip](../../tooltip.mdx). |
| Scheduling | | |
-| date-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c date-picker newDatePicker
Ignite UI CLI:
ig add date-picker newDatePickerBasic IgxDatePicker. | Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. |
-| time-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c time-picker newTimePicker
Ignite UI CLI:
ig add time-picker newTimePickerBasic IgxTimePicker. | Basic [IgxTimePicker](../../time-picker.md) with initial value set and one-way data binding. |
-| calendar | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c calendar newCalendar
Ignite UI CLI:
ig add calendar newCalendarIgxCalendar with single selection. | Basic [IgxCalendar](../../calendar.md) with single selection. |
+| date-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c date-picker newDatePicker
Ignite UI CLI:
ig add date-picker newDatePickerBasic IgxDatePicker. | Basic [IgxDatePicker](../../date-picker.mdx) with one-way data binding. |
+| time-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c time-picker newTimePicker
Ignite UI CLI:
ig add time-picker newTimePickerBasic IgxTimePicker. | Basic [IgxTimePicker](../../time-picker.mdx) with initial value set and one-way data binding. |
+| calendar | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c calendar newCalendar
Ignite UI CLI:
ig add calendar newCalendarIgxCalendar with single selection. | Basic [IgxCalendar](../../calendar.mdx) with single selection. |
## Scenario Templates
diff --git a/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx b/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
index a35ea5f552..d66cb6623a 100644
--- a/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
+++ b/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
@@ -13,7 +13,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
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. It integrates into the native Angular CLI workflow - use it with `ng new` for project creation and `ng g` for component scaffolding, without installing a separate global tool. The collection is distributed as the `@igniteui/angular-schematics` package and is added automatically when you run `ng add igniteui-angular` on an existing Angular project.
-The Schematics collection does not run an MCP server - the MCP server process is provided by the Ignite UI CLI and starts via `npx -y igniteui-cli mcp`, where `-y` avoids the interactive `npx` confirmation prompt. The `ai-config` schematic configures the MCP client connection and copies Agent Skills without requiring a separate CLI install. The collection is specific to Angular; React, Web Components, and Blazor equivalents are covered in their respective framework documentation. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](../getting-started).
+The Schematics collection does not run an MCP server - the MCP server process is provided by the Ignite UI CLI and starts via `npx -y igniteui-cli mcp`, where `-y` avoids the interactive `npx` confirmation prompt. The `ai-config` schematic configures the MCP client connection and copies Agent Skills without requiring a separate CLI install. The collection is specific to Angular; React, Web Components, and Blazor equivalents are covered in their respective framework documentation. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](../getting-started.mdx).
## Install the Schematics Collection
@@ -49,7 +49,7 @@ The guided wizard is the recommended starting point for new projects. Activate i
ng new --collection="@igniteui/angular-schematics"
```
-For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics).
+For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](./step-by-step-guide-using-angular-schematics.mdx).
### Create a project directly
@@ -77,8 +77,8 @@ When using the interactive wizard, selecting `side-nav` or `side-nav-mini` trigg
| Template ID | Description |
| :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| side-nav-auth | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. |
-| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. |
+| side-nav-auth | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](./auth-template.mdx) for details. |
+| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](./auth-template.mdx) for details. |
The following arguments are available when creating a project:
@@ -144,13 +144,13 @@ The following arguments are available when creating a project:
## Add a Component Template
-To add an [available Ignite UI for Angular template](component-templates) to an existing project, use `ng generate` with the Ignite UI for Angular collection and the `component` schematic, providing the template ID and a name for the new component:
+To add an [available Ignite UI for Angular template](./component-templates.mdx) to an existing project, use `ng generate` with the Ignite UI for Angular collection and the `component` schematic, providing the template ID and a name for the new component:
```cmd
ng g @igniteui/angular-schematics:component grid newGrid
```
-Template addition is supported in projects created with the Angular Schematics, Ignite UI CLI, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics#add-component-views).
+Template addition is supported in projects created with the Angular Schematics, Ignite UI CLI, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](./step-by-step-guide-using-angular-schematics.mdx#add-component-views).
The following arguments are available when adding a template:
@@ -324,4 +324,4 @@ ig ai-config
The `ig ai-config` command configures only the two Ignite UI entries, `igniteui-cli` and `igniteui-theming`, and does not register `angular-cli`. Use `ng generate @igniteui/angular-schematics:ai-config` to get all three servers configured in a single step.
-For full setup instructions across all AI clients and Agent Skills wiring, see [Ignite UI CLI MCP](../../ai/cli-mcp).
\ No newline at end of file
+For full setup instructions across all AI clients and Agent Skills wiring, see [Ignite UI CLI MCP](../../ai/cli-mcp.mdx).
\ No newline at end of file
diff --git a/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx b/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx
index 85b4cddccb..4622a41b52 100644
--- a/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx
+++ b/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx
@@ -66,7 +66,7 @@ ig new
` (`####`).
-Note: when `` (`####`) is used the title wont appear on the submenu on the right.
-
-# Writing a Styling section for article
-
-The main purpose of the Styling section is to provide simple examples on how to style most common parts of the UI (lets say styling for alternate rows in the grid), copy/paste the code in any sample and see it working. In order to write content that fullfills the purpose, follow the steps below:
-
-### 1. Give the content an `` Section header, so that it appears on the submenu on the right.
-### 2. Start the content with the example of adding the theming index file.
-### 3. Provide the simplest styling example, which is to extend the default theme for the corresponding feature/component. For example, when styling the paginator UI, the `igx-grid-paginator-theme` needs to be extended:
-
-```scss
-$dark-grid-paginator: grid-paginator-theme(
- $text-color: #F4D45C,
- $background-color: #575757,
- $border-color: #292826
-);
-```
-
-### 4. If other elements in the feature UI are styled by another theme, add example for that theme too. For example - the buttons in the paginator UI require that a new theme for buttons is created.
-### 5. If a theme provides a ton of parameters for styling, choose those that you decide would be the most common. You may state in one sentence what each property controls, and provide a link to the theme under the SASS API.
-### 6. Provide the last step, which is to include the component mixin, along with two notes – the first one for scoping any mixin if needed, and the second note about penetrating the `ViewEncapsulation`, along with example on how to overcome the encapsulation.
-### 7. Add an iframe with an example, along with a Stackblitz button
-### 8. Examples on styling with `igx-color`, `palettes` and `schemas` are not necessary, but you may add a link to Theming engine topics as they are quite detailed.
-### 9. When adding a section for a certain grid feature, add it for the igxHierachicalGrid and igxTreeGrid as well.
-
-
-# Workflow
-
-When working on an issue for the Ignite UI for Angular DocFX Site Builder, you need to be aware of and to follow a correct status workflow. We have created a number of status labels in order to communicate well what the current status of a single issue/pull request is. The statuses are as follows:
-
-## Development - applicable to issues and pull requests
-1. `status: in-review` this is the initial status of an issue. If the label is not placed, go ahead and place it.
-2. `status: in-development` this is the status once you start working on an issue. Assign the issue to yourself if it hasn't been assigned already and remove the previous status and assign it an in development status.
-3. `status: by-design` this is the status of an issue that has been reviewed and has been determined that the current design of the feature is such that the issue describes the correct behavior as incorrect. Remove other statuses and place this status if you've reviewed the issue.
-4. `status: third-party-issue` this is the status of an issue that has been reviewed, has been determined to be an issue, but the root case is not in the Ignite UI for Angular code. Example would be browser specific bugs caused by the particular browser's rendering or JavaScript engines, or an issue with the Angular framework. Remove other statuses and place only this one if you're the one performing the investigation.
-5. `status: not-to-fix` this is the status of issues that derive from our code, but have been decided to leave as is. This is done when fixes require general design and/or architecture changes and are very risky.
-6. `status: already-fixed` this status indicates that the issue is already fixed in the source code. When setting this status assign the person that logged the issue so that he can verify the issue is fixed in the respective development branch. Remove other statuses and place this status if you've reviewed the issue.
-7. `status: cannot-reproduce` this status indicates that you cannot reproduce the issue in the source code. A reason may be because the issue is already fixed. When setting this status assign the person that logged the issue so that he can respond with more details on how to reproduce it.
-8. `status: not a bug` this is the status of an issue that you reviewed and concluded that it's not a bug. You should comment explaining the reasons why you think the issue is not a bug.
-9. `status: resolved` this is the status of an issue that has been fixed and there are active pull requests related to it.
-
-Example status workflows:
-
-`status: in-review` => `status: in-development` => `status: resolved` (PR is created)
-
-`status: in-review` => `status: by-design` (Issue can be closed)
-
-`status: in-review` => `status: third-party-issue` (Issue can be closed)
-
-`status: in-review` => `status: not-to-fix` (Issue can be closed)
-
-> Note: In most cases the development will be related to new topics creation or updating of existing one. Keep in mind that **for each newly added topic the toc.json should be updated with a reference to the new topic**. It is recommended `Additional references` section to be added at the end of each topic.
-
-## Testing - applicable to pull requests
-1. `status: awaiting-test` this is the initial status of pull requests. If you're performing the pull request, please place this status on it. Pull requests are accepted if and only if all status checks pass, review is performed, and the pull request has been tested and contains `status: verified`.
-2. `status: in-test` place this status once you pick up the pull request for testing.
-3. `status: verified` place this status once you've tested the pull request, have verified that the issue is fixed, and have included all necessary automated tests for the issue.
-4. `status: not-fixed` place this status once you've tested the pull request and you are still able to reproduce the issue it's attempting to fix. Then assign the developer back on the pull request.
-
-Example status workflows:
-
-`status: awaiting-test` => `status: in-test` => `status: verified` (PR can be merged if all prerequisites are met)
-
-`status: awaiting-test` => `status: in-test` => `status: not-fixed` => `status: in-development` => `status: awaiting-test`
-
-> Note: When you are assigned to test a PR related to new topic creation or updating an existing one:
-1. Check the build result.
-2. Be sure that `Writing an article` guidance is respected.
-3. Check whether the embed sample is working.
-4. Code views are working as well
-5. Each hyperlink is working properly.
-6. Table of content is correct.
-
-> Note: Testing a PR from Angular Samples (when new sample is added) with combination of PR related to topic update (or when new topic is added).
-Open both repositories and perform `npm start`. This will start both projects and you will see the embed sample in your topic under `localhost`.
-
-## Localization - applicable to issues and pull requests
-Ensure that whenever a change is made to the text content the appropriate status is set:
-1. `status: pending-localization` this status tells that there are changes in the localization strings that need to be translated. When you make such changes, put this status badge without removing the other applicable ones and assign a person to do the translations.
-
-> Note: This status should be set only when the PR is approved. This will indicate that no further changes will be applied.
-2. `status: localized` this status is for issues that were with a pending translation status and have already been localized. Place this status label once these translation changes have been included in the current pull request, or the changes are already pulled with a different pull request.
-
-> Note: Keep in mind that when you submit a change in the EN .md files, you don't need to make the same change in the JP/KR versions. This task will be handled by the Localization team.
-
-
-## Fixing a bug
-
-1. Depending on where the bug/change/feature was found/is planned `the current version` or the `ongoing release version`, checkout a development branches from `vnext` or/and `master` branch. `vnext` is the version that is going to be used upon release (next version), and `master` is the branch with the current state (current version available on production). If the change/fix is applicable only to the ongoing release branch (`vnext`) there is no need to cherry-pick to `master` branch as the change/fix/feature will be pushed to `master` branch upon release.
-2. Run lint
-4. Pull request your changes and reference the issue. Use the enforced commit message format with applicable type, scope, etc.
-5. Don't forget to make the necessary status updates, as described in the workflow section.
-
-> Note: Cherry-pick to `master` branch only changes with **high priority**. There is no need to cherry-pick into `master` every bug fix/change from `vnext`> A regular mass merge PRs are going to be made from `vnext` into `master`.
-
-**Example workflow for a bug with high priority**
-The process will look like this:
-
-1. Checkout new branch from `vnext`. For code example purposes let's say the new branch is called `fixing-bug-5423-vnext`.
-2. Commit your changes to your `fixing-bug-5423-vnext` branch.
-3. Push and PR to the `vnext` branch.
-4. Switch to the `master` branch.
-5. Create a new branch from `master`. For code example purposes let's say the new branch is called `fixing-bug-5423-master`.
-6. Cherry pick your commit from the `fixing-bug-5423-vnext` branch: `git cherry-pick fixing-bug-5423-master`
-7. Push to your `fixing-bug-5423-master` branch and PR to the `master` branch.
-
-# Environment variables
-The environment variables are a syntactic sugar for pointing out the location of the resources used in a topic.
-These variables are defined in the [**environment.json**](https://github.com/IgniteUI/igniteui-docfx/blob/master/en/environment.json) file of a docfx project. Each environment variable is replaced with its corresponding value during build time.
-
-# Code View Configuration
-
-If you want to add a sample and introduce the code behind this sample to the readers, you have to add a ```
-
-```
-
-Here is a brief explanation of how the code view element works. For each sample (grid-sample-1) a .json file is created (grid--grid-sample-1.json). Each .json file contains the source code of the sample.
-All of the `.json` files are located under `/assets/samples` of [igniteui-angular-samples](https://github.com/IgniteUI/igniteui-angular-samples/) project.
-
-> Note: Samples without a respective .json file are still rendered in the code view, but the code tabs and the footer will be omitted.
-
-# Add/Change environment variables
-Our samples are embedded in the topics with iframes. Some topics have more than one sample and in order to prevent loading delays, we've added lazy loading functionality of [the iframes](https://github.com/IgniteUI/igniteui-docfx-template/issues/75). In order to achieve this we use [lazysizes](https://www.npmjs.com/package/lazysizes#recommendedpossible-markup-patterns) library.
-
-Follow the steps below for lazy loading implementation in a topic ([PR example](https://github.com/IgniteUI/igniteui-docfx/pull/1001/files#diff-52bafd164f6207a20517090ad21d7a6aR13)):
-1. Generally the first sample should not be lazily loaded. Add `loading` class to the sample container and: `onload="onSampleIframeContentLoaded(this);` on the `iframe`.
-2. For all of the sample you'd like to load lazily, add
-- `loading` class to the sample container
-- `lazyload` class to the `iframe`
-- rename the `src` of the iframe to `data-src`
-- you shouldn't have `onload="onSampleIframeContentLoaded(this);"`
-
-# Creating shared help topics
-[Here](https://github.com/IgniteUI/igniteui-docfx/wiki/Creating-Shared-Help-Topics) you can find the document which describes how to create a shared topic (template) which is used to produce separate topics for a particular features. For example shared templates for IgxGrid, IgxTreeGrid and/or IgxHierarchicalGrid components.
-
-# Updating of Data Visualization related topics
-Our cross platform docs are in `internal repo`.
-
-If you need to update the cross platform docs, please do so from the [`igniteui-xplat-doc`](https://github.com/IgniteUI/igniteui-xplat-docs) repo, queue an Angular build from `AngularDocFX_EN` build definition in the `igniteui-xplat-doc` repository, and then approve the PR that will come into public repo from ESShared.
-
-# Adding of images in the topic
-When there is a need to add image (png, jpeg and etc.) to a topic use the following guidance:
-- add `b-lazy` and `responsive-img` classes - these are responsible for the lazy loading and part of the image responsiveness
-- always add the image as part of the `images` folder.
-- define `data-srcset` with 480w, 768w and 1100w
-- set `alt` and `title` attributes
-
-
-Example:
-
-```html
-
-
-```
\ No newline at end of file
diff --git a/docs/angular/README.md b/docs/angular/README.md
deleted file mode 100644
index fa1501b140..0000000000
--- a/docs/angular/README.md
+++ /dev/null
@@ -1,198 +0,0 @@
-# Ignite UI for Angular Docs (Astro + Starlight)
-
-The Astro-based migration of the [igniteui-docfx](https://github.com/IgniteUI/igniteui-docfx) documentation site for Ignite UI for Angular. Built with [Astro Starlight](https://starlight.astro.build) and the internal `docs-template` integration.
-
----
-
-## Prerequisites
-
-- **Node.js** 18 or later
-- **docs-template** package at `C:/Repos/docs/docs-template`
- (referenced as a `file:` dependency in `package.json`)
-
----
-
-## Getting started
-
-```bash
-npm install
-npm run dev # English, development env → http://localhost:4321
-```
-
----
-
-## Build commands
-
-The build depends on two environment variables:
-
-| Variable | Values | Default |
-| :---------- | :---------------------------------------- | :------------ |
-| `NODE_ENV` | `development`, `staging`, `production` | `development` |
-| `DOCS_LANG` | `en`, `jp`, `kr` | `en` |
-
-All combinations are available as npm scripts:
-
-### Development server
-
-```bash
-npm run dev # English (default)
-npm run dev:en # English (explicit)
-npm run dev:jp # Japanese
-npm run dev:kr # Korean
-```
-
-### Build (development URLs)
-
-```bash
-npm run build # English (default)
-npm run build:en # English (explicit)
-npm run build:jp # Japanese
-npm run build:kr # Korean
-```
-
-### Build for staging
-
-```bash
-npm run build-staging # English (default)
-npm run build-staging:en # English (explicit)
-npm run build-staging:jp # Japanese
-npm run build-staging:kr # Korean
-```
-
-### Build for production
-
-```bash
-npm run build-production # English (default)
-npm run build-production:en # English (explicit)
-npm run build-production:jp # Japanese
-npm run build-production:kr # Korean
-```
-
-### Preview
-
-```bash
-npm run preview # serve the last build locally
-```
-
----
-
-## Environment variables
-
-Documentation uses `{environment:variableName}` tokens inside markdown that are resolved **at build time**.
-
-All variable values are defined in each language's `environment.json` (e.g. `src/content/en/environment.json`), keyed by `NODE_ENV` (`development`, `staging`, `production`).
-
-At startup, `astro.config.mjs` reads `NODE_ENV` and `DOCS_LANG`. The `remark-docfx` plugin (from `docs-template`) resolves every `{environment:key}` token at render time using the matching variable set from `environment.json`.
-
-Key variables:
-
-| Token | Description |
-| :---- | :---------- |
-| `{environment:demosBaseUrl}` | Base URL for Angular sample iframes |
-| `{environment:dvDemosBaseUrl}` | Data Visualization samples base URL |
-| `{environment:lobDemosBaseUrl}` | LOB samples base URL |
-| `{environment:angularApiUrl}` | TypeScript API docs base URL |
-| `{environment:sassApiUrl}` | SASS API docs base URL |
-| `{environment:infragisticsBaseUrl}` | Main Infragistics site base URL |
-
-You can also set these via a `.env` file at the project root:
-
-```
-NODE_ENV=development
-DOCS_LANG=en
-```
-
----
-
-## How it works
-
-### 1. Content source
-
-Markdown files live in `src/content/{lang}/` (e.g. `src/content/en/`). They are either:
-
-- **Flat docs** — individual `.md` files (e.g. `accordion.md`, `calendar.md`).
-- **Grid template pages** — shared templates in `src/content/{lang}/grids_templates/` expanded at build time into per-variant pages.
-
-### 2. Grid page generation (`src/generate-grids.mjs`)
-
-Grid, Tree Grid, Hierarchical Grid, and Pivot Grid share documentation via DocFX-style conditional templates:
-
-```
-@@if (igxName === 'IgxGrid') { ... }
-@@if (igxName === 'IgxTreeGrid') { ... }
-```
-
-`generateGridTopics()` runs before Astro starts, evaluates the `@@if` blocks and replaces `@@variable` placeholders for each grid variant, writing resolved files into `src/content/{lang}/grid/`, `treegrid/`, `hierarchicalgrid/`, and `pivotGrid/`.
-
-### 3. Environment token resolution
-
-The `remark-docfx` plugin (from `docs-template`) resolves `{environment:key}` tokens at render time using the values from `src/content/{lang}/environment.json` matching the current `NODE_ENV`.
-
-### 4. Image path normalization
-
-`normalizeImagePaths()` rewrites relative `../images/` paths to absolute `/images/` so Astro resolves them from `public/`.
-
-### 5. Navigation (`src/content/{lang}/toc.json`)
-
-The sidebar is driven by `toc.json`, consumed by the `docs-template` integration via `source.tocPath`.
-
-### 6. Site configuration (`astro.config.mjs`)
-
-```js
-createDocsSite({
- site: 'https://www.infragistics.com/products/ignite-ui-angular',
- platform: 'angular',
- navLang: docsLang,
- mode, // 'development' | 'staging' | 'production'
- source: {
- tocPath: `./src/content/${docsLang}/toc.json`,
- docsDir: `./src/content/${docsLang}`,
- },
-})
-```
-
----
-
-## Project structure
-
-```
-.
-├── .github/
-│ └── CONTRIBUTING.md Contribution guidelines
-├── public/
-│ └── images/ Static images referenced by docs
-├── scripts/
-│ └── sync-docfx.mjs Pull content from igniteui-docfx
-├── src/
-│ ├── content/
-│ │ ├── en/ English docs + toc.json + environment.json
-│ │ ├── jp/ Japanese docs + toc.json + environment.json
-│ │ └── kr/ Korean docs + toc.json + environment.json
-│ │ ├── grids_templates/ Shared @@if-templated source files
-│ │ ├── grid/ Generated IgxGrid pages
-│ │ ├── treegrid/ Generated IgxTreeGrid pages
-│ │ ├── hierarchicalgrid/ Generated IgxHierarchicalGrid pages
-│ │ ├── pivotGrid/ Generated IgxPivotGrid pages
-│ │ ├── toc.json Sidebar navigation
-│ │ └── environment.json Environment variables (dev/staging/prod)
-│ ├── content.config.ts Astro content collection schema
-│ ├── generate-grids.mjs Build-time grid page generator
-├── astro.config.mjs Main site config (grid gen, createDocsSite)
-└── package.json Build scripts for all lang/env combinations
-```
-
----
-
-## Migrated from igniteui-docfx
-
-This project replaces the DocFX + Gulp build pipeline with Astro + Starlight. Key changes:
-
-| DocFX | Astro |
-| :---- | :---- |
-| `gulp serve --lang en` | `npm run dev:en` |
-| `cross-env NODE_ENV=staging gulp build --lang jp` | `npm run build-staging:jp` |
-| `cross-env NODE_ENV=production gulp build --lang kr` | `npm run build-production:kr` |
-| DocFX `docfx.json` | `astro.config.mjs` + `createDocsSite()` |
-| `gulp-file-include` (@@if/@@var) | `src/generate-grids.mjs` |
-| `environment.json` per locale dir | `src/content/{lang}/environment.json` per locale |
-| DocFX template (`igniteui-docfx-template`) | `docs-template` Astro integration |
diff --git a/docs/angular/scripts/generate.mjs b/docs/angular/scripts/generate.mjs
index 6b6c2c1da7..522737e41b 100644
--- a/docs/angular/scripts/generate.mjs
+++ b/docs/angular/scripts/generate.mjs
@@ -1,6 +1,7 @@
import { writeFileSync, rmSync, existsSync } from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
+import { generateGridTopics } from '../src/scripts/generate-grids.mjs';
const args = process.argv.slice(2);
const get = (prefix) => args.find(a => a.startsWith(prefix))?.split('=')[1];
@@ -12,6 +13,11 @@ const ROOT = path.join(path.dirname(fileURLToPath(import.meta.url)), '..');
writeFileSync(path.join(ROOT, '.platform.json'), JSON.stringify({ platform: 'Angular', lang: LANG }, null, 2));
console.log(`[generate] lang: ${LANG}`);
+// Generate per-grid-variant MDX files from grids_templates/ so that
+// check-relative-links:ci can validate the generated pages without starting Astro.
+const docsDir = path.join(ROOT, 'src', 'content', LANG);
+generateGridTopics(path.join(docsDir, 'grids_templates'), path.join(docsDir, 'components'));
+
// Clear Astro's content cache so the next build picks up fresh content
const cache = path.join(ROOT, '.astro');
if (existsSync(cache)) {
diff --git a/docs/angular/src/content/en/.gitignore b/docs/angular/src/content/en/.gitignore
index bf43056a16..7aae44cd45 100644
--- a/docs/angular/src/content/en/.gitignore
+++ b/docs/angular/src/content/en/.gitignore
@@ -15,6 +15,8 @@ components/treegrid/*.md
components/treegrid/*.mdx
components/hierarchicalgrid/*.md
components/hierarchicalgrid/*.mdx
+components/pivotgrid/*.md
+components/pivotgrid/*.mdx
components/pivotGrid/*.md
components/pivotGrid/*.mdx
@@ -45,6 +47,12 @@ components/pivotGrid/*.mdx
!components/hierarchicalgrid/load-on-demand.mdx
# All pivot grid specific files that should NOT be ignored:
+!components/pivotgrid/pivot-grid.md
+!components/pivotgrid/pivot-grid-features.md
+!components/pivotgrid/pivot-grid-custom.md
+!components/pivotgrid/pivot-grid.mdx
+!components/pivotgrid/pivot-grid-features.mdx
+!components/pivotgrid/pivot-grid-custom.mdx
!components/pivotGrid/pivot-grid.md
!components/pivotGrid/pivot-grid-features.md
!components/pivotGrid/pivot-grid-custom.md
diff --git a/docs/angular/src/content/en/components/action-strip.mdx b/docs/angular/src/content/en/components/action-strip.mdx
index 7b4caadeb1..5fb9dc7627 100644
--- a/docs/angular/src/content/en/components/action-strip.mdx
+++ b/docs/angular/src/content/en/components/action-strip.mdx
@@ -163,7 +163,7 @@ When `IgxActionStripComponent` is a child component of the grid, hovering a row
-More information about how to use ActionStrip in the grid component could be found in the [Grid Row Actions documentation](/components/grid/row-actions.html).
+More information about how to use ActionStrip in the grid component could be found in the [Grid Row Actions documentation](./grid/row-actions.mdx).
## Styling
diff --git a/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx b/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx
index e31ab2b743..a42367b6f9 100644
--- a/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx
+++ b/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx
@@ -114,7 +114,7 @@ Agent Skills are structured, developer-owned packages that tell AI coding assist
Ignite UI ships dedicated Skill packages for Angular, React, Web Components, and Blazor. The Skill package is developer-owned: edit the `SKILL.md` to match your team's conventions, add project-specific patterns, reference your internal design system, and version the package alongside your codebase.
-For full setup instructions and IDE wiring, see [Agent Skills](skills.md).
+For full setup instructions and IDE wiring, see [Agent Skills](skills.mdx).
## CLI MCP Server
@@ -126,7 +126,7 @@ The CLI MCP server runs via `npx` without a global install:
npx -y igniteui-cli mcp
```
-Use `ai-config` to write the MCP configuration for your AI client automatically. The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see [CLI MCP](cli-mcp.md) for the full setup guide.
+Use `ai-config` to write the MCP configuration for your AI client automatically. The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see [CLI MCP](cli-mcp.mdx) for the full setup guide.
It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts.
@@ -142,7 +142,7 @@ npx -y igniteui-theming igniteui-theming-mcp
The Theming MCP server supports Angular, React, Web Components, and Blazor. It updates with every Ignite UI release so agents always work against the current token surface.
-For configuration details, see [Theming MCP](theming-mcp.md).
+For configuration details, see [Theming MCP](theming-mcp.mdx).
## Supported AI Clients
@@ -205,7 +205,7 @@ The Skill package ships with the library in `node_modules/igniteui-{framework}/s
Wire it to your IDE using the persistent setup for your client.
-See [Agent Skills](skills.md) for the complete setup.
+See [Agent Skills](skills.mdx) for the complete setup.
### Step 2 - Connect the CLI MCP Server
@@ -237,7 +237,7 @@ Add the `igniteui-cli` MCP server entry to the configuration file for your AI cl
}
```
-For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP-compatible clients, see [CLI MCP](cli-mcp.md).
+For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP-compatible clients, see [CLI MCP](cli-mcp.mdx).
### Step 3 - Connect the Theming MCP Server (optional)
@@ -269,13 +269,13 @@ Add the `igniteui-theming` entry to the same MCP configuration file, alongside `
}
```
-For configuration details and theming workflows, see [Theming MCP](theming-mcp.md).
+For configuration details and theming workflows, see [Theming MCP](theming-mcp.mdx).
## Additional Resources
-- [Agent Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [Agent Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/cli-mcp.mdx b/docs/angular/src/content/en/components/ai/cli-mcp.mdx
index 419983b0fa..3d783fa41c 100644
--- a/docs/angular/src/content/en/components/ai/cli-mcp.mdx
+++ b/docs/angular/src/content/en/components/ai/cli-mcp.mdx
@@ -18,7 +18,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
## Overview
-Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside [Ignite UI Theming MCP](./theming-mcp.md). CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.
+Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside [Ignite UI Theming MCP](./theming-mcp.mdx). CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.
The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and prompts you to choose which AI clients and agents to configure. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists.
@@ -425,9 +425,9 @@ Validate that the JSON uses the `mcpServers` structure and that each local serve
## Additional Resources
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [Ignite UI for Angular Skills](./skills.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [Ignite UI for Angular Skills](./skills.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/maker-framework.mdx b/docs/angular/src/content/en/components/ai/maker-framework.mdx
index 8661cf69f4..905ec51cd9 100644
--- a/docs/angular/src/content/en/components/ai/maker-framework.mdx
+++ b/docs/angular/src/content/en/components/ai/maker-framework.mdx
@@ -13,7 +13,7 @@ mentionedTypes: []
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. MAKER stands for Maximal Agentic decomposition, first-to-ahead-by-K Error correction, and Red-flagging. The framework is based on the research paper _Solving a million-step LLM task with zero errors_ by Cognizant AI Lab. It runs as an MCP server via `npx` from the `@igniteui` GitHub Packages registry and connects to any MCP-compatible AI client through STDIO transport. Once connected, the AI assistant can invoke three tools - `plan`, `execute`, and `plan_and_execute` - to run long-horizon tasks with automatic error detection and correction.
-The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.md). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry.
+The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.mdx). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry.
## How MAKER Works
@@ -221,10 +221,10 @@ The binary cache location can be overridden with the `MAKER_MCP_CACHE` environme
## Additional Resources
-- [AI-Assisted Development Overview](ai-assisted-development-overview.md)
-- [Agent Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development Overview](ai-assisted-development-overview.mdx)
+- [Agent Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/skills.mdx b/docs/angular/src/content/en/components/ai/skills.mdx
index 3a95886d6c..bd88a0c726 100644
--- a/docs/angular/src/content/en/components/ai/skills.mdx
+++ b/docs/angular/src/content/en/components/ai/skills.mdx
@@ -255,9 +255,9 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](/a
- Getting Started with Ignite UI for Angular
- Angular Schematics & Ignite UI CLI
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/theming-mcp.mdx b/docs/angular/src/content/en/components/ai/theming-mcp.mdx
index a187ea6508..a581c90664 100644
--- a/docs/angular/src/content/en/components/ai/theming-mcp.mdx
+++ b/docs/angular/src/content/en/components/ai/theming-mcp.mdx
@@ -349,19 +349,19 @@ Also confirm that `core()` is called before any other theming mixin in your `sty
## Additional Resources
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [Ignite UI for Angular Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [MAKER Framework](./maker-framework.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [Ignite UI for Angular Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [MAKER Framework](./maker-framework.mdx)
{/* Ideally these should be included once documentation is combined
-- [Theming Overview](../themes/index)
-- [Palettes](../themes/palettes)
-- [Typography](../themes/typography)
-- [Elevations](../themes/elevations)
-- [Spacing](../themes/spacing)
-- [Roundness](../themes/roundness)
-- [Theming with Sass](../themes/sass/index)
+- [Theming Overview](../themes/index.mdx)
+- [Palettes](../themes/palettes.mdx)
+- [Typography](../themes/typography.mdx)
+- [Elevations](../themes/elevations.mdx)
+- [Spacing](../themes/spacing.mdx)
+- [Roundness](../themes/roundness.mdx)
+- [Theming with Sass](../themes/sass/index.mdx)
*/}
diff --git a/docs/angular/src/content/en/components/banner.mdx b/docs/angular/src/content/en/components/banner.mdx
index 7ca75f5d91..91ccea7456 100644
--- a/docs/angular/src/content/en/components/banner.mdx
+++ b/docs/angular/src/content/en/components/banner.mdx
@@ -29,7 +29,7 @@ To get started with the Ignite UI for Angular Banner component, first you need t
ng add igniteui-angular
```
-For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
+For a complete introduction to the Ignite UI for Angular, read the [_getting started_](./general/getting-started.mdx) topic.
The next step is to import the `IgxBannerModule` in your **app.module.ts** file.
@@ -117,7 +117,7 @@ Configuring the message displayed in the banner is easy - just change the conten
### Adding an icon
-An [`igx-icon`](/icon) can be displayed in the banner by passing it to the banner's content. The icon will always be positioned at the beginning of the banner message.
+An [`igx-icon`](./icon.mdx) can be displayed in the banner by passing it to the banner's content. The icon will always be positioned at the beginning of the banner message.
If several `igx-icon` elements are inserted as direct descendants of the banner, the banner will try to position all of them at the beginning. It is strongly advised to pass only one `igx-icon` directly to the banner.
@@ -278,7 +278,7 @@ $custom-banner-theme: banner-theme(
```
-Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the
The last step is to pass the custom banner theme:
diff --git a/docs/angular/src/content/en/components/bullet-graph.mdx b/docs/angular/src/content/en/components/bullet-graph.mdx
index 9896a0cc00..e616b1d40e 100644
--- a/docs/angular/src/content/en/components/bullet-graph.mdx
+++ b/docs/angular/src/content/en/components/bullet-graph.mdx
@@ -323,5 +323,5 @@ For your convenience, all above code snippets are combined into one code block b
You can find more information about other types of gauges in these topics:
-- [Linear Gauge](Linear-gauge.md)
-- [Radial Gauge](radial-gauge.md)
+- [Linear Gauge](linear-gauge.mdx)
+- [Radial Gauge](radial-gauge.mdx)
diff --git a/docs/angular/src/content/en/components/charts/chart-api.mdx b/docs/angular/src/content/en/components/charts/chart-api.mdx
index fb694797a0..f833a7bfa1 100644
--- a/docs/angular/src/content/en/components/charts/chart-api.mdx
+++ b/docs/angular/src/content/en/components/charts/chart-api.mdx
@@ -34,7 +34,7 @@ The Angular
-
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
|
+| -
-
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
|
The Angular
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
- and [many more](types/stock-chart.md) |
+| -
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
- and [many more](types/stock-chart.mdx) |
| Radial Series | Polar Series |
|---------------|--------------|
@@ -116,5 +116,5 @@ The Angular
+For `BubbleSeries`, the `MarkerSize` property does not override the bubble radius, which is controlled by the radius data column and the `RadiusScale`. Bubble sizes remain entirely driven by the data and scale configuration.
+
+
+
+
+## Angular Chart Checkmark Marker Type
+
+The Ignite UI for Angular charts include a `Checkmark` option in the `MarkerType` enum. This marker renders a V-shaped checkmark icon inside a circle on data points in your chart.
+
+You can apply the `Checkmark` marker type to an individual series by setting its `MarkerType` property to `MarkerType.Checkmark`. To use the checkmark shape for all series in the chart simultaneously, set the chart's `MarkerAutomaticBehavior` property to `MarkerAutomaticBehavior.Checkmark`.
+
+The `SeriesViewer.CheckmarkMarkerTemplate` property defines the marker template used for series with a checkmark marker type, and can be used to customize its appearance across the chart.
+
+
+
## Angular Chart Marker Templates
In addition to marker properties, you can implement your own marker by setting a function to the
- [Donut Chart](../types/donut-chart.md)
- [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart) |
-| Line Charts | - [Category Line Chart](../types/line-chart.md#angular-line-chart-example)
- [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example)
- [Step Line Chart](../types/step-chart.md#angular-step-line-chart)
- [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart)
- [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart)
- [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*)
- [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart)
- [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart)
|
-| Area Charts | - [Category Area Chart](../types/area-chart.md#angular-area-chart-example)
- [Step Area Chart](../types/step-chart.md#angular-step-area-chart)
- [Range Area Chart](../types/area-chart.md#angular-range-area-chart)
- [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart)
- [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart)
- [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*)
- [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart)
- [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart)
|
-| Column Charts | - [Column Chart](../types/column-chart.md#angular-column-chart-example)
- [Bar Chart](../types/bar-chart.md#angular-bar-chart-example)
- [Waterfall Chart](../types/column-chart.md#angular-waterfall-chart)
- [Range Column Chart](../types/column-chart.md#angular-range-column-chart)
- [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart) |
-| Spline Charts | - [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example)
- [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart)
- [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart)
- [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart)
|
-| Point Charts | - [Category Point Chart](../types/point-chart.md)
- [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart)
|
-| Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.md)
- [Stock Chart in Column Mode](../types/stock-chart.md)
- [Stock Chart in Bar Mode](../types/stock-chart.md)
- [Stock Chart in Candle Mode](../types/stock-chart.md)
- [Stock Chart with Overlays](../types/stock-chart.md)
- [Stock Chart with Zoom Pane](../types/stock-chart.md)
- [Stock Chart with Volume Pane](../types/stock-chart.md#volume-pane)
- [Stock Chart with Indicator Pane](../types/stock-chart.md#indicator-pane)
|
-| Scatter Charts | - [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart)
- [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart)
- [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart)
- [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*)
- [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*)
|
-| Radial Charts | - [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart)
- [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart)
- [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart)
- [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart)
|
-| Polar Charts | - [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart)
- [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart)
- [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart)
- [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart)
- [Polar Spline Area Chart](../types/polar-chart.md#angular-polar-spline-area-chart)
|
-| Stacked Charts | - [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart)
- [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart)
- [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart)
- [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart)
|
-
-\* Note that the [Scatter Polygon Chart](../types/shape-chart.md) and [Scatter Polyline Chart](../types/shape-chart.md) have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see [Series Collection](#series-collection) section. Otherwise, other chart types are faster.
+| Pie Charts | - [Pie Chart](../types/pie-chart.mdx)
- [Donut Chart](../types/donut-chart.mdx)
- [Radial Pie Chart](../types/radial-chart.mdx#angular-radial-pie-chart) |
+| Line Charts | - [Category Line Chart](../types/line-chart.mdx#angular-line-chart-example)
- [Category Spline Chart](../types/spline-chart.mdx#angular-spline-chart-example)
- [Step Line Chart](../types/step-chart.mdx#angular-step-line-chart)
- [Radial Line Chart](../types/radial-chart.mdx#angular-radial-line-chart)
- [Polar Line Chart](../types/polar-chart.mdx#angular-polar-line-chart)
- [Scatter Line Chart](../types/scatter-chart.mdx#angular-scatter-line-chart)
- [Scatter Polyline Chart](../types/shape-chart.mdx#angular-scatter-polyline-chart) (\*)
- [Scatter Contour Chart](../types/scatter-chart.mdx#angular-scatter-contour-chart)
- [Stacked Line Chart](../types/stacked-chart.mdx#angular-stacked-line-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.mdx#angular-stacked-100-line-chart)
|
+| Area Charts | - [Category Area Chart](../types/area-chart.mdx#angular-area-chart-example)
- [Step Area Chart](../types/step-chart.mdx#angular-step-area-chart)
- [Range Area Chart](../types/area-chart.mdx#angular-range-area-chart)
- [Radial Area Chart](../types/radial-chart.mdx#angular-radial-area-chart)
- [Polar Area Chart](../types/polar-chart.mdx#angular-polar-area-chart)
- [Scatter Polygon Chart](../types/shape-chart.mdx#angular-scatter-polygon-chart) (\*)
- [Scatter Area Chart](../types/scatter-chart.mdx#angular-scatter-area-chart)
- [Stacked Area Chart](../types/stacked-chart.mdx#angular-stacked-area-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.mdx#angular-stacked-100-area-chart)
|
+| Column Charts | - [Column Chart](../types/column-chart.mdx#angular-column-chart-example)
- [Bar Chart](../types/bar-chart.mdx#angular-bar-chart-example)
- [Waterfall Chart](../types/column-chart.mdx#angular-waterfall-chart)
- [Range Column Chart](../types/column-chart.mdx#angular-range-column-chart)
- [Range Bar Chart](../types/bar-chart.mdx#angular-range-bar-chart)
- [Radial Column Chart](../types/radial-chart.mdx#angular-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.mdx#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.mdx#angular-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.mdx#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.mdx#angular-stacked-100-bar-chart) |
+| Spline Charts | - [Category Spline Chart](../types/spline-chart.mdx#angular-spline-chart-example)
- [Polar Spline Chart](../types/polar-chart.mdx#angular-polar-spline-chart)
- [Scatter Spline Chart](../types/scatter-chart.mdx#angular-scatter-spline-chart)
- [Stacked Spline Chart](../types/stacked-chart.mdx#angular-stacked-spline-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.mdx#angular-stacked-100-spline-chart)
|
+| Point Charts | - [Category Point Chart](../types/point-chart.mdx)
- [Scatter HD Chart](../types/scatter-chart.mdx#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.mdx#angular-scatter-marker-chart)
- [Scatter Bubble Chart](../types/bubble-chart.mdx)
- [Polar Marker Chart](../types/polar-chart.mdx#angular-polar-marker-chart)
|
+| Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.mdx)
- [Stock Chart in Column Mode](../types/stock-chart.mdx)
- [Stock Chart in Bar Mode](../types/stock-chart.mdx)
- [Stock Chart in Candle Mode](../types/stock-chart.mdx)
- [Stock Chart with Overlays](../types/stock-chart.mdx)
- [Stock Chart with Zoom Pane](../types/stock-chart.mdx)
- [Stock Chart with Volume Pane](../types/stock-chart.mdx#volume-pane)
- [Stock Chart with Indicator Pane](../types/stock-chart.mdx#indicator-pane)
|
+| Scatter Charts | - [Scatter HD Chart](../types/scatter-chart.mdx#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.mdx#angular-scatter-marker-chart)
- [Scatter Line Chart](../types/scatter-chart.mdx#angular-scatter-line-chart)
- [Scatter Bubble Chart](../types/bubble-chart.mdx)
- [Scatter Spline Chart](../types/scatter-chart.mdx#angular-scatter-spline-chart)
- [Scatter Area Chart](../types/scatter-chart.mdx#angular-scatter-area-chart)
- [Scatter Contour Chart](../types/scatter-chart.mdx#angular-scatter-contour-chart)
- [Scatter Polyline Chart](../types/shape-chart.mdx#angular-scatter-polyline-chart) (\*)
- [Scatter Polygon Chart](../types/shape-chart.mdx#angular-scatter-polygon-chart) (\*)
|
+| Radial Charts | - [Radial Line Chart](../types/radial-chart.mdx#angular-radial-line-chart)
- [Radial Area Chart](../types/radial-chart.mdx#angular-radial-area-chart)
- [Radial Pie Chart](../types/radial-chart.mdx#angular-radial-pie-chart)
- [Radial Column Chart](../types/radial-chart.mdx#angular-radial-column-chart)
|
+| Polar Charts | - [Polar Marker Chart](../types/polar-chart.mdx#angular-polar-marker-chart)
- [Polar Line Chart](../types/polar-chart.mdx#angular-polar-line-chart)
- [Polar Area Chart](../types/polar-chart.mdx#angular-polar-area-chart)
- [Polar Spline Chart](../types/polar-chart.mdx#angular-polar-spline-chart)
- [Polar Spline Area Chart](../types/polar-chart.mdx#angular-polar-spline-area-chart)
|
+| Stacked Charts | - [Stacked Line Chart](../types/stacked-chart.mdx#angular-stacked-line-chart)
- [Stacked Area Chart](../types/stacked-chart.mdx#angular-stacked-area-chart)
- [Stacked Column Chart](../types/stacked-chart.mdx#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.mdx#angular-stacked-bar-chart)
- [Stacked Spline Chart](../types/stacked-chart.mdx#angular-stacked-spline-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.mdx#angular-stacked-100-line-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.mdx#angular-stacked-100-area-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.mdx#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.mdx#angular-stacked-100-bar-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.mdx#angular-stacked-100-spline-chart)
|
+
+\* Note that the [Scatter Polygon Chart](../types/shape-chart.mdx) and [Scatter Polyline Chart](../types/shape-chart.mdx) have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see [Series Collection](#series-collection) section. Otherwise, other chart types are faster.
### Chart Animations
-Enabling [Chart Animations](chart-animations.md) will slightly delay final rendering series in the Angular charts while they play transition-in animations.
+Enabling [Chart Animations](chart-animations.mdx) will slightly delay final rendering series in the Angular charts while they play transition-in animations.
### Chart Annotations
-Enabling [Chart Annotations](chart-annotations.md) such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the Angular chart.
+Enabling [Chart Annotations](chart-annotations.mdx) such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the Angular chart.
### Chart Highlighting
-Enabling the [Chart Highlighting](chart-highlighting.md) will slightly decrease performance of the Angular chart.
+Enabling the [Chart Highlighting](chart-highlighting.mdx) will slightly decrease performance of the Angular chart.
### Chart Legend
@@ -124,7 +124,7 @@ Adding a legend to the Angular charts might decrease performance if titles of se
### Chart Markers
-In Angular charts, [Markers](chart-markers.md) are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart.
+In Angular charts, [Markers](chart-markers.mdx) are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart.
This code snippet shows how to remove markers from the Angular charts.
@@ -155,11 +155,11 @@ this.LineSeries.Resolution = 10;
### Chart Overlays
-Enabling [Chart Overlays](chart-overlays.md) will slightly decrease performance of the Angular chart.
+Enabling [Chart Overlays](chart-overlays.mdx) will slightly decrease performance of the Angular chart.
### Chart Trendlines
-Enabling [Chart Trendlines](chart-trendlines.md) will slightly decrease performance of the Angular chart.
+Enabling [Chart Trendlines](chart-trendlines.mdx) will slightly decrease performance of the Angular chart.
### Axis Types
@@ -315,7 +315,7 @@ In addition to the general performance guidelines, the Angular --framework=angular --type=igx-ts`), component scaffolding (`ig add`), a development server (`ig start`), and a built-in MCP server for AI assistant integration (`ig mcp`).
-For setup instructions and all available commands, see [Getting Started with Ignite UI CLI](./cli/getting-started-with-cli).
+For setup instructions and all available commands, see [Getting Started with Ignite UI CLI](./cli/getting-started-with-cli.mdx).
## Ignite UI for Angular Schematics
@@ -25,14 +25,14 @@ For setup instructions and all available commands, see [Getting Started with Ign
The Schematics collection provides the same core project templates and component views as the CLI, within the native Angular CLI workflow. It does not include the MCP server - for AI assistant integration, use the Ignite UI CLI alongside your Angular CLI project.
-For setup instructions see [Getting Started with Ignite UI for Angular Schematics](./cli/getting-started-with-angular-schematics).
+For setup instructions see [Getting Started with Ignite UI for Angular Schematics](./cli/getting-started-with-angular-schematics.mdx).
## Step-by-Step Guides
Both tools support a guided interactive mode and a direct command mode:
-- [Step-by-Step Guide Using Ignite UI CLI](./cli/step-by-step-guide-using-cli)
-- [Step-by-Step Guide Using Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics)
+- [Step-by-Step Guide Using Ignite UI CLI](./cli/step-by-step-guide-using-cli.mdx)
+- [Step-by-Step Guide Using Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.mdx)
## AI Assistant Integration (MCP)
@@ -44,4 +44,4 @@ Start the MCP server with:
ig mcp
```
-For client configuration (VS Code, Claude Desktop, Cursor) and a description of available tools, see [Ignite UI CLI MCP](../ai/cli-mcp).
+For client configuration (VS Code, Claude Desktop, Cursor) and a description of available tools, see [Ignite UI CLI MCP](../ai/cli-mcp.mdx).
diff --git a/docs/angular/src/content/en/components/general/cli/auth-template.mdx b/docs/angular/src/content/en/components/general/cli/auth-template.mdx
index 720b3fa748..60660b30af 100644
--- a/docs/angular/src/content/en/components/general/cli/auth-template.mdx
+++ b/docs/angular/src/content/en/components/general/cli/auth-template.mdx
@@ -38,7 +38,7 @@ Answering yes generates one of two authenticated variants:
ng g @igniteui/angular-schematics:c grid newGrid
Ignite UI CLI:
ig add grid newGridBasic template for IgxGrid. | [IgxGrid](../../grid/grid.md) component with auto generated columns |
-| grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing
Ignite UI CLI:
ig add grid-batch-editing newGridBatchEditingSample IgxGrid with batch editing. | [IgxGrid](../../grid/grid.md) that uses Transaction service for [batch editing](../../grid/batch-editing.md) |
-| custom-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-grid newCustomGrid
Ignite UI CLI:
ig add custom-grid newCustomGridIgxGrid with optional features like sorting, filtering, editing, etc. | [IgxGrid](../../grid/grid.md) with optional features like [Sorting](../../grid/sorting.md), [Filtering](../../grid/filtering.md), [Cell Editing](../../grid/editing.md), [Row Editing](../../grid/row-editing.md), [Group By](../../grid/groupby.md), [Resizing](../../grid/column-resizing.md), [Selection](../../grid/selection.md), [Paging](../../grid/paging.md), [Column Pinning](../../grid/column-pinning.md), [Column Moving](../../grid/column-moving.md), [Column Hiding](../../grid/column-hiding.md) |
-| grid-summaries | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries
Ignite UI CLI:
ig add grid-summaries newGridSummariesIgxGrid with summaries feature. | [IgxGrid](../../grid/grid.md) with [summaries](../../grid/summaries.md) feature. |
-| grid-multi-column-headers | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders
Ignite UI CLI:
ig add grid-multi-column-headers newGridMultiColumnHeadersIgxGrid with multiple header columns. | [IgxGrid](../../grid/grid.md) with [multi-column headers](../../grid/multi-column-headers.md) |
-| tree grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid
Ignite UI CLI:
ig add custom-tree-grid newCustomTreeGridIgxTreeGrid with optional features like sorting, filtering, row editing, etc. | [IgxTreeGrid](../../treegrid/tree-grid.md) with optional features like [Sorting](../../treegrid/sorting.md), [Filtering](../../treegrid/filtering.md), [Cell Editing](../../treegrid/editing.md), [Row Editing](../../treegrid/row-editing.md), [Resizing](../../treegrid/column-resizing.md), [Row Selection](../../treegrid/selection.md), [Paging](../../treegrid/paging.md), [Column Pinning](../../treegrid/column-pinning.md), [Column Moving](../../treegrid/column-moving.md), [Column Hiding](../../treegrid/column-hiding.md) |
-| hierarchical-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid newHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid newHierarchicalGridBasic IgxHierarchicalGrid. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) component with auto generated columns. |
-| hierarchical-grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-batch-editing newHierarchicalGridBatchEditing
Ignite UI CLI:
ig add hierarchical-grid-batch-editing newHierarchicalGridBatchEditingIgxHierarchicalGrid with batch editing. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) that uses Transaction service for [batch editing](../../hierarchicalgrid/batch-editing.md). |
-| hierarchical-grid-custom | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-custom newCustomHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid-custom newCustomHierarchicalGridIgxHierarchicalGrid with optional features like sorting, filtering, editing, etc. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) with optional features like [Sorting](../../hierarchicalgrid/sorting.md), [Filtering](../../hierarchicalgrid/filtering.md), [Row Editing](../../hierarchicalgrid/row-editing.md), [Selection](../../hierarchicalgrid/selection.md). |
-| hierarchical-grid-summaries | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-summaries newHierarchicalGridSummaries
Ignite UI CLI:
ig add hierarchical-grid-summaries newHierarchicalGridSummariesIgxHierarchicalGrid with summaries feature. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) with [summaries](../../hierarchicalgrid/summaries.md) feature. |
-| pivot-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c pivot-grid newPivotGrid
Ignite UI CLI:
ig add pivot-grid newPivotGridBasic IgxPivotGrid. | [IgxPivotGrid](../../pivotGrid/pivot-grid.md) component for multi-dimensional data analysis. |
-| tree | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tree newTree
Ignite UI CLI:
ig add tree newTreeIgxTree with selection and load-on-demand nodes. | [IgxTree](../../tree.md) with selection and load-on-demand node support. |
-| list | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c list newList
Ignite UI CLI:
ig add list newListBasic IgxList. | [IgxList](../../list.md) with search and filtering logic. |
-| combo | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c combo newCombo
Ignite UI CLI:
ig add combo newComboBasic IgxCombo with templating. | [IgxCombo](../../combo.md) with custom [templating](../../combo-templates.md). |
+| grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid newGrid
Ignite UI CLI:
ig add grid newGridBasic template for IgxGrid. | [IgxGrid](../../grid/grid.mdx) component with auto generated columns |
+| grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing
Ignite UI CLI:
ig add grid-batch-editing newGridBatchEditingSample IgxGrid with batch editing. | [IgxGrid](../../grid/grid.mdx) that uses Transaction service for [batch editing](../../grid/batch-editing.mdx) |
+| custom-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-grid newCustomGrid
Ignite UI CLI:
ig add custom-grid newCustomGridIgxGrid with optional features like sorting, filtering, editing, etc. | [IgxGrid](../../grid/grid.mdx) with optional features like [Sorting](../../grid/sorting.mdx), [Filtering](../../grid/filtering.mdx), [Cell Editing](../../grid/editing.mdx), [Row Editing](../../grid/row-editing.mdx), [Group By](../../grid/groupby.mdx), [Resizing](../../grid/column-resizing.mdx), [Selection](../../grid/selection.mdx), [Paging](../../grid/paging.mdx), [Column Pinning](../../grid/column-pinning.mdx), [Column Moving](../../grid/column-moving.mdx), [Column Hiding](../../grid/column-hiding.mdx) |
+| grid-summaries | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries
Ignite UI CLI:
ig add grid-summaries newGridSummariesIgxGrid with summaries feature. | [IgxGrid](../../grid/grid.mdx) with [summaries](../../grid/summaries.mdx) feature. |
+| grid-multi-column-headers | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders
Ignite UI CLI:
ig add grid-multi-column-headers newGridMultiColumnHeadersIgxGrid with multiple header columns. | [IgxGrid](../../grid/grid.mdx) with [multi-column headers](../../grid/multi-column-headers.mdx) |
+| tree grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid
Ignite UI CLI:
ig add custom-tree-grid newCustomTreeGridIgxTreeGrid with optional features like sorting, filtering, row editing, etc. | [IgxTreeGrid](../../treegrid/tree-grid.mdx) with optional features like [Sorting](../../treegrid/sorting.mdx), [Filtering](../../treegrid/filtering.mdx), [Cell Editing](../../treegrid/editing.mdx), [Row Editing](../../treegrid/row-editing.mdx), [Resizing](../../treegrid/column-resizing.mdx), [Row Selection](../../treegrid/selection.mdx), [Paging](../../treegrid/paging.mdx), [Column Pinning](../../treegrid/column-pinning.mdx), [Column Moving](../../treegrid/column-moving.mdx), [Column Hiding](../../treegrid/column-hiding.mdx) |
+| hierarchical-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid newHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid newHierarchicalGridBasic IgxHierarchicalGrid. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) component with auto generated columns. |
+| hierarchical-grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-batch-editing newHierarchicalGridBatchEditing
Ignite UI CLI:
ig add hierarchical-grid-batch-editing newHierarchicalGridBatchEditingIgxHierarchicalGrid with batch editing. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) that uses Transaction service for [batch editing](../../hierarchicalgrid/batch-editing.mdx). |
+| hierarchical-grid-custom | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-custom newCustomHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid-custom newCustomHierarchicalGridIgxHierarchicalGrid with optional features like sorting, filtering, editing, etc. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) with optional features like [Sorting](../../hierarchicalgrid/sorting.mdx), [Filtering](../../hierarchicalgrid/filtering.mdx), [Row Editing](../../hierarchicalgrid/row-editing.mdx), [Selection](../../hierarchicalgrid/selection.mdx). |
+| hierarchical-grid-summaries | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-summaries newHierarchicalGridSummaries
Ignite UI CLI:
ig add hierarchical-grid-summaries newHierarchicalGridSummariesIgxHierarchicalGrid with summaries feature. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) with [summaries](../../hierarchicalgrid/summaries.mdx) feature. |
+| pivot-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c pivot-grid newPivotGrid
Ignite UI CLI:
ig add pivot-grid newPivotGridBasic IgxPivotGrid. | [IgxPivotGrid](../../pivotgrid/pivot-grid.mdx) component for multi-dimensional data analysis. |
+| tree | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tree newTree
Ignite UI CLI:
ig add tree newTreeIgxTree with selection and load-on-demand nodes. | [IgxTree](../../tree.mdx) with selection and load-on-demand node support. |
+| list | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c list newList
Ignite UI CLI:
ig add list newListBasic IgxList. | [IgxList](../../list.mdx) with search and filtering logic. |
+| combo | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c combo newCombo
Ignite UI CLI:
ig add combo newComboBasic IgxCombo with templating. | [IgxCombo](../../combo.mdx) with custom [templating](../../combo-templates.mdx). |
| Charts | | |
-| category chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c category-chart newCategoryChart
Ignite UI CLI:
ig add category-chart newCategoryChartBasic category chart with chart type selector. | Basic [category chart](../../charts/types/column-chart.md) with chart type selector. |
-| financial chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
Ignite UI CLI:
ig add financial-chart newFinancialChartBasic financial chart with automatic toolbar and type selection. | Basic [financial chart](../../charts/types/stock-chart.md) with automatic toolbar and type selection. |
+| category chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c category-chart newCategoryChart
Ignite UI CLI:
ig add category-chart newCategoryChartBasic category chart with chart type selector. | Basic [category chart](../../charts/types/column-chart.mdx) with chart type selector. |
+| financial chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
Ignite UI CLI:
ig add financial-chart newFinancialChartBasic financial chart with automatic toolbar and type selection. | Basic [financial chart](../../charts/types/stock-chart.mdx) with automatic toolbar and type selection. |
| Gauges | | |
-| bullet graph | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph
Ignite UI CLI:
ig add bullet-graph newBulletGraphIgxBulletGraph with different animations. | [IgxBulletGraph](../../bullet-graph.md) with different animations. |
-| linear gauge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge
Ignite UI CLI:
ig add linear-gauge newLinearGaugeIgxLinearGauge with different animations. | [IgxLinearGauge](../../linear-gauge.md) with different animations. |
-| radial gauge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge
Ignite UI CLI:
ig add radial-gauge newRadialGaugeIgxRadialGauge with different animations. | [IgxRadialGauge](../../radial-gauge.md) with different animations. |
+| bullet graph | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph
Ignite UI CLI:
ig add bullet-graph newBulletGraphIgxBulletGraph with different animations. | [IgxBulletGraph](../../bullet-graph.mdx) with different animations. |
+| linear gauge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge
Ignite UI CLI:
ig add linear-gauge newLinearGaugeIgxLinearGauge with different animations. | [IgxLinearGauge](../../linear-gauge.mdx) with different animations. |
+| radial gauge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge
Ignite UI CLI:
ig add radial-gauge newRadialGaugeIgxRadialGauge with different animations. | [IgxRadialGauge](../../radial-gauge.mdx) with different animations. |
| Maps | | |
-| geographic-map | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c geographic-map newGeographicMap
Ignite UI CLI:
ig add geographic-map newGeographicMapBasic IgxGeographicMap. | [IgxGeographicMap](../../geo-map.md) displaying geo-spatial data on geographic imagery maps. |
+| geographic-map | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c geographic-map newGeographicMap
Ignite UI CLI:
ig add geographic-map newGeographicMapBasic IgxGeographicMap. | [IgxGeographicMap](../../geo-map.mdx) displaying geo-spatial data on geographic imagery maps. |
| Layouts | | |
-| dock-manager | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dock-manager newDockManager
Ignite UI CLI:
ig add dock-manager newDockManagerBasic IgcDockManager. | [IgcDockManager](../../dock-manager.md) with nine content slots. |
-| carousel | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c carousel newCarousel
Ignite UI CLI:
ig add carousel newCarouselBasic IgxCarousel. | [IgxCarousel](../../carousel.md) cycling through a series of images. |
-| tabs | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tabs newTabs
Ignite UI CLI:
ig add tabs newTabsBasic IgxTabs. | [IgxTabs](../../tabs.md) component that includes three customized tab-groups. |
-| bottom-nav | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
Ignite UI CLI:
ig add bottom-nav newBottomNavThree item bottom-nav template. | Three item bottom [navbar](../../navbar.md) template. |
-| accordion | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c accordion newAccordion
Ignite UI CLI:
ig add accordion newAccordionBasic IgxAccordion sample. | [IgxAccordion](../../accordion.md) with multiple collapsible panels in a single container. |
-| stepper | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c stepper newStepper
Ignite UI CLI:
ig add stepper newStepperBasic IgxStepper sample. | [IgxStepper](../../stepper.md) visualizing content as a process with successive steps. |
+| dock-manager | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dock-manager newDockManager
Ignite UI CLI:
ig add dock-manager newDockManagerBasic IgcDockManager. | [IgcDockManager](../../dock-manager.mdx) with nine content slots. |
+| carousel | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c carousel newCarousel
Ignite UI CLI:
ig add carousel newCarouselBasic IgxCarousel. | [IgxCarousel](../../carousel.mdx) cycling through a series of images. |
+| tabs | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tabs newTabs
Ignite UI CLI:
ig add tabs newTabsBasic IgxTabs. | [IgxTabs](../../tabs.mdx) component that includes three customized tab-groups. |
+| bottom-nav | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
Ignite UI CLI:
ig add bottom-nav newBottomNavThree item bottom-nav template. | Three item bottom [navbar](../../navbar.mdx) template. |
+| accordion | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c accordion newAccordion
Ignite UI CLI:
ig add accordion newAccordionBasic IgxAccordion sample. | [IgxAccordion](../../accordion.mdx) with multiple collapsible panels in a single container. |
+| stepper | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c stepper newStepper
Ignite UI CLI:
ig add stepper newStepperBasic IgxStepper sample. | [IgxStepper](../../stepper.mdx) visualizing content as a process with successive steps. |
| Data Entry & Display | | |
-| chip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c chip newChip
Ignite UI CLI:
ig add chip newChipBasic IgxChip. | [IgxChip](../../chip.md) components inside igx-chips-area. |
-| dropdown | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dropdown newDropDown
Ignite UI CLI:
ig add dropdown newDropDownBasic IgxDropDown. | Basic [IgxDropDown](../../drop-down.md) that displays a list of items. |
-| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select newSelect
Ignite UI CLI:
ig add select newSelectBasic IgxSelect. | Simple [IgxSelect](../../select.md) that displays a list of items. |
-| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-groups newGroupsSelect
Ignite UI CLI:
ig add select-groups newGroupsSelectSelect With Groups. | [IgxSelect](../../select.md) displaying grouped items. |
-| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-in-form newFormSelect
Ignite UI CLI:
ig add select-in-form newFormSelectIgxSelect in a form. | [IgxSelect](../../select.md) component usage in a form. |
-| input group | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c input-group newInputGroup
Ignite UI CLI:
ig add input-group newInputGroupBasic IgxInputGroup form view. | Form view created with [IgxInputGroup](../../input-group.md). |
-| autocomplete | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c autocomplete newAutocomplete
Ignite UI CLI:
ig add autocomplete newAutocompleteSimple IgxAutocomplete. | [IgxAutocomplete](../../autocomplete.md) enhancing text input with a dropdown of suggested options. |
-| enhanced-autocomplete | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c enhanced-autocomplete newEnhancedAutocomplete
Ignite UI CLI:
ig add enhanced-autocomplete newEnhancedAutocompleteIgxAutocomplete with enhanced groups. | [IgxAutocomplete](../../autocomplete.md) with grouped suggestion items. |
+| chip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c chip newChip
Ignite UI CLI:
ig add chip newChipBasic IgxChip. | [IgxChip](../../chip.mdx) components inside igx-chips-area. |
+| dropdown | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dropdown newDropDown
Ignite UI CLI:
ig add dropdown newDropDownBasic IgxDropDown. | Basic [IgxDropDown](../../drop-down.mdx) that displays a list of items. |
+| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select newSelect
Ignite UI CLI:
ig add select newSelectBasic IgxSelect. | Simple [IgxSelect](../../select.mdx) that displays a list of items. |
+| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-groups newGroupsSelect
Ignite UI CLI:
ig add select-groups newGroupsSelectSelect With Groups. | [IgxSelect](../../select.mdx) displaying grouped items. |
+| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-in-form newFormSelect
Ignite UI CLI:
ig add select-in-form newFormSelectIgxSelect in a form. | [IgxSelect](../../select.mdx) component usage in a form. |
+| input group | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c input-group newInputGroup
Ignite UI CLI:
ig add input-group newInputGroupBasic IgxInputGroup form view. | Form view created with [IgxInputGroup](../../input-group.mdx). |
+| autocomplete | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c autocomplete newAutocomplete
Ignite UI CLI:
ig add autocomplete newAutocompleteSimple IgxAutocomplete. | [IgxAutocomplete](../../autocomplete.mdx) enhancing text input with a dropdown of suggested options. |
+| enhanced-autocomplete | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c enhanced-autocomplete newEnhancedAutocomplete
Ignite UI CLI:
ig add enhanced-autocomplete newEnhancedAutocompleteIgxAutocomplete with enhanced groups. | [IgxAutocomplete](../../autocomplete.mdx) with grouped suggestion items. |
| Interactions | | |
-| dialog | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dialog newDialog
Ignite UI CLI:
ig add dialog newDialogBasic IgxDialog. | Sample of the [IgxDialog](../../dialog.md) used as a standard confirmation dialog. |
-| tooltip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tooltip newTooltip
Ignite UI CLI:
ig add tooltip newTooltipA fully customizable tooltip. | Basic tooltip created with the [IgxTooltip](../../tooltip.md). |
+| dialog | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dialog newDialog
Ignite UI CLI:
ig add dialog newDialogBasic IgxDialog. | Sample of the [IgxDialog](../../dialog.mdx) used as a standard confirmation dialog. |
+| tooltip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tooltip newTooltip
Ignite UI CLI:
ig add tooltip newTooltipA fully customizable tooltip. | Basic tooltip created with the [IgxTooltip](../../tooltip.mdx). |
| Scheduling | | |
-| date-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c date-picker newDatePicker
Ignite UI CLI:
ig add date-picker newDatePickerBasic IgxDatePicker. | Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. |
-| time-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c time-picker newTimePicker
Ignite UI CLI:
ig add time-picker newTimePickerBasic IgxTimePicker. | Basic [IgxTimePicker](../../time-picker.md) with initial value set and one-way data binding. |
-| calendar | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c calendar newCalendar
Ignite UI CLI:
ig add calendar newCalendarIgxCalendar with single selection. | Basic [IgxCalendar](../../calendar.md) with single selection. |
+| date-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c date-picker newDatePicker
Ignite UI CLI:
ig add date-picker newDatePickerBasic IgxDatePicker. | Basic [IgxDatePicker](../../date-picker.mdx) with one-way data binding. |
+| time-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c time-picker newTimePicker
Ignite UI CLI:
ig add time-picker newTimePickerBasic IgxTimePicker. | Basic [IgxTimePicker](../../time-picker.mdx) with initial value set and one-way data binding. |
+| calendar | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c calendar newCalendar
Ignite UI CLI:
ig add calendar newCalendarIgxCalendar with single selection. | Basic [IgxCalendar](../../calendar.mdx) with single selection. |
## Scenario Templates
diff --git a/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx b/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
index a35ea5f552..d66cb6623a 100644
--- a/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
+++ b/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
@@ -13,7 +13,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
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. It integrates into the native Angular CLI workflow - use it with `ng new` for project creation and `ng g` for component scaffolding, without installing a separate global tool. The collection is distributed as the `@igniteui/angular-schematics` package and is added automatically when you run `ng add igniteui-angular` on an existing Angular project.
-The Schematics collection does not run an MCP server - the MCP server process is provided by the Ignite UI CLI and starts via `npx -y igniteui-cli mcp`, where `-y` avoids the interactive `npx` confirmation prompt. The `ai-config` schematic configures the MCP client connection and copies Agent Skills without requiring a separate CLI install. The collection is specific to Angular; React, Web Components, and Blazor equivalents are covered in their respective framework documentation. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](../getting-started).
+The Schematics collection does not run an MCP server - the MCP server process is provided by the Ignite UI CLI and starts via `npx -y igniteui-cli mcp`, where `-y` avoids the interactive `npx` confirmation prompt. The `ai-config` schematic configures the MCP client connection and copies Agent Skills without requiring a separate CLI install. The collection is specific to Angular; React, Web Components, and Blazor equivalents are covered in their respective framework documentation. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](../getting-started.mdx).
## Install the Schematics Collection
@@ -49,7 +49,7 @@ The guided wizard is the recommended starting point for new projects. Activate i
ng new --collection="@igniteui/angular-schematics"
```
-For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics).
+For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](./step-by-step-guide-using-angular-schematics.mdx).
### Create a project directly
@@ -77,8 +77,8 @@ When using the interactive wizard, selecting `side-nav` or `side-nav-mini` trigg
| Template ID | Description |
| :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| side-nav-auth | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. |
-| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. |
+| side-nav-auth | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](./auth-template.mdx) for details. |
+| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](./auth-template.mdx) for details. |
The following arguments are available when creating a project:
@@ -144,13 +144,13 @@ The following arguments are available when creating a project:
## Add a Component Template
-To add an [available Ignite UI for Angular template](component-templates) to an existing project, use `ng generate` with the Ignite UI for Angular collection and the `component` schematic, providing the template ID and a name for the new component:
+To add an [available Ignite UI for Angular template](./component-templates.mdx) to an existing project, use `ng generate` with the Ignite UI for Angular collection and the `component` schematic, providing the template ID and a name for the new component:
```cmd
ng g @igniteui/angular-schematics:component grid newGrid
```
-Template addition is supported in projects created with the Angular Schematics, Ignite UI CLI, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics#add-component-views).
+Template addition is supported in projects created with the Angular Schematics, Ignite UI CLI, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](./step-by-step-guide-using-angular-schematics.mdx#add-component-views).
The following arguments are available when adding a template:
@@ -324,4 +324,4 @@ ig ai-config
The `ig ai-config` command configures only the two Ignite UI entries, `igniteui-cli` and `igniteui-theming`, and does not register `angular-cli`. Use `ng generate @igniteui/angular-schematics:ai-config` to get all three servers configured in a single step.
-For full setup instructions across all AI clients and Agent Skills wiring, see [Ignite UI CLI MCP](../../ai/cli-mcp).
\ No newline at end of file
+For full setup instructions across all AI clients and Agent Skills wiring, see [Ignite UI CLI MCP](../../ai/cli-mcp.mdx).
\ No newline at end of file
diff --git a/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx b/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx
index 85b4cddccb..4622a41b52 100644
--- a/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx
+++ b/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx
@@ -66,7 +66,7 @@ ig new
` Section header, so that it appears on the submenu on the right.
-### 2. Start the content with the example of adding the theming index file.
-### 3. Provide the simplest styling example, which is to extend the default theme for the corresponding feature/component. For example, when styling the paginator UI, the `igx-grid-paginator-theme` needs to be extended:
-
-```scss
-$dark-grid-paginator: grid-paginator-theme(
- $text-color: #F4D45C,
- $background-color: #575757,
- $border-color: #292826
-);
-```
-
-### 4. If other elements in the feature UI are styled by another theme, add example for that theme too. For example - the buttons in the paginator UI require that a new theme for buttons is created.
-### 5. If a theme provides a ton of parameters for styling, choose those that you decide would be the most common. You may state in one sentence what each property controls, and provide a link to the theme under the SASS API.
-### 6. Provide the last step, which is to include the component mixin, along with two notes – the first one for scoping any mixin if needed, and the second note about penetrating the `ViewEncapsulation`, along with example on how to overcome the encapsulation.
-### 7. Add an iframe with an example, along with a Stackblitz button
-### 8. Examples on styling with `igx-color`, `palettes` and `schemas` are not necessary, but you may add a link to Theming engine topics as they are quite detailed.
-### 9. When adding a section for a certain grid feature, add it for the igxHierachicalGrid and igxTreeGrid as well.
-
-
-# Workflow
-
-When working on an issue for the Ignite UI for Angular DocFX Site Builder, you need to be aware of and to follow a correct status workflow. We have created a number of status labels in order to communicate well what the current status of a single issue/pull request is. The statuses are as follows:
-
-## Development - applicable to issues and pull requests
-1. `status: in-review` this is the initial status of an issue. If the label is not placed, go ahead and place it.
-2. `status: in-development` this is the status once you start working on an issue. Assign the issue to yourself if it hasn't been assigned already and remove the previous status and assign it an in development status.
-3. `status: by-design` this is the status of an issue that has been reviewed and has been determined that the current design of the feature is such that the issue describes the correct behavior as incorrect. Remove other statuses and place this status if you've reviewed the issue.
-4. `status: third-party-issue` this is the status of an issue that has been reviewed, has been determined to be an issue, but the root case is not in the Ignite UI for Angular code. Example would be browser specific bugs caused by the particular browser's rendering or JavaScript engines, or an issue with the Angular framework. Remove other statuses and place only this one if you're the one performing the investigation.
-5. `status: not-to-fix` this is the status of issues that derive from our code, but have been decided to leave as is. This is done when fixes require general design and/or architecture changes and are very risky.
-6. `status: already-fixed` this status indicates that the issue is already fixed in the source code. When setting this status assign the person that logged the issue so that he can verify the issue is fixed in the respective development branch. Remove other statuses and place this status if you've reviewed the issue.
-7. `status: cannot-reproduce` this status indicates that you cannot reproduce the issue in the source code. A reason may be because the issue is already fixed. When setting this status assign the person that logged the issue so that he can respond with more details on how to reproduce it.
-8. `status: not a bug` this is the status of an issue that you reviewed and concluded that it's not a bug. You should comment explaining the reasons why you think the issue is not a bug.
-9. `status: resolved` this is the status of an issue that has been fixed and there are active pull requests related to it.
-
-Example status workflows:
-
-`status: in-review` => `status: in-development` => `status: resolved` (PR is created)
-
-`status: in-review` => `status: by-design` (Issue can be closed)
-
-`status: in-review` => `status: third-party-issue` (Issue can be closed)
-
-`status: in-review` => `status: not-to-fix` (Issue can be closed)
-
-> Note: In most cases the development will be related to new topics creation or updating of existing one. Keep in mind that **for each newly added topic the toc.json should be updated with a reference to the new topic**. It is recommended `Additional references` section to be added at the end of each topic.
-
-## Testing - applicable to pull requests
-1. `status: awaiting-test` this is the initial status of pull requests. If you're performing the pull request, please place this status on it. Pull requests are accepted if and only if all status checks pass, review is performed, and the pull request has been tested and contains `status: verified`.
-2. `status: in-test` place this status once you pick up the pull request for testing.
-3. `status: verified` place this status once you've tested the pull request, have verified that the issue is fixed, and have included all necessary automated tests for the issue.
-4. `status: not-fixed` place this status once you've tested the pull request and you are still able to reproduce the issue it's attempting to fix. Then assign the developer back on the pull request.
-
-Example status workflows:
-
-`status: awaiting-test` => `status: in-test` => `status: verified` (PR can be merged if all prerequisites are met)
-
-`status: awaiting-test` => `status: in-test` => `status: not-fixed` => `status: in-development` => `status: awaiting-test`
-
-> Note: When you are assigned to test a PR related to new topic creation or updating an existing one:
-1. Check the build result.
-2. Be sure that `Writing an article` guidance is respected.
-3. Check whether the embed sample is working.
-4. Code views are working as well
-5. Each hyperlink is working properly.
-6. Table of content is correct.
-
-> Note: Testing a PR from Angular Samples (when new sample is added) with combination of PR related to topic update (or when new topic is added).
-Open both repositories and perform `npm start`. This will start both projects and you will see the embed sample in your topic under `localhost`.
-
-## Localization - applicable to issues and pull requests
-Ensure that whenever a change is made to the text content the appropriate status is set:
-1. `status: pending-localization` this status tells that there are changes in the localization strings that need to be translated. When you make such changes, put this status badge without removing the other applicable ones and assign a person to do the translations.
-
-> Note: This status should be set only when the PR is approved. This will indicate that no further changes will be applied.
-2. `status: localized` this status is for issues that were with a pending translation status and have already been localized. Place this status label once these translation changes have been included in the current pull request, or the changes are already pulled with a different pull request.
-
-> Note: Keep in mind that when you submit a change in the EN .md files, you don't need to make the same change in the JP/KR versions. This task will be handled by the Localization team.
-
-
-## Fixing a bug
-
-1. Depending on where the bug/change/feature was found/is planned `the current version` or the `ongoing release version`, checkout a development branches from `vnext` or/and `master` branch. `vnext` is the version that is going to be used upon release (next version), and `master` is the branch with the current state (current version available on production). If the change/fix is applicable only to the ongoing release branch (`vnext`) there is no need to cherry-pick to `master` branch as the change/fix/feature will be pushed to `master` branch upon release.
-2. Run lint
-4. Pull request your changes and reference the issue. Use the enforced commit message format with applicable type, scope, etc.
-5. Don't forget to make the necessary status updates, as described in the workflow section.
-
-> Note: Cherry-pick to `master` branch only changes with **high priority**. There is no need to cherry-pick into `master` every bug fix/change from `vnext`> A regular mass merge PRs are going to be made from `vnext` into `master`.
-
-**Example workflow for a bug with high priority**
-The process will look like this:
-
-1. Checkout new branch from `vnext`. For code example purposes let's say the new branch is called `fixing-bug-5423-vnext`.
-2. Commit your changes to your `fixing-bug-5423-vnext` branch.
-3. Push and PR to the `vnext` branch.
-4. Switch to the `master` branch.
-5. Create a new branch from `master`. For code example purposes let's say the new branch is called `fixing-bug-5423-master`.
-6. Cherry pick your commit from the `fixing-bug-5423-vnext` branch: `git cherry-pick fixing-bug-5423-master`
-7. Push to your `fixing-bug-5423-master` branch and PR to the `master` branch.
-
-# Environment variables
-The environment variables are a syntactic sugar for pointing out the location of the resources used in a topic.
-These variables are defined in the [**environment.json**](https://github.com/IgniteUI/igniteui-docfx/blob/master/en/environment.json) file of a docfx project. Each environment variable is replaced with its corresponding value during build time.
-
-# Code View Configuration
-
-If you want to add a sample and introduce the code behind this sample to the readers, you have to add a ```
-
-```
-
-Here is a brief explanation of how the code view element works. For each sample (grid-sample-1) a .json file is created (grid--grid-sample-1.json). Each .json file contains the source code of the sample.
-All of the `.json` files are located under `/assets/samples` of [igniteui-angular-samples](https://github.com/IgniteUI/igniteui-angular-samples/) project.
-
-> Note: Samples without a respective .json file are still rendered in the code view, but the code tabs and the footer will be omitted.
-
-# Add/Change environment variables
-Our samples are embedded in the topics with iframes. Some topics have more than one sample and in order to prevent loading delays, we've added lazy loading functionality of [the iframes](https://github.com/IgniteUI/igniteui-docfx-template/issues/75). In order to achieve this we use [lazysizes](https://www.npmjs.com/package/lazysizes#recommendedpossible-markup-patterns) library.
-
-Follow the steps below for lazy loading implementation in a topic ([PR example](https://github.com/IgniteUI/igniteui-docfx/pull/1001/files#diff-52bafd164f6207a20517090ad21d7a6aR13)):
-1. Generally the first sample should not be lazily loaded. Add `loading` class to the sample container and: `onload="onSampleIframeContentLoaded(this);` on the `iframe`.
-2. For all of the sample you'd like to load lazily, add
-- `loading` class to the sample container
-- `lazyload` class to the `iframe`
-- rename the `src` of the iframe to `data-src`
-- you shouldn't have `onload="onSampleIframeContentLoaded(this);"`
-
-# Creating shared help topics
-[Here](https://github.com/IgniteUI/igniteui-docfx/wiki/Creating-Shared-Help-Topics) you can find the document which describes how to create a shared topic (template) which is used to produce separate topics for a particular features. For example shared templates for IgxGrid, IgxTreeGrid and/or IgxHierarchicalGrid components.
-
-# Updating of Data Visualization related topics
-Our cross platform docs are in `internal repo`.
-
-If you need to update the cross platform docs, please do so from the [`igniteui-xplat-doc`](https://github.com/IgniteUI/igniteui-xplat-docs) repo, queue an Angular build from `AngularDocFX_EN` build definition in the `igniteui-xplat-doc` repository, and then approve the PR that will come into public repo from ESShared.
-
-# Adding of images in the topic
-When there is a need to add image (png, jpeg and etc.) to a topic use the following guidance:
-- add `b-lazy` and `responsive-img` classes - these are responsible for the lazy loading and part of the image responsiveness
-- always add the image as part of the `images` folder.
-- define `data-srcset` with 480w, 768w and 1100w
-- set `alt` and `title` attributes
-
-
-Example:
-
-```html
-
-
-```
\ No newline at end of file
diff --git a/docs/angular/README.md b/docs/angular/README.md
deleted file mode 100644
index fa1501b140..0000000000
--- a/docs/angular/README.md
+++ /dev/null
@@ -1,198 +0,0 @@
-# Ignite UI for Angular Docs (Astro + Starlight)
-
-The Astro-based migration of the [igniteui-docfx](https://github.com/IgniteUI/igniteui-docfx) documentation site for Ignite UI for Angular. Built with [Astro Starlight](https://starlight.astro.build) and the internal `docs-template` integration.
-
----
-
-## Prerequisites
-
-- **Node.js** 18 or later
-- **docs-template** package at `C:/Repos/docs/docs-template`
- (referenced as a `file:` dependency in `package.json`)
-
----
-
-## Getting started
-
-```bash
-npm install
-npm run dev # English, development env → http://localhost:4321
-```
-
----
-
-## Build commands
-
-The build depends on two environment variables:
-
-| Variable | Values | Default |
-| :---------- | :---------------------------------------- | :------------ |
-| `NODE_ENV` | `development`, `staging`, `production` | `development` |
-| `DOCS_LANG` | `en`, `jp`, `kr` | `en` |
-
-All combinations are available as npm scripts:
-
-### Development server
-
-```bash
-npm run dev # English (default)
-npm run dev:en # English (explicit)
-npm run dev:jp # Japanese
-npm run dev:kr # Korean
-```
-
-### Build (development URLs)
-
-```bash
-npm run build # English (default)
-npm run build:en # English (explicit)
-npm run build:jp # Japanese
-npm run build:kr # Korean
-```
-
-### Build for staging
-
-```bash
-npm run build-staging # English (default)
-npm run build-staging:en # English (explicit)
-npm run build-staging:jp # Japanese
-npm run build-staging:kr # Korean
-```
-
-### Build for production
-
-```bash
-npm run build-production # English (default)
-npm run build-production:en # English (explicit)
-npm run build-production:jp # Japanese
-npm run build-production:kr # Korean
-```
-
-### Preview
-
-```bash
-npm run preview # serve the last build locally
-```
-
----
-
-## Environment variables
-
-Documentation uses `{environment:variableName}` tokens inside markdown that are resolved **at build time**.
-
-All variable values are defined in each language's `environment.json` (e.g. `src/content/en/environment.json`), keyed by `NODE_ENV` (`development`, `staging`, `production`).
-
-At startup, `astro.config.mjs` reads `NODE_ENV` and `DOCS_LANG`. The `remark-docfx` plugin (from `docs-template`) resolves every `{environment:key}` token at render time using the matching variable set from `environment.json`.
-
-Key variables:
-
-| Token | Description |
-| :---- | :---------- |
-| `{environment:demosBaseUrl}` | Base URL for Angular sample iframes |
-| `{environment:dvDemosBaseUrl}` | Data Visualization samples base URL |
-| `{environment:lobDemosBaseUrl}` | LOB samples base URL |
-| `{environment:angularApiUrl}` | TypeScript API docs base URL |
-| `{environment:sassApiUrl}` | SASS API docs base URL |
-| `{environment:infragisticsBaseUrl}` | Main Infragistics site base URL |
-
-You can also set these via a `.env` file at the project root:
-
-```
-NODE_ENV=development
-DOCS_LANG=en
-```
-
----
-
-## How it works
-
-### 1. Content source
-
-Markdown files live in `src/content/{lang}/` (e.g. `src/content/en/`). They are either:
-
-- **Flat docs** — individual `.md` files (e.g. `accordion.md`, `calendar.md`).
-- **Grid template pages** — shared templates in `src/content/{lang}/grids_templates/` expanded at build time into per-variant pages.
-
-### 2. Grid page generation (`src/generate-grids.mjs`)
-
-Grid, Tree Grid, Hierarchical Grid, and Pivot Grid share documentation via DocFX-style conditional templates:
-
-```
-@@if (igxName === 'IgxGrid') { ... }
-@@if (igxName === 'IgxTreeGrid') { ... }
-```
-
-`generateGridTopics()` runs before Astro starts, evaluates the `@@if` blocks and replaces `@@variable` placeholders for each grid variant, writing resolved files into `src/content/{lang}/grid/`, `treegrid/`, `hierarchicalgrid/`, and `pivotGrid/`.
-
-### 3. Environment token resolution
-
-The `remark-docfx` plugin (from `docs-template`) resolves `{environment:key}` tokens at render time using the values from `src/content/{lang}/environment.json` matching the current `NODE_ENV`.
-
-### 4. Image path normalization
-
-`normalizeImagePaths()` rewrites relative `../images/` paths to absolute `/images/` so Astro resolves them from `public/`.
-
-### 5. Navigation (`src/content/{lang}/toc.json`)
-
-The sidebar is driven by `toc.json`, consumed by the `docs-template` integration via `source.tocPath`.
-
-### 6. Site configuration (`astro.config.mjs`)
-
-```js
-createDocsSite({
- site: 'https://www.infragistics.com/products/ignite-ui-angular',
- platform: 'angular',
- navLang: docsLang,
- mode, // 'development' | 'staging' | 'production'
- source: {
- tocPath: `./src/content/${docsLang}/toc.json`,
- docsDir: `./src/content/${docsLang}`,
- },
-})
-```
-
----
-
-## Project structure
-
-```
-.
-├── .github/
-│ └── CONTRIBUTING.md Contribution guidelines
-├── public/
-│ └── images/ Static images referenced by docs
-├── scripts/
-│ └── sync-docfx.mjs Pull content from igniteui-docfx
-├── src/
-│ ├── content/
-│ │ ├── en/ English docs + toc.json + environment.json
-│ │ ├── jp/ Japanese docs + toc.json + environment.json
-│ │ └── kr/ Korean docs + toc.json + environment.json
-│ │ ├── grids_templates/ Shared @@if-templated source files
-│ │ ├── grid/ Generated IgxGrid pages
-│ │ ├── treegrid/ Generated IgxTreeGrid pages
-│ │ ├── hierarchicalgrid/ Generated IgxHierarchicalGrid pages
-│ │ ├── pivotGrid/ Generated IgxPivotGrid pages
-│ │ ├── toc.json Sidebar navigation
-│ │ └── environment.json Environment variables (dev/staging/prod)
-│ ├── content.config.ts Astro content collection schema
-│ ├── generate-grids.mjs Build-time grid page generator
-├── astro.config.mjs Main site config (grid gen, createDocsSite)
-└── package.json Build scripts for all lang/env combinations
-```
-
----
-
-## Migrated from igniteui-docfx
-
-This project replaces the DocFX + Gulp build pipeline with Astro + Starlight. Key changes:
-
-| DocFX | Astro |
-| :---- | :---- |
-| `gulp serve --lang en` | `npm run dev:en` |
-| `cross-env NODE_ENV=staging gulp build --lang jp` | `npm run build-staging:jp` |
-| `cross-env NODE_ENV=production gulp build --lang kr` | `npm run build-production:kr` |
-| DocFX `docfx.json` | `astro.config.mjs` + `createDocsSite()` |
-| `gulp-file-include` (@@if/@@var) | `src/generate-grids.mjs` |
-| `environment.json` per locale dir | `src/content/{lang}/environment.json` per locale |
-| DocFX template (`igniteui-docfx-template`) | `docs-template` Astro integration |
diff --git a/docs/angular/scripts/generate.mjs b/docs/angular/scripts/generate.mjs
index 6b6c2c1da7..522737e41b 100644
--- a/docs/angular/scripts/generate.mjs
+++ b/docs/angular/scripts/generate.mjs
@@ -1,6 +1,7 @@
import { writeFileSync, rmSync, existsSync } from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
+import { generateGridTopics } from '../src/scripts/generate-grids.mjs';
const args = process.argv.slice(2);
const get = (prefix) => args.find(a => a.startsWith(prefix))?.split('=')[1];
@@ -12,6 +13,11 @@ const ROOT = path.join(path.dirname(fileURLToPath(import.meta.url)), '..');
writeFileSync(path.join(ROOT, '.platform.json'), JSON.stringify({ platform: 'Angular', lang: LANG }, null, 2));
console.log(`[generate] lang: ${LANG}`);
+// Generate per-grid-variant MDX files from grids_templates/ so that
+// check-relative-links:ci can validate the generated pages without starting Astro.
+const docsDir = path.join(ROOT, 'src', 'content', LANG);
+generateGridTopics(path.join(docsDir, 'grids_templates'), path.join(docsDir, 'components'));
+
// Clear Astro's content cache so the next build picks up fresh content
const cache = path.join(ROOT, '.astro');
if (existsSync(cache)) {
diff --git a/docs/angular/src/content/en/.gitignore b/docs/angular/src/content/en/.gitignore
index bf43056a16..7aae44cd45 100644
--- a/docs/angular/src/content/en/.gitignore
+++ b/docs/angular/src/content/en/.gitignore
@@ -15,6 +15,8 @@ components/treegrid/*.md
components/treegrid/*.mdx
components/hierarchicalgrid/*.md
components/hierarchicalgrid/*.mdx
+components/pivotgrid/*.md
+components/pivotgrid/*.mdx
components/pivotGrid/*.md
components/pivotGrid/*.mdx
@@ -45,6 +47,12 @@ components/pivotGrid/*.mdx
!components/hierarchicalgrid/load-on-demand.mdx
# All pivot grid specific files that should NOT be ignored:
+!components/pivotgrid/pivot-grid.md
+!components/pivotgrid/pivot-grid-features.md
+!components/pivotgrid/pivot-grid-custom.md
+!components/pivotgrid/pivot-grid.mdx
+!components/pivotgrid/pivot-grid-features.mdx
+!components/pivotgrid/pivot-grid-custom.mdx
!components/pivotGrid/pivot-grid.md
!components/pivotGrid/pivot-grid-features.md
!components/pivotGrid/pivot-grid-custom.md
diff --git a/docs/angular/src/content/en/components/action-strip.mdx b/docs/angular/src/content/en/components/action-strip.mdx
index 7b4caadeb1..5fb9dc7627 100644
--- a/docs/angular/src/content/en/components/action-strip.mdx
+++ b/docs/angular/src/content/en/components/action-strip.mdx
@@ -163,7 +163,7 @@ When `IgxActionStripComponent` is a child component of the grid, hovering a row
-More information about how to use ActionStrip in the grid component could be found in the [Grid Row Actions documentation](/components/grid/row-actions.html).
+More information about how to use ActionStrip in the grid component could be found in the [Grid Row Actions documentation](./grid/row-actions.mdx).
## Styling
diff --git a/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx b/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx
index e31ab2b743..a42367b6f9 100644
--- a/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx
+++ b/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx
@@ -114,7 +114,7 @@ Agent Skills are structured, developer-owned packages that tell AI coding assist
Ignite UI ships dedicated Skill packages for Angular, React, Web Components, and Blazor. The Skill package is developer-owned: edit the `SKILL.md` to match your team's conventions, add project-specific patterns, reference your internal design system, and version the package alongside your codebase.
-For full setup instructions and IDE wiring, see [Agent Skills](skills.md).
+For full setup instructions and IDE wiring, see [Agent Skills](skills.mdx).
## CLI MCP Server
@@ -126,7 +126,7 @@ The CLI MCP server runs via `npx` without a global install:
npx -y igniteui-cli mcp
```
-Use `ai-config` to write the MCP configuration for your AI client automatically. The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see [CLI MCP](cli-mcp.md) for the full setup guide.
+Use `ai-config` to write the MCP configuration for your AI client automatically. The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see [CLI MCP](cli-mcp.mdx) for the full setup guide.
It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts.
@@ -142,7 +142,7 @@ npx -y igniteui-theming igniteui-theming-mcp
The Theming MCP server supports Angular, React, Web Components, and Blazor. It updates with every Ignite UI release so agents always work against the current token surface.
-For configuration details, see [Theming MCP](theming-mcp.md).
+For configuration details, see [Theming MCP](theming-mcp.mdx).
## Supported AI Clients
@@ -205,7 +205,7 @@ The Skill package ships with the library in `node_modules/igniteui-{framework}/s
Wire it to your IDE using the persistent setup for your client.
-See [Agent Skills](skills.md) for the complete setup.
+See [Agent Skills](skills.mdx) for the complete setup.
### Step 2 - Connect the CLI MCP Server
@@ -237,7 +237,7 @@ Add the `igniteui-cli` MCP server entry to the configuration file for your AI cl
}
```
-For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP-compatible clients, see [CLI MCP](cli-mcp.md).
+For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP-compatible clients, see [CLI MCP](cli-mcp.mdx).
### Step 3 - Connect the Theming MCP Server (optional)
@@ -269,13 +269,13 @@ Add the `igniteui-theming` entry to the same MCP configuration file, alongside `
}
```
-For configuration details and theming workflows, see [Theming MCP](theming-mcp.md).
+For configuration details and theming workflows, see [Theming MCP](theming-mcp.mdx).
## Additional Resources
-- [Agent Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [Agent Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/cli-mcp.mdx b/docs/angular/src/content/en/components/ai/cli-mcp.mdx
index 419983b0fa..3d783fa41c 100644
--- a/docs/angular/src/content/en/components/ai/cli-mcp.mdx
+++ b/docs/angular/src/content/en/components/ai/cli-mcp.mdx
@@ -18,7 +18,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
## Overview
-Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside [Ignite UI Theming MCP](./theming-mcp.md). CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.
+Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside [Ignite UI Theming MCP](./theming-mcp.mdx). CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.
The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and prompts you to choose which AI clients and agents to configure. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists.
@@ -425,9 +425,9 @@ Validate that the JSON uses the `mcpServers` structure and that each local serve
## Additional Resources
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [Ignite UI for Angular Skills](./skills.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [Ignite UI for Angular Skills](./skills.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/maker-framework.mdx b/docs/angular/src/content/en/components/ai/maker-framework.mdx
index 8661cf69f4..905ec51cd9 100644
--- a/docs/angular/src/content/en/components/ai/maker-framework.mdx
+++ b/docs/angular/src/content/en/components/ai/maker-framework.mdx
@@ -13,7 +13,7 @@ mentionedTypes: []
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. MAKER stands for Maximal Agentic decomposition, first-to-ahead-by-K Error correction, and Red-flagging. The framework is based on the research paper _Solving a million-step LLM task with zero errors_ by Cognizant AI Lab. It runs as an MCP server via `npx` from the `@igniteui` GitHub Packages registry and connects to any MCP-compatible AI client through STDIO transport. Once connected, the AI assistant can invoke three tools - `plan`, `execute`, and `plan_and_execute` - to run long-horizon tasks with automatic error detection and correction.
-The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.md). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry.
+The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.mdx). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry.
## How MAKER Works
@@ -221,10 +221,10 @@ The binary cache location can be overridden with the `MAKER_MCP_CACHE` environme
## Additional Resources
-- [AI-Assisted Development Overview](ai-assisted-development-overview.md)
-- [Agent Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development Overview](ai-assisted-development-overview.mdx)
+- [Agent Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/skills.mdx b/docs/angular/src/content/en/components/ai/skills.mdx
index 3a95886d6c..bd88a0c726 100644
--- a/docs/angular/src/content/en/components/ai/skills.mdx
+++ b/docs/angular/src/content/en/components/ai/skills.mdx
@@ -255,9 +255,9 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](/a
- Getting Started with Ignite UI for Angular
- Angular Schematics & Ignite UI CLI
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/theming-mcp.mdx b/docs/angular/src/content/en/components/ai/theming-mcp.mdx
index a187ea6508..a581c90664 100644
--- a/docs/angular/src/content/en/components/ai/theming-mcp.mdx
+++ b/docs/angular/src/content/en/components/ai/theming-mcp.mdx
@@ -349,19 +349,19 @@ Also confirm that `core()` is called before any other theming mixin in your `sty
## Additional Resources
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [Ignite UI for Angular Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [MAKER Framework](./maker-framework.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [Ignite UI for Angular Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [MAKER Framework](./maker-framework.mdx)
{/* Ideally these should be included once documentation is combined
-- [Theming Overview](../themes/index)
-- [Palettes](../themes/palettes)
-- [Typography](../themes/typography)
-- [Elevations](../themes/elevations)
-- [Spacing](../themes/spacing)
-- [Roundness](../themes/roundness)
-- [Theming with Sass](../themes/sass/index)
+- [Theming Overview](../themes/index.mdx)
+- [Palettes](../themes/palettes.mdx)
+- [Typography](../themes/typography.mdx)
+- [Elevations](../themes/elevations.mdx)
+- [Spacing](../themes/spacing.mdx)
+- [Roundness](../themes/roundness.mdx)
+- [Theming with Sass](../themes/sass/index.mdx)
*/}
diff --git a/docs/angular/src/content/en/components/banner.mdx b/docs/angular/src/content/en/components/banner.mdx
index 7ca75f5d91..91ccea7456 100644
--- a/docs/angular/src/content/en/components/banner.mdx
+++ b/docs/angular/src/content/en/components/banner.mdx
@@ -29,7 +29,7 @@ To get started with the Ignite UI for Angular Banner component, first you need t
ng add igniteui-angular
```
-For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
+For a complete introduction to the Ignite UI for Angular, read the [_getting started_](./general/getting-started.mdx) topic.
The next step is to import the `IgxBannerModule` in your **app.module.ts** file.
@@ -117,7 +117,7 @@ Configuring the message displayed in the banner is easy - just change the conten
### Adding an icon
-An [`igx-icon`](/icon) can be displayed in the banner by passing it to the banner's content. The icon will always be positioned at the beginning of the banner message.
+An [`igx-icon`](./icon.mdx) can be displayed in the banner by passing it to the banner's content. The icon will always be positioned at the beginning of the banner message.
If several `igx-icon` elements are inserted as direct descendants of the banner, the banner will try to position all of them at the beginning. It is strongly advised to pass only one `igx-icon` directly to the banner.
@@ -278,7 +278,7 @@ $custom-banner-theme: banner-theme(
```
-Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the
The last step is to pass the custom banner theme:
diff --git a/docs/angular/src/content/en/components/bullet-graph.mdx b/docs/angular/src/content/en/components/bullet-graph.mdx
index 9896a0cc00..e616b1d40e 100644
--- a/docs/angular/src/content/en/components/bullet-graph.mdx
+++ b/docs/angular/src/content/en/components/bullet-graph.mdx
@@ -323,5 +323,5 @@ For your convenience, all above code snippets are combined into one code block b
You can find more information about other types of gauges in these topics:
-- [Linear Gauge](Linear-gauge.md)
-- [Radial Gauge](radial-gauge.md)
+- [Linear Gauge](linear-gauge.mdx)
+- [Radial Gauge](radial-gauge.mdx)
diff --git a/docs/angular/src/content/en/components/charts/chart-api.mdx b/docs/angular/src/content/en/components/charts/chart-api.mdx
index fb694797a0..f833a7bfa1 100644
--- a/docs/angular/src/content/en/components/charts/chart-api.mdx
+++ b/docs/angular/src/content/en/components/charts/chart-api.mdx
@@ -34,7 +34,7 @@ The Angular
-
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
|
+| -
-
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
|
The Angular
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
- and [many more](types/stock-chart.md) |
+| -
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
- and [many more](types/stock-chart.mdx) |
| Radial Series | Polar Series |
|---------------|--------------|
@@ -116,5 +116,5 @@ The Angular
+For `BubbleSeries`, the `MarkerSize` property does not override the bubble radius, which is controlled by the radius data column and the `RadiusScale`. Bubble sizes remain entirely driven by the data and scale configuration.
+
+
+
+
+## Angular Chart Checkmark Marker Type
+
+The Ignite UI for Angular charts include a `Checkmark` option in the `MarkerType` enum. This marker renders a V-shaped checkmark icon inside a circle on data points in your chart.
+
+You can apply the `Checkmark` marker type to an individual series by setting its `MarkerType` property to `MarkerType.Checkmark`. To use the checkmark shape for all series in the chart simultaneously, set the chart's `MarkerAutomaticBehavior` property to `MarkerAutomaticBehavior.Checkmark`.
+
+The `SeriesViewer.CheckmarkMarkerTemplate` property defines the marker template used for series with a checkmark marker type, and can be used to customize its appearance across the chart.
+
+
+
## Angular Chart Marker Templates
In addition to marker properties, you can implement your own marker by setting a function to the
- [Donut Chart](../types/donut-chart.md)
- [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart) |
-| Line Charts | - [Category Line Chart](../types/line-chart.md#angular-line-chart-example)
- [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example)
- [Step Line Chart](../types/step-chart.md#angular-step-line-chart)
- [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart)
- [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart)
- [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*)
- [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart)
- [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart)
|
-| Area Charts | - [Category Area Chart](../types/area-chart.md#angular-area-chart-example)
- [Step Area Chart](../types/step-chart.md#angular-step-area-chart)
- [Range Area Chart](../types/area-chart.md#angular-range-area-chart)
- [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart)
- [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart)
- [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*)
- [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart)
- [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart)
|
-| Column Charts | - [Column Chart](../types/column-chart.md#angular-column-chart-example)
- [Bar Chart](../types/bar-chart.md#angular-bar-chart-example)
- [Waterfall Chart](../types/column-chart.md#angular-waterfall-chart)
- [Range Column Chart](../types/column-chart.md#angular-range-column-chart)
- [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart) |
-| Spline Charts | - [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example)
- [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart)
- [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart)
- [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart)
|
-| Point Charts | - [Category Point Chart](../types/point-chart.md)
- [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart)
|
-| Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.md)
- [Stock Chart in Column Mode](../types/stock-chart.md)
- [Stock Chart in Bar Mode](../types/stock-chart.md)
- [Stock Chart in Candle Mode](../types/stock-chart.md)
- [Stock Chart with Overlays](../types/stock-chart.md)
- [Stock Chart with Zoom Pane](../types/stock-chart.md)
- [Stock Chart with Volume Pane](../types/stock-chart.md#volume-pane)
- [Stock Chart with Indicator Pane](../types/stock-chart.md#indicator-pane)
|
-| Scatter Charts | - [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart)
- [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart)
- [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart)
- [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*)
- [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*)
|
-| Radial Charts | - [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart)
- [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart)
- [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart)
- [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart)
|
-| Polar Charts | - [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart)
- [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart)
- [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart)
- [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart)
- [Polar Spline Area Chart](../types/polar-chart.md#angular-polar-spline-area-chart)
|
-| Stacked Charts | - [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart)
- [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart)
- [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart)
- [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart)
|
-
-\* Note that the [Scatter Polygon Chart](../types/shape-chart.md) and [Scatter Polyline Chart](../types/shape-chart.md) have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see [Series Collection](#series-collection) section. Otherwise, other chart types are faster.
+| Pie Charts | - [Pie Chart](../types/pie-chart.mdx)
- [Donut Chart](../types/donut-chart.mdx)
- [Radial Pie Chart](../types/radial-chart.mdx#angular-radial-pie-chart) |
+| Line Charts | - [Category Line Chart](../types/line-chart.mdx#angular-line-chart-example)
- [Category Spline Chart](../types/spline-chart.mdx#angular-spline-chart-example)
- [Step Line Chart](../types/step-chart.mdx#angular-step-line-chart)
- [Radial Line Chart](../types/radial-chart.mdx#angular-radial-line-chart)
- [Polar Line Chart](../types/polar-chart.mdx#angular-polar-line-chart)
- [Scatter Line Chart](../types/scatter-chart.mdx#angular-scatter-line-chart)
- [Scatter Polyline Chart](../types/shape-chart.mdx#angular-scatter-polyline-chart) (\*)
- [Scatter Contour Chart](../types/scatter-chart.mdx#angular-scatter-contour-chart)
- [Stacked Line Chart](../types/stacked-chart.mdx#angular-stacked-line-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.mdx#angular-stacked-100-line-chart)
|
+| Area Charts | - [Category Area Chart](../types/area-chart.mdx#angular-area-chart-example)
- [Step Area Chart](../types/step-chart.mdx#angular-step-area-chart)
- [Range Area Chart](../types/area-chart.mdx#angular-range-area-chart)
- [Radial Area Chart](../types/radial-chart.mdx#angular-radial-area-chart)
- [Polar Area Chart](../types/polar-chart.mdx#angular-polar-area-chart)
- [Scatter Polygon Chart](../types/shape-chart.mdx#angular-scatter-polygon-chart) (\*)
- [Scatter Area Chart](../types/scatter-chart.mdx#angular-scatter-area-chart)
- [Stacked Area Chart](../types/stacked-chart.mdx#angular-stacked-area-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.mdx#angular-stacked-100-area-chart)
|
+| Column Charts | - [Column Chart](../types/column-chart.mdx#angular-column-chart-example)
- [Bar Chart](../types/bar-chart.mdx#angular-bar-chart-example)
- [Waterfall Chart](../types/column-chart.mdx#angular-waterfall-chart)
- [Range Column Chart](../types/column-chart.mdx#angular-range-column-chart)
- [Range Bar Chart](../types/bar-chart.mdx#angular-range-bar-chart)
- [Radial Column Chart](../types/radial-chart.mdx#angular-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.mdx#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.mdx#angular-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.mdx#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.mdx#angular-stacked-100-bar-chart) |
+| Spline Charts | - [Category Spline Chart](../types/spline-chart.mdx#angular-spline-chart-example)
- [Polar Spline Chart](../types/polar-chart.mdx#angular-polar-spline-chart)
- [Scatter Spline Chart](../types/scatter-chart.mdx#angular-scatter-spline-chart)
- [Stacked Spline Chart](../types/stacked-chart.mdx#angular-stacked-spline-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.mdx#angular-stacked-100-spline-chart)
|
+| Point Charts | - [Category Point Chart](../types/point-chart.mdx)
- [Scatter HD Chart](../types/scatter-chart.mdx#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.mdx#angular-scatter-marker-chart)
- [Scatter Bubble Chart](../types/bubble-chart.mdx)
- [Polar Marker Chart](../types/polar-chart.mdx#angular-polar-marker-chart)
|
+| Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.mdx)
- [Stock Chart in Column Mode](../types/stock-chart.mdx)
- [Stock Chart in Bar Mode](../types/stock-chart.mdx)
- [Stock Chart in Candle Mode](../types/stock-chart.mdx)
- [Stock Chart with Overlays](../types/stock-chart.mdx)
- [Stock Chart with Zoom Pane](../types/stock-chart.mdx)
- [Stock Chart with Volume Pane](../types/stock-chart.mdx#volume-pane)
- [Stock Chart with Indicator Pane](../types/stock-chart.mdx#indicator-pane)
|
+| Scatter Charts | - [Scatter HD Chart](../types/scatter-chart.mdx#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.mdx#angular-scatter-marker-chart)
- [Scatter Line Chart](../types/scatter-chart.mdx#angular-scatter-line-chart)
- [Scatter Bubble Chart](../types/bubble-chart.mdx)
- [Scatter Spline Chart](../types/scatter-chart.mdx#angular-scatter-spline-chart)
- [Scatter Area Chart](../types/scatter-chart.mdx#angular-scatter-area-chart)
- [Scatter Contour Chart](../types/scatter-chart.mdx#angular-scatter-contour-chart)
- [Scatter Polyline Chart](../types/shape-chart.mdx#angular-scatter-polyline-chart) (\*)
- [Scatter Polygon Chart](../types/shape-chart.mdx#angular-scatter-polygon-chart) (\*)
|
+| Radial Charts | - [Radial Line Chart](../types/radial-chart.mdx#angular-radial-line-chart)
- [Radial Area Chart](../types/radial-chart.mdx#angular-radial-area-chart)
- [Radial Pie Chart](../types/radial-chart.mdx#angular-radial-pie-chart)
- [Radial Column Chart](../types/radial-chart.mdx#angular-radial-column-chart)
|
+| Polar Charts | - [Polar Marker Chart](../types/polar-chart.mdx#angular-polar-marker-chart)
- [Polar Line Chart](../types/polar-chart.mdx#angular-polar-line-chart)
- [Polar Area Chart](../types/polar-chart.mdx#angular-polar-area-chart)
- [Polar Spline Chart](../types/polar-chart.mdx#angular-polar-spline-chart)
- [Polar Spline Area Chart](../types/polar-chart.mdx#angular-polar-spline-area-chart)
|
+| Stacked Charts | - [Stacked Line Chart](../types/stacked-chart.mdx#angular-stacked-line-chart)
- [Stacked Area Chart](../types/stacked-chart.mdx#angular-stacked-area-chart)
- [Stacked Column Chart](../types/stacked-chart.mdx#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.mdx#angular-stacked-bar-chart)
- [Stacked Spline Chart](../types/stacked-chart.mdx#angular-stacked-spline-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.mdx#angular-stacked-100-line-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.mdx#angular-stacked-100-area-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.mdx#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.mdx#angular-stacked-100-bar-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.mdx#angular-stacked-100-spline-chart)
|
+
+\* Note that the [Scatter Polygon Chart](../types/shape-chart.mdx) and [Scatter Polyline Chart](../types/shape-chart.mdx) have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see [Series Collection](#series-collection) section. Otherwise, other chart types are faster.
### Chart Animations
-Enabling [Chart Animations](chart-animations.md) will slightly delay final rendering series in the Angular charts while they play transition-in animations.
+Enabling [Chart Animations](chart-animations.mdx) will slightly delay final rendering series in the Angular charts while they play transition-in animations.
### Chart Annotations
-Enabling [Chart Annotations](chart-annotations.md) such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the Angular chart.
+Enabling [Chart Annotations](chart-annotations.mdx) such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the Angular chart.
### Chart Highlighting
-Enabling the [Chart Highlighting](chart-highlighting.md) will slightly decrease performance of the Angular chart.
+Enabling the [Chart Highlighting](chart-highlighting.mdx) will slightly decrease performance of the Angular chart.
### Chart Legend
@@ -124,7 +124,7 @@ Adding a legend to the Angular charts might decrease performance if titles of se
### Chart Markers
-In Angular charts, [Markers](chart-markers.md) are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart.
+In Angular charts, [Markers](chart-markers.mdx) are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart.
This code snippet shows how to remove markers from the Angular charts.
@@ -155,11 +155,11 @@ this.LineSeries.Resolution = 10;
### Chart Overlays
-Enabling [Chart Overlays](chart-overlays.md) will slightly decrease performance of the Angular chart.
+Enabling [Chart Overlays](chart-overlays.mdx) will slightly decrease performance of the Angular chart.
### Chart Trendlines
-Enabling [Chart Trendlines](chart-trendlines.md) will slightly decrease performance of the Angular chart.
+Enabling [Chart Trendlines](chart-trendlines.mdx) will slightly decrease performance of the Angular chart.
### Axis Types
@@ -315,7 +315,7 @@ In addition to the general performance guidelines, the Angular --framework=angular --type=igx-ts`), component scaffolding (`ig add`), a development server (`ig start`), and a built-in MCP server for AI assistant integration (`ig mcp`).
-For setup instructions and all available commands, see [Getting Started with Ignite UI CLI](./cli/getting-started-with-cli).
+For setup instructions and all available commands, see [Getting Started with Ignite UI CLI](./cli/getting-started-with-cli.mdx).
## Ignite UI for Angular Schematics
@@ -25,14 +25,14 @@ For setup instructions and all available commands, see [Getting Started with Ign
The Schematics collection provides the same core project templates and component views as the CLI, within the native Angular CLI workflow. It does not include the MCP server - for AI assistant integration, use the Ignite UI CLI alongside your Angular CLI project.
-For setup instructions see [Getting Started with Ignite UI for Angular Schematics](./cli/getting-started-with-angular-schematics).
+For setup instructions see [Getting Started with Ignite UI for Angular Schematics](./cli/getting-started-with-angular-schematics.mdx).
## Step-by-Step Guides
Both tools support a guided interactive mode and a direct command mode:
-- [Step-by-Step Guide Using Ignite UI CLI](./cli/step-by-step-guide-using-cli)
-- [Step-by-Step Guide Using Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics)
+- [Step-by-Step Guide Using Ignite UI CLI](./cli/step-by-step-guide-using-cli.mdx)
+- [Step-by-Step Guide Using Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.mdx)
## AI Assistant Integration (MCP)
@@ -44,4 +44,4 @@ Start the MCP server with:
ig mcp
```
-For client configuration (VS Code, Claude Desktop, Cursor) and a description of available tools, see [Ignite UI CLI MCP](../ai/cli-mcp).
+For client configuration (VS Code, Claude Desktop, Cursor) and a description of available tools, see [Ignite UI CLI MCP](../ai/cli-mcp.mdx).
diff --git a/docs/angular/src/content/en/components/general/cli/auth-template.mdx b/docs/angular/src/content/en/components/general/cli/auth-template.mdx
index 720b3fa748..60660b30af 100644
--- a/docs/angular/src/content/en/components/general/cli/auth-template.mdx
+++ b/docs/angular/src/content/en/components/general/cli/auth-template.mdx
@@ -38,7 +38,7 @@ Answering yes generates one of two authenticated variants:
ng g @igniteui/angular-schematics:c grid newGrid
Ignite UI CLI:
ig add grid newGridBasic template for IgxGrid. | [IgxGrid](../../grid/grid.md) component with auto generated columns |
-| grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing
Ignite UI CLI:
ig add grid-batch-editing newGridBatchEditingSample IgxGrid with batch editing. | [IgxGrid](../../grid/grid.md) that uses Transaction service for [batch editing](../../grid/batch-editing.md) |
-| custom-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-grid newCustomGrid
Ignite UI CLI:
ig add custom-grid newCustomGridIgxGrid with optional features like sorting, filtering, editing, etc. | [IgxGrid](../../grid/grid.md) with optional features like [Sorting](../../grid/sorting.md), [Filtering](../../grid/filtering.md), [Cell Editing](../../grid/editing.md), [Row Editing](../../grid/row-editing.md), [Group By](../../grid/groupby.md), [Resizing](../../grid/column-resizing.md), [Selection](../../grid/selection.md), [Paging](../../grid/paging.md), [Column Pinning](../../grid/column-pinning.md), [Column Moving](../../grid/column-moving.md), [Column Hiding](../../grid/column-hiding.md) |
-| grid-summaries | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries
Ignite UI CLI:
ig add grid-summaries newGridSummariesIgxGrid with summaries feature. | [IgxGrid](../../grid/grid.md) with [summaries](../../grid/summaries.md) feature. |
-| grid-multi-column-headers | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders
Ignite UI CLI:
ig add grid-multi-column-headers newGridMultiColumnHeadersIgxGrid with multiple header columns. | [IgxGrid](../../grid/grid.md) with [multi-column headers](../../grid/multi-column-headers.md) |
-| tree grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid
Ignite UI CLI:
ig add custom-tree-grid newCustomTreeGridIgxTreeGrid with optional features like sorting, filtering, row editing, etc. | [IgxTreeGrid](../../treegrid/tree-grid.md) with optional features like [Sorting](../../treegrid/sorting.md), [Filtering](../../treegrid/filtering.md), [Cell Editing](../../treegrid/editing.md), [Row Editing](../../treegrid/row-editing.md), [Resizing](../../treegrid/column-resizing.md), [Row Selection](../../treegrid/selection.md), [Paging](../../treegrid/paging.md), [Column Pinning](../../treegrid/column-pinning.md), [Column Moving](../../treegrid/column-moving.md), [Column Hiding](../../treegrid/column-hiding.md) |
-| hierarchical-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid newHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid newHierarchicalGridBasic IgxHierarchicalGrid. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) component with auto generated columns. |
-| hierarchical-grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-batch-editing newHierarchicalGridBatchEditing
Ignite UI CLI:
ig add hierarchical-grid-batch-editing newHierarchicalGridBatchEditingIgxHierarchicalGrid with batch editing. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) that uses Transaction service for [batch editing](../../hierarchicalgrid/batch-editing.md). |
-| hierarchical-grid-custom | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-custom newCustomHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid-custom newCustomHierarchicalGridIgxHierarchicalGrid with optional features like sorting, filtering, editing, etc. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) with optional features like [Sorting](../../hierarchicalgrid/sorting.md), [Filtering](../../hierarchicalgrid/filtering.md), [Row Editing](../../hierarchicalgrid/row-editing.md), [Selection](../../hierarchicalgrid/selection.md). |
-| hierarchical-grid-summaries | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-summaries newHierarchicalGridSummaries
Ignite UI CLI:
ig add hierarchical-grid-summaries newHierarchicalGridSummariesIgxHierarchicalGrid with summaries feature. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) with [summaries](../../hierarchicalgrid/summaries.md) feature. |
-| pivot-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c pivot-grid newPivotGrid
Ignite UI CLI:
ig add pivot-grid newPivotGridBasic IgxPivotGrid. | [IgxPivotGrid](../../pivotGrid/pivot-grid.md) component for multi-dimensional data analysis. |
-| tree | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tree newTree
Ignite UI CLI:
ig add tree newTreeIgxTree with selection and load-on-demand nodes. | [IgxTree](../../tree.md) with selection and load-on-demand node support. |
-| list | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c list newList
Ignite UI CLI:
ig add list newListBasic IgxList. | [IgxList](../../list.md) with search and filtering logic. |
-| combo | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c combo newCombo
Ignite UI CLI:
ig add combo newComboBasic IgxCombo with templating. | [IgxCombo](../../combo.md) with custom [templating](../../combo-templates.md). |
+| grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid newGrid
Ignite UI CLI:
ig add grid newGridBasic template for IgxGrid. | [IgxGrid](../../grid/grid.mdx) component with auto generated columns |
+| grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing
Ignite UI CLI:
ig add grid-batch-editing newGridBatchEditingSample IgxGrid with batch editing. | [IgxGrid](../../grid/grid.mdx) that uses Transaction service for [batch editing](../../grid/batch-editing.mdx) |
+| custom-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-grid newCustomGrid
Ignite UI CLI:
ig add custom-grid newCustomGridIgxGrid with optional features like sorting, filtering, editing, etc. | [IgxGrid](../../grid/grid.mdx) with optional features like [Sorting](../../grid/sorting.mdx), [Filtering](../../grid/filtering.mdx), [Cell Editing](../../grid/editing.mdx), [Row Editing](../../grid/row-editing.mdx), [Group By](../../grid/groupby.mdx), [Resizing](../../grid/column-resizing.mdx), [Selection](../../grid/selection.mdx), [Paging](../../grid/paging.mdx), [Column Pinning](../../grid/column-pinning.mdx), [Column Moving](../../grid/column-moving.mdx), [Column Hiding](../../grid/column-hiding.mdx) |
+| grid-summaries | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries
Ignite UI CLI:
ig add grid-summaries newGridSummariesIgxGrid with summaries feature. | [IgxGrid](../../grid/grid.mdx) with [summaries](../../grid/summaries.mdx) feature. |
+| grid-multi-column-headers | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders
Ignite UI CLI:
ig add grid-multi-column-headers newGridMultiColumnHeadersIgxGrid with multiple header columns. | [IgxGrid](../../grid/grid.mdx) with [multi-column headers](../../grid/multi-column-headers.mdx) |
+| tree grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid
Ignite UI CLI:
ig add custom-tree-grid newCustomTreeGridIgxTreeGrid with optional features like sorting, filtering, row editing, etc. | [IgxTreeGrid](../../treegrid/tree-grid.mdx) with optional features like [Sorting](../../treegrid/sorting.mdx), [Filtering](../../treegrid/filtering.mdx), [Cell Editing](../../treegrid/editing.mdx), [Row Editing](../../treegrid/row-editing.mdx), [Resizing](../../treegrid/column-resizing.mdx), [Row Selection](../../treegrid/selection.mdx), [Paging](../../treegrid/paging.mdx), [Column Pinning](../../treegrid/column-pinning.mdx), [Column Moving](../../treegrid/column-moving.mdx), [Column Hiding](../../treegrid/column-hiding.mdx) |
+| hierarchical-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid newHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid newHierarchicalGridBasic IgxHierarchicalGrid. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) component with auto generated columns. |
+| hierarchical-grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-batch-editing newHierarchicalGridBatchEditing
Ignite UI CLI:
ig add hierarchical-grid-batch-editing newHierarchicalGridBatchEditingIgxHierarchicalGrid with batch editing. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) that uses Transaction service for [batch editing](../../hierarchicalgrid/batch-editing.mdx). |
+| hierarchical-grid-custom | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-custom newCustomHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid-custom newCustomHierarchicalGridIgxHierarchicalGrid with optional features like sorting, filtering, editing, etc. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) with optional features like [Sorting](../../hierarchicalgrid/sorting.mdx), [Filtering](../../hierarchicalgrid/filtering.mdx), [Row Editing](../../hierarchicalgrid/row-editing.mdx), [Selection](../../hierarchicalgrid/selection.mdx). |
+| hierarchical-grid-summaries | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-summaries newHierarchicalGridSummaries
Ignite UI CLI:
ig add hierarchical-grid-summaries newHierarchicalGridSummariesIgxHierarchicalGrid with summaries feature. | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) with [summaries](../../hierarchicalgrid/summaries.mdx) feature. |
+| pivot-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c pivot-grid newPivotGrid
Ignite UI CLI:
ig add pivot-grid newPivotGridBasic IgxPivotGrid. | [IgxPivotGrid](../../pivotgrid/pivot-grid.mdx) component for multi-dimensional data analysis. |
+| tree | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tree newTree
Ignite UI CLI:
ig add tree newTreeIgxTree with selection and load-on-demand nodes. | [IgxTree](../../tree.mdx) with selection and load-on-demand node support. |
+| list | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c list newList
Ignite UI CLI:
ig add list newListBasic IgxList. | [IgxList](../../list.mdx) with search and filtering logic. |
+| combo | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c combo newCombo
Ignite UI CLI:
ig add combo newComboBasic IgxCombo with templating. | [IgxCombo](../../combo.mdx) with custom [templating](../../combo-templates.mdx). |
| Charts | | |
-| category chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c category-chart newCategoryChart
Ignite UI CLI:
ig add category-chart newCategoryChartBasic category chart with chart type selector. | Basic [category chart](../../charts/types/column-chart.md) with chart type selector. |
-| financial chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
Ignite UI CLI:
ig add financial-chart newFinancialChartBasic financial chart with automatic toolbar and type selection. | Basic [financial chart](../../charts/types/stock-chart.md) with automatic toolbar and type selection. |
+| category chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c category-chart newCategoryChart
Ignite UI CLI:
ig add category-chart newCategoryChartBasic category chart with chart type selector. | Basic [category chart](../../charts/types/column-chart.mdx) with chart type selector. |
+| financial chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
Ignite UI CLI:
ig add financial-chart newFinancialChartBasic financial chart with automatic toolbar and type selection. | Basic [financial chart](../../charts/types/stock-chart.mdx) with automatic toolbar and type selection. |
| Gauges | | |
-| bullet graph | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph
Ignite UI CLI:
ig add bullet-graph newBulletGraphIgxBulletGraph with different animations. | [IgxBulletGraph](../../bullet-graph.md) with different animations. |
-| linear gauge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge
Ignite UI CLI:
ig add linear-gauge newLinearGaugeIgxLinearGauge with different animations. | [IgxLinearGauge](../../linear-gauge.md) with different animations. |
-| radial gauge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge
Ignite UI CLI:
ig add radial-gauge newRadialGaugeIgxRadialGauge with different animations. | [IgxRadialGauge](../../radial-gauge.md) with different animations. |
+| bullet graph | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph
Ignite UI CLI:
ig add bullet-graph newBulletGraphIgxBulletGraph with different animations. | [IgxBulletGraph](../../bullet-graph.mdx) with different animations. |
+| linear gauge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge
Ignite UI CLI:
ig add linear-gauge newLinearGaugeIgxLinearGauge with different animations. | [IgxLinearGauge](../../linear-gauge.mdx) with different animations. |
+| radial gauge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge
Ignite UI CLI:
ig add radial-gauge newRadialGaugeIgxRadialGauge with different animations. | [IgxRadialGauge](../../radial-gauge.mdx) with different animations. |
| Maps | | |
-| geographic-map | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c geographic-map newGeographicMap
Ignite UI CLI:
ig add geographic-map newGeographicMapBasic IgxGeographicMap. | [IgxGeographicMap](../../geo-map.md) displaying geo-spatial data on geographic imagery maps. |
+| geographic-map | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c geographic-map newGeographicMap
Ignite UI CLI:
ig add geographic-map newGeographicMapBasic IgxGeographicMap. | [IgxGeographicMap](../../geo-map.mdx) displaying geo-spatial data on geographic imagery maps. |
| Layouts | | |
-| dock-manager | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dock-manager newDockManager
Ignite UI CLI:
ig add dock-manager newDockManagerBasic IgcDockManager. | [IgcDockManager](../../dock-manager.md) with nine content slots. |
-| carousel | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c carousel newCarousel
Ignite UI CLI:
ig add carousel newCarouselBasic IgxCarousel. | [IgxCarousel](../../carousel.md) cycling through a series of images. |
-| tabs | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tabs newTabs
Ignite UI CLI:
ig add tabs newTabsBasic IgxTabs. | [IgxTabs](../../tabs.md) component that includes three customized tab-groups. |
-| bottom-nav | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
Ignite UI CLI:
ig add bottom-nav newBottomNavThree item bottom-nav template. | Three item bottom [navbar](../../navbar.md) template. |
-| accordion | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c accordion newAccordion
Ignite UI CLI:
ig add accordion newAccordionBasic IgxAccordion sample. | [IgxAccordion](../../accordion.md) with multiple collapsible panels in a single container. |
-| stepper | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c stepper newStepper
Ignite UI CLI:
ig add stepper newStepperBasic IgxStepper sample. | [IgxStepper](../../stepper.md) visualizing content as a process with successive steps. |
+| dock-manager | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dock-manager newDockManager
Ignite UI CLI:
ig add dock-manager newDockManagerBasic IgcDockManager. | [IgcDockManager](../../dock-manager.mdx) with nine content slots. |
+| carousel | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c carousel newCarousel
Ignite UI CLI:
ig add carousel newCarouselBasic IgxCarousel. | [IgxCarousel](../../carousel.mdx) cycling through a series of images. |
+| tabs | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tabs newTabs
Ignite UI CLI:
ig add tabs newTabsBasic IgxTabs. | [IgxTabs](../../tabs.mdx) component that includes three customized tab-groups. |
+| bottom-nav | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
Ignite UI CLI:
ig add bottom-nav newBottomNavThree item bottom-nav template. | Three item bottom [navbar](../../navbar.mdx) template. |
+| accordion | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c accordion newAccordion
Ignite UI CLI:
ig add accordion newAccordionBasic IgxAccordion sample. | [IgxAccordion](../../accordion.mdx) with multiple collapsible panels in a single container. |
+| stepper | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c stepper newStepper
Ignite UI CLI:
ig add stepper newStepperBasic IgxStepper sample. | [IgxStepper](../../stepper.mdx) visualizing content as a process with successive steps. |
| Data Entry & Display | | |
-| chip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c chip newChip
Ignite UI CLI:
ig add chip newChipBasic IgxChip. | [IgxChip](../../chip.md) components inside igx-chips-area. |
-| dropdown | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dropdown newDropDown
Ignite UI CLI:
ig add dropdown newDropDownBasic IgxDropDown. | Basic [IgxDropDown](../../drop-down.md) that displays a list of items. |
-| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select newSelect
Ignite UI CLI:
ig add select newSelectBasic IgxSelect. | Simple [IgxSelect](../../select.md) that displays a list of items. |
-| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-groups newGroupsSelect
Ignite UI CLI:
ig add select-groups newGroupsSelectSelect With Groups. | [IgxSelect](../../select.md) displaying grouped items. |
-| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-in-form newFormSelect
Ignite UI CLI:
ig add select-in-form newFormSelectIgxSelect in a form. | [IgxSelect](../../select.md) component usage in a form. |
-| input group | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c input-group newInputGroup
Ignite UI CLI:
ig add input-group newInputGroupBasic IgxInputGroup form view. | Form view created with [IgxInputGroup](../../input-group.md). |
-| autocomplete | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c autocomplete newAutocomplete
Ignite UI CLI:
ig add autocomplete newAutocompleteSimple IgxAutocomplete. | [IgxAutocomplete](../../autocomplete.md) enhancing text input with a dropdown of suggested options. |
-| enhanced-autocomplete | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c enhanced-autocomplete newEnhancedAutocomplete
Ignite UI CLI:
ig add enhanced-autocomplete newEnhancedAutocompleteIgxAutocomplete with enhanced groups. | [IgxAutocomplete](../../autocomplete.md) with grouped suggestion items. |
+| chip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c chip newChip
Ignite UI CLI:
ig add chip newChipBasic IgxChip. | [IgxChip](../../chip.mdx) components inside igx-chips-area. |
+| dropdown | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dropdown newDropDown
Ignite UI CLI:
ig add dropdown newDropDownBasic IgxDropDown. | Basic [IgxDropDown](../../drop-down.mdx) that displays a list of items. |
+| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select newSelect
Ignite UI CLI:
ig add select newSelectBasic IgxSelect. | Simple [IgxSelect](../../select.mdx) that displays a list of items. |
+| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-groups newGroupsSelect
Ignite UI CLI:
ig add select-groups newGroupsSelectSelect With Groups. | [IgxSelect](../../select.mdx) displaying grouped items. |
+| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-in-form newFormSelect
Ignite UI CLI:
ig add select-in-form newFormSelectIgxSelect in a form. | [IgxSelect](../../select.mdx) component usage in a form. |
+| input group | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c input-group newInputGroup
Ignite UI CLI:
ig add input-group newInputGroupBasic IgxInputGroup form view. | Form view created with [IgxInputGroup](../../input-group.mdx). |
+| autocomplete | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c autocomplete newAutocomplete
Ignite UI CLI:
ig add autocomplete newAutocompleteSimple IgxAutocomplete. | [IgxAutocomplete](../../autocomplete.mdx) enhancing text input with a dropdown of suggested options. |
+| enhanced-autocomplete | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c enhanced-autocomplete newEnhancedAutocomplete
Ignite UI CLI:
ig add enhanced-autocomplete newEnhancedAutocompleteIgxAutocomplete with enhanced groups. | [IgxAutocomplete](../../autocomplete.mdx) with grouped suggestion items. |
| Interactions | | |
-| dialog | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dialog newDialog
Ignite UI CLI:
ig add dialog newDialogBasic IgxDialog. | Sample of the [IgxDialog](../../dialog.md) used as a standard confirmation dialog. |
-| tooltip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tooltip newTooltip
Ignite UI CLI:
ig add tooltip newTooltipA fully customizable tooltip. | Basic tooltip created with the [IgxTooltip](../../tooltip.md). |
+| dialog | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dialog newDialog
Ignite UI CLI:
ig add dialog newDialogBasic IgxDialog. | Sample of the [IgxDialog](../../dialog.mdx) used as a standard confirmation dialog. |
+| tooltip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tooltip newTooltip
Ignite UI CLI:
ig add tooltip newTooltipA fully customizable tooltip. | Basic tooltip created with the [IgxTooltip](../../tooltip.mdx). |
| Scheduling | | |
-| date-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c date-picker newDatePicker
Ignite UI CLI:
ig add date-picker newDatePickerBasic IgxDatePicker. | Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. |
-| time-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c time-picker newTimePicker
Ignite UI CLI:
ig add time-picker newTimePickerBasic IgxTimePicker. | Basic [IgxTimePicker](../../time-picker.md) with initial value set and one-way data binding. |
-| calendar | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c calendar newCalendar
Ignite UI CLI:
ig add calendar newCalendarIgxCalendar with single selection. | Basic [IgxCalendar](../../calendar.md) with single selection. |
+| date-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c date-picker newDatePicker
Ignite UI CLI:
ig add date-picker newDatePickerBasic IgxDatePicker. | Basic [IgxDatePicker](../../date-picker.mdx) with one-way data binding. |
+| time-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c time-picker newTimePicker
Ignite UI CLI:
ig add time-picker newTimePickerBasic IgxTimePicker. | Basic [IgxTimePicker](../../time-picker.mdx) with initial value set and one-way data binding. |
+| calendar | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c calendar newCalendar
Ignite UI CLI:
ig add calendar newCalendarIgxCalendar with single selection. | Basic [IgxCalendar](../../calendar.mdx) with single selection. |
## Scenario Templates
diff --git a/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx b/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
index a35ea5f552..d66cb6623a 100644
--- a/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
+++ b/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
@@ -13,7 +13,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
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. It integrates into the native Angular CLI workflow - use it with `ng new` for project creation and `ng g` for component scaffolding, without installing a separate global tool. The collection is distributed as the `@igniteui/angular-schematics` package and is added automatically when you run `ng add igniteui-angular` on an existing Angular project.
-The Schematics collection does not run an MCP server - the MCP server process is provided by the Ignite UI CLI and starts via `npx -y igniteui-cli mcp`, where `-y` avoids the interactive `npx` confirmation prompt. The `ai-config` schematic configures the MCP client connection and copies Agent Skills without requiring a separate CLI install. The collection is specific to Angular; React, Web Components, and Blazor equivalents are covered in their respective framework documentation. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](../getting-started).
+The Schematics collection does not run an MCP server - the MCP server process is provided by the Ignite UI CLI and starts via `npx -y igniteui-cli mcp`, where `-y` avoids the interactive `npx` confirmation prompt. The `ai-config` schematic configures the MCP client connection and copies Agent Skills without requiring a separate CLI install. The collection is specific to Angular; React, Web Components, and Blazor equivalents are covered in their respective framework documentation. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](../getting-started.mdx).
## Install the Schematics Collection
@@ -49,7 +49,7 @@ The guided wizard is the recommended starting point for new projects. Activate i
ng new --collection="@igniteui/angular-schematics"
```
-For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics).
+For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](./step-by-step-guide-using-angular-schematics.mdx).
### Create a project directly
@@ -77,8 +77,8 @@ When using the interactive wizard, selecting `side-nav` or `side-nav-mini` trigg
| Template ID | Description |
| :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| side-nav-auth | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. |
-| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. |
+| side-nav-auth | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](./auth-template.mdx) for details. |
+| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](./auth-template.mdx) for details. |
The following arguments are available when creating a project:
@@ -144,13 +144,13 @@ The following arguments are available when creating a project:
## Add a Component Template
-To add an [available Ignite UI for Angular template](component-templates) to an existing project, use `ng generate` with the Ignite UI for Angular collection and the `component` schematic, providing the template ID and a name for the new component:
+To add an [available Ignite UI for Angular template](./component-templates.mdx) to an existing project, use `ng generate` with the Ignite UI for Angular collection and the `component` schematic, providing the template ID and a name for the new component:
```cmd
ng g @igniteui/angular-schematics:component grid newGrid
```
-Template addition is supported in projects created with the Angular Schematics, Ignite UI CLI, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics#add-component-views).
+Template addition is supported in projects created with the Angular Schematics, Ignite UI CLI, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](./step-by-step-guide-using-angular-schematics.mdx#add-component-views).
The following arguments are available when adding a template:
@@ -324,4 +324,4 @@ ig ai-config
The `ig ai-config` command configures only the two Ignite UI entries, `igniteui-cli` and `igniteui-theming`, and does not register `angular-cli`. Use `ng generate @igniteui/angular-schematics:ai-config` to get all three servers configured in a single step.
-For full setup instructions across all AI clients and Agent Skills wiring, see [Ignite UI CLI MCP](../../ai/cli-mcp).
\ No newline at end of file
+For full setup instructions across all AI clients and Agent Skills wiring, see [Ignite UI CLI MCP](../../ai/cli-mcp.mdx).
\ No newline at end of file
diff --git a/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx b/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx
index 85b4cddccb..4622a41b52 100644
--- a/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx
+++ b/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx
@@ -66,7 +66,7 @@ ig new
-
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
| +| -
-
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
| The Angular
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
- and [many more](types/stock-chart.md) | +| -
-
-
-
-
-
-
-
-
| -
-
-
-
-
-
-
-
-
- and [many more](types/stock-chart.mdx) | | Radial Series | Polar Series | |---------------|--------------| @@ -116,5 +116,5 @@ The Angular
- [Donut Chart](../types/donut-chart.md)
- [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart) | -| Line Charts | - [Category Line Chart](../types/line-chart.md#angular-line-chart-example)
- [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example)
- [Step Line Chart](../types/step-chart.md#angular-step-line-chart)
- [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart)
- [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart)
- [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*)
- [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart)
- [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart)
| -| Area Charts | - [Category Area Chart](../types/area-chart.md#angular-area-chart-example)
- [Step Area Chart](../types/step-chart.md#angular-step-area-chart)
- [Range Area Chart](../types/area-chart.md#angular-range-area-chart)
- [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart)
- [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart)
- [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*)
- [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart)
- [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart)
| -| Column Charts | - [Column Chart](../types/column-chart.md#angular-column-chart-example)
- [Bar Chart](../types/bar-chart.md#angular-bar-chart-example)
- [Waterfall Chart](../types/column-chart.md#angular-waterfall-chart)
- [Range Column Chart](../types/column-chart.md#angular-range-column-chart)
- [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart) | -| Spline Charts | - [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example)
- [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart)
- [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart)
- [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart)
| -| Point Charts | - [Category Point Chart](../types/point-chart.md)
- [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart)
| -| Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.md)
- [Stock Chart in Column Mode](../types/stock-chart.md)
- [Stock Chart in Bar Mode](../types/stock-chart.md)
- [Stock Chart in Candle Mode](../types/stock-chart.md)
- [Stock Chart with Overlays](../types/stock-chart.md)
- [Stock Chart with Zoom Pane](../types/stock-chart.md)
- [Stock Chart with Volume Pane](../types/stock-chart.md#volume-pane)
- [Stock Chart with Indicator Pane](../types/stock-chart.md#indicator-pane)
| -| Scatter Charts | - [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart)
- [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart)
- [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart)
- [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*)
- [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*)
| -| Radial Charts | - [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart)
- [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart)
- [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart)
- [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart)
| -| Polar Charts | - [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart)
- [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart)
- [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart)
- [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart)
- [Polar Spline Area Chart](../types/polar-chart.md#angular-polar-spline-area-chart)
| -| Stacked Charts | - [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart)
- [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart)
- [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart)
- [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart)
| - -\* Note that the [Scatter Polygon Chart](../types/shape-chart.md) and [Scatter Polyline Chart](../types/shape-chart.md) have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see [Series Collection](#series-collection) section. Otherwise, other chart types are faster. +| Pie Charts | - [Pie Chart](../types/pie-chart.mdx)
- [Donut Chart](../types/donut-chart.mdx)
- [Radial Pie Chart](../types/radial-chart.mdx#angular-radial-pie-chart) | +| Line Charts | - [Category Line Chart](../types/line-chart.mdx#angular-line-chart-example)
- [Category Spline Chart](../types/spline-chart.mdx#angular-spline-chart-example)
- [Step Line Chart](../types/step-chart.mdx#angular-step-line-chart)
- [Radial Line Chart](../types/radial-chart.mdx#angular-radial-line-chart)
- [Polar Line Chart](../types/polar-chart.mdx#angular-polar-line-chart)
- [Scatter Line Chart](../types/scatter-chart.mdx#angular-scatter-line-chart)
- [Scatter Polyline Chart](../types/shape-chart.mdx#angular-scatter-polyline-chart) (\*)
- [Scatter Contour Chart](../types/scatter-chart.mdx#angular-scatter-contour-chart)
- [Stacked Line Chart](../types/stacked-chart.mdx#angular-stacked-line-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.mdx#angular-stacked-100-line-chart)
| +| Area Charts | - [Category Area Chart](../types/area-chart.mdx#angular-area-chart-example)
- [Step Area Chart](../types/step-chart.mdx#angular-step-area-chart)
- [Range Area Chart](../types/area-chart.mdx#angular-range-area-chart)
- [Radial Area Chart](../types/radial-chart.mdx#angular-radial-area-chart)
- [Polar Area Chart](../types/polar-chart.mdx#angular-polar-area-chart)
- [Scatter Polygon Chart](../types/shape-chart.mdx#angular-scatter-polygon-chart) (\*)
- [Scatter Area Chart](../types/scatter-chart.mdx#angular-scatter-area-chart)
- [Stacked Area Chart](../types/stacked-chart.mdx#angular-stacked-area-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.mdx#angular-stacked-100-area-chart)
| +| Column Charts | - [Column Chart](../types/column-chart.mdx#angular-column-chart-example)
- [Bar Chart](../types/bar-chart.mdx#angular-bar-chart-example)
- [Waterfall Chart](../types/column-chart.mdx#angular-waterfall-chart)
- [Range Column Chart](../types/column-chart.mdx#angular-range-column-chart)
- [Range Bar Chart](../types/bar-chart.mdx#angular-range-bar-chart)
- [Radial Column Chart](../types/radial-chart.mdx#angular-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.mdx#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.mdx#angular-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.mdx#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.mdx#angular-stacked-100-bar-chart) | +| Spline Charts | - [Category Spline Chart](../types/spline-chart.mdx#angular-spline-chart-example)
- [Polar Spline Chart](../types/polar-chart.mdx#angular-polar-spline-chart)
- [Scatter Spline Chart](../types/scatter-chart.mdx#angular-scatter-spline-chart)
- [Stacked Spline Chart](../types/stacked-chart.mdx#angular-stacked-spline-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.mdx#angular-stacked-100-spline-chart)
| +| Point Charts | - [Category Point Chart](../types/point-chart.mdx)
- [Scatter HD Chart](../types/scatter-chart.mdx#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.mdx#angular-scatter-marker-chart)
- [Scatter Bubble Chart](../types/bubble-chart.mdx)
- [Polar Marker Chart](../types/polar-chart.mdx#angular-polar-marker-chart)
| +| Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.mdx)
- [Stock Chart in Column Mode](../types/stock-chart.mdx)
- [Stock Chart in Bar Mode](../types/stock-chart.mdx)
- [Stock Chart in Candle Mode](../types/stock-chart.mdx)
- [Stock Chart with Overlays](../types/stock-chart.mdx)
- [Stock Chart with Zoom Pane](../types/stock-chart.mdx)
- [Stock Chart with Volume Pane](../types/stock-chart.mdx#volume-pane)
- [Stock Chart with Indicator Pane](../types/stock-chart.mdx#indicator-pane)
| +| Scatter Charts | - [Scatter HD Chart](../types/scatter-chart.mdx#angular-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.mdx#angular-scatter-marker-chart)
- [Scatter Line Chart](../types/scatter-chart.mdx#angular-scatter-line-chart)
- [Scatter Bubble Chart](../types/bubble-chart.mdx)
- [Scatter Spline Chart](../types/scatter-chart.mdx#angular-scatter-spline-chart)
- [Scatter Area Chart](../types/scatter-chart.mdx#angular-scatter-area-chart)
- [Scatter Contour Chart](../types/scatter-chart.mdx#angular-scatter-contour-chart)
- [Scatter Polyline Chart](../types/shape-chart.mdx#angular-scatter-polyline-chart) (\*)
- [Scatter Polygon Chart](../types/shape-chart.mdx#angular-scatter-polygon-chart) (\*)
| +| Radial Charts | - [Radial Line Chart](../types/radial-chart.mdx#angular-radial-line-chart)
- [Radial Area Chart](../types/radial-chart.mdx#angular-radial-area-chart)
- [Radial Pie Chart](../types/radial-chart.mdx#angular-radial-pie-chart)
- [Radial Column Chart](../types/radial-chart.mdx#angular-radial-column-chart)
| +| Polar Charts | - [Polar Marker Chart](../types/polar-chart.mdx#angular-polar-marker-chart)
- [Polar Line Chart](../types/polar-chart.mdx#angular-polar-line-chart)
- [Polar Area Chart](../types/polar-chart.mdx#angular-polar-area-chart)
- [Polar Spline Chart](../types/polar-chart.mdx#angular-polar-spline-chart)
- [Polar Spline Area Chart](../types/polar-chart.mdx#angular-polar-spline-area-chart)
| +| Stacked Charts | - [Stacked Line Chart](../types/stacked-chart.mdx#angular-stacked-line-chart)
- [Stacked Area Chart](../types/stacked-chart.mdx#angular-stacked-area-chart)
- [Stacked Column Chart](../types/stacked-chart.mdx#angular-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.mdx#angular-stacked-bar-chart)
- [Stacked Spline Chart](../types/stacked-chart.mdx#angular-stacked-spline-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.mdx#angular-stacked-100-line-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.mdx#angular-stacked-100-area-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.mdx#angular-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.mdx#angular-stacked-100-bar-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.mdx#angular-stacked-100-spline-chart)
| + +\* Note that the [Scatter Polygon Chart](../types/shape-chart.mdx) and [Scatter Polyline Chart](../types/shape-chart.mdx) have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see [Series Collection](#series-collection) section. Otherwise, other chart types are faster. ### Chart Animations -Enabling [Chart Animations](chart-animations.md) will slightly delay final rendering series in the Angular charts while they play transition-in animations. +Enabling [Chart Animations](chart-animations.mdx) will slightly delay final rendering series in the Angular charts while they play transition-in animations. ### Chart Annotations -Enabling [Chart Annotations](chart-annotations.md) such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the Angular chart. +Enabling [Chart Annotations](chart-annotations.mdx) such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the Angular chart. ### Chart Highlighting -Enabling the [Chart Highlighting](chart-highlighting.md) will slightly decrease performance of the Angular chart. +Enabling the [Chart Highlighting](chart-highlighting.mdx) will slightly decrease performance of the Angular chart. ### Chart Legend @@ -124,7 +124,7 @@ Adding a legend to the Angular charts might decrease performance if titles of se ### Chart Markers -In Angular charts, [Markers](chart-markers.md) are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart. +In Angular charts, [Markers](chart-markers.mdx) are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart. This code snippet shows how to remove markers from the Angular charts. @@ -155,11 +155,11 @@ this.LineSeries.Resolution = 10; ### Chart Overlays -Enabling [Chart Overlays](chart-overlays.md) will slightly decrease performance of the Angular chart. +Enabling [Chart Overlays](chart-overlays.mdx) will slightly decrease performance of the Angular chart. ### Chart Trendlines -Enabling [Chart Trendlines](chart-trendlines.md) will slightly decrease performance of the Angular chart. +Enabling [Chart Trendlines](chart-trendlines.mdx) will slightly decrease performance of the Angular chart. ### Axis Types @@ -315,7 +315,7 @@ In addition to the general performance guidelines, the Angular
-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**](/grid/grid), [**IgxTreeGrid**](/treegrid/tree-grid), [**IgxHierarchicalGrid**](/hierarchicalgrid/hierarchical-grid), and [**IgxPivotGrid**](/pivotGrid/pivot-grid). The exporting functionality is encapsulated in the
ng g @igniteui/angular-schematics:c grid newGridIgnite UI CLI:
ig add grid newGridBasic template for IgxGrid.
| [IgxGrid](../../grid/grid.md) component with auto generated columns |
-| grid-batch-editing | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditingIgnite UI CLI:
ig add grid-batch-editing newGridBatchEditingSample IgxGrid with batch editing.
| [IgxGrid](../../grid/grid.md) that uses Transaction service for [batch editing](../../grid/batch-editing.md) |
-| custom-grid | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c custom-grid newCustomGridIgnite UI CLI:
ig add custom-grid newCustomGridIgxGrid with optional features like sorting, filtering, editing, etc.
| [IgxGrid](../../grid/grid.md) with optional features like [Sorting](../../grid/sorting.md), [Filtering](../../grid/filtering.md), [Cell Editing](../../grid/editing.md), [Row Editing](../../grid/row-editing.md), [Group By](../../grid/groupby.md), [Resizing](../../grid/column-resizing.md), [Selection](../../grid/selection.md), [Paging](../../grid/paging.md), [Column Pinning](../../grid/column-pinning.md), [Column Moving](../../grid/column-moving.md), [Column Hiding](../../grid/column-hiding.md) |
-| grid-summaries | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c grid-summaries newGridSummariesIgnite UI CLI:
ig add grid-summaries newGridSummariesIgxGrid with summaries feature.
| [IgxGrid](../../grid/grid.md) with [summaries](../../grid/summaries.md) feature. |
-| grid-multi-column-headers | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeadersIgnite UI CLI:
ig add grid-multi-column-headers newGridMultiColumnHeadersIgxGrid with multiple header columns.
| [IgxGrid](../../grid/grid.md) with [multi-column headers](../../grid/multi-column-headers.md) |
-| tree grid | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGridIgnite UI CLI:
ig add custom-tree-grid newCustomTreeGridIgxTreeGrid with optional features like sorting, filtering, row editing, etc.
| [IgxTreeGrid](../../treegrid/tree-grid.md) with optional features like [Sorting](../../treegrid/sorting.md), [Filtering](../../treegrid/filtering.md), [Cell Editing](../../treegrid/editing.md), [Row Editing](../../treegrid/row-editing.md), [Resizing](../../treegrid/column-resizing.md), [Row Selection](../../treegrid/selection.md), [Paging](../../treegrid/paging.md), [Column Pinning](../../treegrid/column-pinning.md), [Column Moving](../../treegrid/column-moving.md), [Column Hiding](../../treegrid/column-hiding.md) |
-| hierarchical-grid | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c hierarchical-grid newHierarchicalGridIgnite UI CLI:
ig add hierarchical-grid newHierarchicalGridBasic IgxHierarchicalGrid.
| [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) component with auto generated columns. |
-| hierarchical-grid-batch-editing | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c hierarchical-grid-batch-editing newHierarchicalGridBatchEditingIgnite UI CLI:
ig add hierarchical-grid-batch-editing newHierarchicalGridBatchEditingIgxHierarchicalGrid with batch editing.
| [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) that uses Transaction service for [batch editing](../../hierarchicalgrid/batch-editing.md). |
-| hierarchical-grid-custom | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c hierarchical-grid-custom newCustomHierarchicalGridIgnite UI CLI:
ig add hierarchical-grid-custom newCustomHierarchicalGridIgxHierarchicalGrid with optional features like sorting, filtering, editing, etc.
| [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) with optional features like [Sorting](../../hierarchicalgrid/sorting.md), [Filtering](../../hierarchicalgrid/filtering.md), [Row Editing](../../hierarchicalgrid/row-editing.md), [Selection](../../hierarchicalgrid/selection.md). |
-| hierarchical-grid-summaries | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c hierarchical-grid-summaries newHierarchicalGridSummariesIgnite UI CLI:
ig add hierarchical-grid-summaries newHierarchicalGridSummariesIgxHierarchicalGrid with summaries feature.
| [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) with [summaries](../../hierarchicalgrid/summaries.md) feature. |
-| pivot-grid | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c pivot-grid newPivotGridIgnite UI CLI:
ig add pivot-grid newPivotGridBasic IgxPivotGrid.
| [IgxPivotGrid](../../pivotGrid/pivot-grid.md) component for multi-dimensional data analysis. |
-| tree | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c tree newTreeIgnite UI CLI:
ig add tree newTreeIgxTree with selection and load-on-demand nodes.
| [IgxTree](../../tree.md) with selection and load-on-demand node support. |
-| list | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c list newListIgnite UI CLI:
ig add list newListBasic IgxList.
| [IgxList](../../list.md) with search and filtering logic. |
-| combo | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c combo newComboIgnite UI CLI:
ig add combo newComboBasic IgxCombo with templating.
| [IgxCombo](../../combo.md) with custom [templating](../../combo-templates.md). |
+| grid | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c grid newGridIgnite UI CLI:
ig add grid newGridBasic template for IgxGrid.
| [IgxGrid](../../grid/grid.mdx) component with auto generated columns |
+| grid-batch-editing | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditingIgnite UI CLI:
ig add grid-batch-editing newGridBatchEditingSample IgxGrid with batch editing.
| [IgxGrid](../../grid/grid.mdx) that uses Transaction service for [batch editing](../../grid/batch-editing.mdx) |
+| custom-grid | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c custom-grid newCustomGridIgnite UI CLI:
ig add custom-grid newCustomGridIgxGrid with optional features like sorting, filtering, editing, etc.
| [IgxGrid](../../grid/grid.mdx) with optional features like [Sorting](../../grid/sorting.mdx), [Filtering](../../grid/filtering.mdx), [Cell Editing](../../grid/editing.mdx), [Row Editing](../../grid/row-editing.mdx), [Group By](../../grid/groupby.mdx), [Resizing](../../grid/column-resizing.mdx), [Selection](../../grid/selection.mdx), [Paging](../../grid/paging.mdx), [Column Pinning](../../grid/column-pinning.mdx), [Column Moving](../../grid/column-moving.mdx), [Column Hiding](../../grid/column-hiding.mdx) |
+| grid-summaries | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c grid-summaries newGridSummariesIgnite UI CLI:
ig add grid-summaries newGridSummariesIgxGrid with summaries feature.
| [IgxGrid](../../grid/grid.mdx) with [summaries](../../grid/summaries.mdx) feature. |
+| grid-multi-column-headers | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeadersIgnite UI CLI:
ig add grid-multi-column-headers newGridMultiColumnHeadersIgxGrid with multiple header columns.
| [IgxGrid](../../grid/grid.mdx) with [multi-column headers](../../grid/multi-column-headers.mdx) |
+| tree grid | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGridIgnite UI CLI:
ig add custom-tree-grid newCustomTreeGridIgxTreeGrid with optional features like sorting, filtering, row editing, etc.
| [IgxTreeGrid](../../treegrid/tree-grid.mdx) with optional features like [Sorting](../../treegrid/sorting.mdx), [Filtering](../../treegrid/filtering.mdx), [Cell Editing](../../treegrid/editing.mdx), [Row Editing](../../treegrid/row-editing.mdx), [Resizing](../../treegrid/column-resizing.mdx), [Row Selection](../../treegrid/selection.mdx), [Paging](../../treegrid/paging.mdx), [Column Pinning](../../treegrid/column-pinning.mdx), [Column Moving](../../treegrid/column-moving.mdx), [Column Hiding](../../treegrid/column-hiding.mdx) |
+| hierarchical-grid | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c hierarchical-grid newHierarchicalGridIgnite UI CLI:
ig add hierarchical-grid newHierarchicalGridBasic IgxHierarchicalGrid.
| [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) component with auto generated columns. |
+| hierarchical-grid-batch-editing | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c hierarchical-grid-batch-editing newHierarchicalGridBatchEditingIgnite UI CLI:
ig add hierarchical-grid-batch-editing newHierarchicalGridBatchEditingIgxHierarchicalGrid with batch editing.
| [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) that uses Transaction service for [batch editing](../../hierarchicalgrid/batch-editing.mdx). |
+| hierarchical-grid-custom | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c hierarchical-grid-custom newCustomHierarchicalGridIgnite UI CLI:
ig add hierarchical-grid-custom newCustomHierarchicalGridIgxHierarchicalGrid with optional features like sorting, filtering, editing, etc.
| [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) with optional features like [Sorting](../../hierarchicalgrid/sorting.mdx), [Filtering](../../hierarchicalgrid/filtering.mdx), [Row Editing](../../hierarchicalgrid/row-editing.mdx), [Selection](../../hierarchicalgrid/selection.mdx). |
+| hierarchical-grid-summaries | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c hierarchical-grid-summaries newHierarchicalGridSummariesIgnite UI CLI:
ig add hierarchical-grid-summaries newHierarchicalGridSummariesIgxHierarchicalGrid with summaries feature.
| [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) with [summaries](../../hierarchicalgrid/summaries.mdx) feature. |
+| pivot-grid | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c pivot-grid newPivotGridIgnite UI CLI:
ig add pivot-grid newPivotGridBasic IgxPivotGrid.
| [IgxPivotGrid](../../pivotgrid/pivot-grid.mdx) component for multi-dimensional data analysis. |
+| tree | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c tree newTreeIgnite UI CLI:
ig add tree newTreeIgxTree with selection and load-on-demand nodes.
| [IgxTree](../../tree.mdx) with selection and load-on-demand node support. |
+| list | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c list newListIgnite UI CLI:
ig add list newListBasic IgxList.
| [IgxList](../../list.mdx) with search and filtering logic. |
+| combo | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c combo newComboIgnite UI CLI:
ig add combo newComboBasic IgxCombo with templating.
| [IgxCombo](../../combo.mdx) with custom [templating](../../combo-templates.mdx). |
| Charts | | |
-| category chart | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c category-chart newCategoryChartIgnite UI CLI:
ig add category-chart newCategoryChartBasic category chart with chart type selector.
| Basic [category chart](../../charts/types/column-chart.md) with chart type selector. |
-| financial chart | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c financial-chart newFinancialChartIgnite UI CLI:
ig add financial-chart newFinancialChartBasic financial chart with automatic toolbar and type selection.
| Basic [financial chart](../../charts/types/stock-chart.md) with automatic toolbar and type selection. |
+| category chart | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c category-chart newCategoryChartIgnite UI CLI:
ig add category-chart newCategoryChartBasic category chart with chart type selector.
| Basic [category chart](../../charts/types/column-chart.mdx) with chart type selector. |
+| financial chart | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c financial-chart newFinancialChartIgnite UI CLI:
ig add financial-chart newFinancialChartBasic financial chart with automatic toolbar and type selection.
| Basic [financial chart](../../charts/types/stock-chart.mdx) with automatic toolbar and type selection. |
| Gauges | | |
-| bullet graph | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c bullet-graph newBulletGraphIgnite UI CLI:
ig add bullet-graph newBulletGraphIgxBulletGraph with different animations.
| [IgxBulletGraph](../../bullet-graph.md) with different animations. |
-| linear gauge | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c linear-gauge newLinearGaugeIgnite UI CLI:
ig add linear-gauge newLinearGaugeIgxLinearGauge with different animations.
| [IgxLinearGauge](../../linear-gauge.md) with different animations. |
-| radial gauge | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c radial-gauge newRadialGaugeIgnite UI CLI:
ig add radial-gauge newRadialGaugeIgxRadialGauge with different animations.
| [IgxRadialGauge](../../radial-gauge.md) with different animations. |
+| bullet graph | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c bullet-graph newBulletGraphIgnite UI CLI:
ig add bullet-graph newBulletGraphIgxBulletGraph with different animations.
| [IgxBulletGraph](../../bullet-graph.mdx) with different animations. |
+| linear gauge | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c linear-gauge newLinearGaugeIgnite UI CLI:
ig add linear-gauge newLinearGaugeIgxLinearGauge with different animations.
| [IgxLinearGauge](../../linear-gauge.mdx) with different animations. |
+| radial gauge | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c radial-gauge newRadialGaugeIgnite UI CLI:
ig add radial-gauge newRadialGaugeIgxRadialGauge with different animations.
| [IgxRadialGauge](../../radial-gauge.mdx) with different animations. |
| Maps | | |
-| geographic-map | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c geographic-map newGeographicMapIgnite UI CLI:
ig add geographic-map newGeographicMapBasic IgxGeographicMap.
| [IgxGeographicMap](../../geo-map.md) displaying geo-spatial data on geographic imagery maps. |
+| geographic-map | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c geographic-map newGeographicMapIgnite UI CLI:
ig add geographic-map newGeographicMapBasic IgxGeographicMap.
| [IgxGeographicMap](../../geo-map.mdx) displaying geo-spatial data on geographic imagery maps. |
| Layouts | | |
-| dock-manager | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c dock-manager newDockManagerIgnite UI CLI:
ig add dock-manager newDockManagerBasic IgcDockManager.
| [IgcDockManager](../../dock-manager.md) with nine content slots. |
-| carousel | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c carousel newCarouselIgnite UI CLI:
ig add carousel newCarouselBasic IgxCarousel.
| [IgxCarousel](../../carousel.md) cycling through a series of images. |
-| tabs | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c tabs newTabsIgnite UI CLI:
ig add tabs newTabsBasic IgxTabs.
| [IgxTabs](../../tabs.md) component that includes three customized tab-groups. |
-| bottom-nav | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c bottom-nav newBottomNavIgnite UI CLI:
ig add bottom-nav newBottomNavThree item bottom-nav template.
| Three item bottom [navbar](../../navbar.md) template. |
-| accordion | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c accordion newAccordionIgnite UI CLI:
ig add accordion newAccordionBasic IgxAccordion sample.
| [IgxAccordion](../../accordion.md) with multiple collapsible panels in a single container. |
-| stepper | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c stepper newStepperIgnite UI CLI:
ig add stepper newStepperBasic IgxStepper sample.
| [IgxStepper](../../stepper.md) visualizing content as a process with successive steps. |
+| dock-manager | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c dock-manager newDockManagerIgnite UI CLI:
ig add dock-manager newDockManagerBasic IgcDockManager.
| [IgcDockManager](../../dock-manager.mdx) with nine content slots. |
+| carousel | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c carousel newCarouselIgnite UI CLI:
ig add carousel newCarouselBasic IgxCarousel.
| [IgxCarousel](../../carousel.mdx) cycling through a series of images. |
+| tabs | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c tabs newTabsIgnite UI CLI:
ig add tabs newTabsBasic IgxTabs.
| [IgxTabs](../../tabs.mdx) component that includes three customized tab-groups. |
+| bottom-nav | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c bottom-nav newBottomNavIgnite UI CLI:
ig add bottom-nav newBottomNavThree item bottom-nav template.
| Three item bottom [navbar](../../navbar.mdx) template. |
+| accordion | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c accordion newAccordionIgnite UI CLI:
ig add accordion newAccordionBasic IgxAccordion sample.
| [IgxAccordion](../../accordion.mdx) with multiple collapsible panels in a single container. |
+| stepper | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c stepper newStepperIgnite UI CLI:
ig add stepper newStepperBasic IgxStepper sample.
| [IgxStepper](../../stepper.mdx) visualizing content as a process with successive steps. |
| Data Entry & Display | | |
-| chip | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c chip newChipIgnite UI CLI:
ig add chip newChipBasic IgxChip.
| [IgxChip](../../chip.md) components inside igx-chips-area. |
-| dropdown | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c dropdown newDropDownIgnite UI CLI:
ig add dropdown newDropDownBasic IgxDropDown.
| Basic [IgxDropDown](../../drop-down.md) that displays a list of items. |
-| select (v4.1.0) | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c select newSelectIgnite UI CLI:
ig add select newSelectBasic IgxSelect.
| Simple [IgxSelect](../../select.md) that displays a list of items. |
-| select (v4.1.0) | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c select-groups newGroupsSelectIgnite UI CLI:
ig add select-groups newGroupsSelectSelect With Groups.
| [IgxSelect](../../select.md) displaying grouped items. |
-| select (v4.1.0) | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c select-in-form newFormSelectIgnite UI CLI:
ig add select-in-form newFormSelectIgxSelect in a form.
| [IgxSelect](../../select.md) component usage in a form. |
-| input group | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c input-group newInputGroupIgnite UI CLI:
ig add input-group newInputGroupBasic IgxInputGroup form view.
| Form view created with [IgxInputGroup](../../input-group.md). |
-| autocomplete | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c autocomplete newAutocompleteIgnite UI CLI:
ig add autocomplete newAutocompleteSimple IgxAutocomplete.
| [IgxAutocomplete](../../autocomplete.md) enhancing text input with a dropdown of suggested options. |
-| enhanced-autocomplete | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c enhanced-autocomplete newEnhancedAutocompleteIgnite UI CLI:
ig add enhanced-autocomplete newEnhancedAutocompleteIgxAutocomplete with enhanced groups.
| [IgxAutocomplete](../../autocomplete.md) with grouped suggestion items. |
+| chip | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c chip newChipIgnite UI CLI:
ig add chip newChipBasic IgxChip.
| [IgxChip](../../chip.mdx) components inside igx-chips-area. |
+| dropdown | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c dropdown newDropDownIgnite UI CLI:
ig add dropdown newDropDownBasic IgxDropDown.
| Basic [IgxDropDown](../../drop-down.mdx) that displays a list of items. |
+| select (v4.1.0) | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c select newSelectIgnite UI CLI:
ig add select newSelectBasic IgxSelect.
| Simple [IgxSelect](../../select.mdx) that displays a list of items. |
+| select (v4.1.0) | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c select-groups newGroupsSelectIgnite UI CLI:
ig add select-groups newGroupsSelectSelect With Groups.
| [IgxSelect](../../select.mdx) displaying grouped items. |
+| select (v4.1.0) | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c select-in-form newFormSelectIgnite UI CLI:
ig add select-in-form newFormSelectIgxSelect in a form.
| [IgxSelect](../../select.mdx) component usage in a form. |
+| input group | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c input-group newInputGroupIgnite UI CLI:
ig add input-group newInputGroupBasic IgxInputGroup form view.
| Form view created with [IgxInputGroup](../../input-group.mdx). |
+| autocomplete | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c autocomplete newAutocompleteIgnite UI CLI:
ig add autocomplete newAutocompleteSimple IgxAutocomplete.
| [IgxAutocomplete](../../autocomplete.mdx) enhancing text input with a dropdown of suggested options. |
+| enhanced-autocomplete | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c enhanced-autocomplete newEnhancedAutocompleteIgnite UI CLI:
ig add enhanced-autocomplete newEnhancedAutocompleteIgxAutocomplete with enhanced groups.
| [IgxAutocomplete](../../autocomplete.mdx) with grouped suggestion items. |
| Interactions | | |
-| dialog | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c dialog newDialogIgnite UI CLI:
ig add dialog newDialogBasic IgxDialog.
| Sample of the [IgxDialog](../../dialog.md) used as a standard confirmation dialog. |
-| tooltip | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c tooltip newTooltipIgnite UI CLI:
ig add tooltip newTooltipA fully customizable tooltip.
| Basic tooltip created with the [IgxTooltip](../../tooltip.md). |
+| dialog | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c dialog newDialogIgnite UI CLI:
ig add dialog newDialogBasic IgxDialog.
| Sample of the [IgxDialog](../../dialog.mdx) used as a standard confirmation dialog. |
+| tooltip | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c tooltip newTooltipIgnite UI CLI:
ig add tooltip newTooltipA fully customizable tooltip.
| Basic tooltip created with the [IgxTooltip](../../tooltip.mdx). |
| Scheduling | | |
-| date-picker | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c date-picker newDatePickerIgnite UI CLI:
ig add date-picker newDatePickerBasic IgxDatePicker.
| Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. |
-| time-picker | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c time-picker newTimePickerIgnite UI CLI:
ig add time-picker newTimePickerBasic IgxTimePicker.
| Basic [IgxTimePicker](../../time-picker.md) with initial value set and one-way data binding. |
-| calendar | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c calendar newCalendarIgnite UI CLI:
ig add calendar newCalendarIgxCalendar with single selection.
| Basic [IgxCalendar](../../calendar.md) with single selection. |
+| date-picker | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c date-picker newDatePickerIgnite UI CLI:
ig add date-picker newDatePickerBasic IgxDatePicker.
| Basic [IgxDatePicker](../../date-picker.mdx) with one-way data binding. |
+| time-picker | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c time-picker newTimePickerIgnite UI CLI:
ig add time-picker newTimePickerBasic IgxTimePicker.
| Basic [IgxTimePicker](../../time-picker.mdx) with initial value set and one-way data binding. |
+| calendar | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c calendar newCalendarIgnite UI CLI:
ig add calendar newCalendarIgxCalendar with single selection.
| Basic [IgxCalendar](../../calendar.mdx) with single selection. |
## Scenario Templates
diff --git a/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx b/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
index a35ea5f552..d66cb6623a 100644
--- a/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
+++ b/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
@@ -13,7 +13,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
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. It integrates into the native Angular CLI workflow - use it with `ng new` for project creation and `ng g` for component scaffolding, without installing a separate global tool. The collection is distributed as the `@igniteui/angular-schematics` package and is added automatically when you run `ng add igniteui-angular` on an existing Angular project.
-The Schematics collection does not run an MCP server - the MCP server process is provided by the Ignite UI CLI and starts via `npx -y igniteui-cli mcp`, where `-y` avoids the interactive `npx` confirmation prompt. The `ai-config` schematic configures the MCP client connection and copies Agent Skills without requiring a separate CLI install. The collection is specific to Angular; React, Web Components, and Blazor equivalents are covered in their respective framework documentation. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](../getting-started).
+The Schematics collection does not run an MCP server - the MCP server process is provided by the Ignite UI CLI and starts via `npx -y igniteui-cli mcp`, where `-y` avoids the interactive `npx` confirmation prompt. The `ai-config` schematic configures the MCP client connection and copies Agent Skills without requiring a separate CLI install. The collection is specific to Angular; React, Web Components, and Blazor equivalents are covered in their respective framework documentation. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](../getting-started.mdx).
## Install the Schematics Collection
@@ -49,7 +49,7 @@ The guided wizard is the recommended starting point for new projects. Activate i
ng new --collection="@igniteui/angular-schematics"
```
-For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics).
+For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](./step-by-step-guide-using-angular-schematics.mdx).
### Create a project directly
@@ -77,8 +77,8 @@ When using the interactive wizard, selecting `side-nav` or `side-nav-mini` trigg
| Template ID | Description |
| :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| side-nav-auth | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. |
-| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. |
+| side-nav-auth | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](./auth-template.mdx) for details. |
+| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](./auth-template.mdx) for details. |
The following arguments are available when creating a project:
@@ -144,13 +144,13 @@ The following arguments are available when creating a project:
## Add a Component Template
-To add an [available Ignite UI for Angular template](component-templates) to an existing project, use `ng generate` with the Ignite UI for Angular collection and the `component` schematic, providing the template ID and a name for the new component:
+To add an [available Ignite UI for Angular template](./component-templates.mdx) to an existing project, use `ng generate` with the Ignite UI for Angular collection and the `component` schematic, providing the template ID and a name for the new component:
```cmd
ng g @igniteui/angular-schematics:component grid newGrid
```
-Template addition is supported in projects created with the Angular Schematics, Ignite UI CLI, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics#add-component-views).
+Template addition is supported in projects created with the Angular Schematics, Ignite UI CLI, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](./step-by-step-guide-using-angular-schematics.mdx#add-component-views).
The following arguments are available when adding a template:
@@ -324,4 +324,4 @@ ig ai-config
The `ig ai-config` command configures only the two Ignite UI entries, `igniteui-cli` and `igniteui-theming`, and does not register `angular-cli`. Use `ng generate @igniteui/angular-schematics:ai-config` to get all three servers configured in a single step.
### Angular グリッドでのキーボード ナビゲーションと行/セルの選択
-上、下、右、左、タブ、および Enter キーを使用して、Angular データ グリッドで Excel のような[キーボード ナビゲーション](grid/keyboard-navigation.md)を有効にして、アクセシビリティ コンプライアンスを確保し、使いやすさを向上させます。マウスまたはキーボードを使用して Angular グリッドで単一または複数の行選択を切り替えて完全な行を選択または選択解除するか、グリッド ツールバーの組み込みの [すべて選択] または [すべて選択解除] チェックボックスを使用して行選択を操作できます。この機能強化の詳細については、
