diff --git a/cspell.json b/cspell.json index 92337f7824..e21b8b5f4d 100644 --- a/cspell.json +++ b/cspell.json @@ -260,6 +260,8 @@ "batchediting", "updateparameters", "alldata", - "subtag" + "subtag", + "junie", + "xplat" ] } diff --git a/en/components/ai/skills.md b/en/components/ai/skills.md index 20d04c278e..40b31cffb2 100644 --- a/en/components/ai/skills.md +++ b/en/components/ai/skills.md @@ -1,12 +1,17 @@ --- -title: Ignite UI for Angular Skills | AI Skills | AI-Assisted Development | Ignite UI for Angular | Infragistics +title: Agent Skills | AI Skills | AI-Assisted Development | Ignite UI for Angular | Infragistics _description: Learn how to use Agent Skills to supercharge AI-assisted development with Ignite UI for Angular components, grids, data operations, and theming. -_keywords: ignite ui for angular, copilot skills, ai assisted development, github copilot, cursor, windsurf, claude, jetbrains ai +_keywords: Ignite UI for Angular, agent skills, ai assisted development, github copilot, cursor, windsurf, claude, gemini cli, junie +_license: MIT +mentionedTypes: [] --- -# Ignite UI for Angular Skills +# Ignite UI for Angular Agent Skills -Ignite UI for Angular ships with **Agent Skills** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with Ignite UI for Angular. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. +Ignite UI for Angular ships with **[Agent Skills](https://agentskills.io/)** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with Ignite UI for Angular. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. + +> [!NOTE] +> The AI tooling landscape is evolving rapidly. Skill discovery locations and distribution options may change as tools and IDEs are updated. Always consult the official documentation for your specific tool or agent for the latest information. ## Available Skills @@ -18,133 +23,129 @@ The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-ang | Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data | | Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | -> **Note:** Starting with Ignite UI for Angular **21.1.0**, these skills are automatically discovered when placed in your agent's skills path (e.g., `.claude/skills`, `.agents/skills`, `.cursor/rules/`). This release ships with an optional `ng update` migration to add these skills to your project automatically when updating to `igniteui-angular` 21.1.0 or later. - -There are two ways to use skills with your AI assistant: [create a persistent IDE agent](#approach-1-create-a-persistent-ide-agent) that always applies them automatically, or [download and load them manually](#approach-2-download-and-load-the-skills) into your preferred IDE on demand. - -## Approach 1: Create a Persistent IDE Agent - -This approach wires the skills permanently into your project so that every AI session automatically follows the Ignite UI for Angular guidelines — no copy-pasting required. - -### GitHub Copilot (VS Code) +> [!NOTE] +> Starting with Ignite UI for Angular **21.1.0**, these skills are automatically discovered when placed in your agent's skills path (e.g., `.claude/skills`, `.agents/skills`, `.cursor/rules/`). This release ships with an optional migration to add these skills to your project automatically. -GitHub Copilot reads custom instructions from a `.github/copilot-instructions.md` file at the root of your repository. To create a persistent agent: +## Skill Locations -1. Create (or open) `.github/copilot-instructions.md` in your project root. -2. Add a reference or paste the relevant skill content into that file. For example: +Each AI coding tool discovers skills from specific directories. Place your skill files in the appropriate location so your AI assistant can find and use them automatically. The general `.agents/skills/` convention is supported across multiple tools, while each tool also has its own specific directories. - ```markdown - # Copilot Instructions +### General (`.agents/skills/`) - This project uses Ignite UI for Angular. Follow the guidelines in the skill files below: - - - Components & Layout: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md - - Data Grids: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md - - Theming & Styling: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md - ``` - -3. Alternatively, paste the full content of the relevant `SKILL.md` files directly into `copilot-instructions.md` for fully offline, self-contained instructions. -4. Copilot will now apply these instructions automatically on every chat and inline suggestion in VS Code. - -### Cursor +The `.agents/skills/` directory is a cross-agent convention supported by multiple tools, including [VS Code with Copilot](https://code.visualstudio.com/docs/copilot/customization/agent-skills), [OpenAI Codex](https://developers.openai.com/codex/skills), [Cursor](https://cursor.com/docs/skills), [Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers), [Antigravity](https://antigravity.google/docs/skills), and [Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes). Copy the skill directories into `.agents/skills/` in your project root: -Cursor supports persistent project rules through a `.cursorrules` file or the `.cursor/rules/` directory: - -1. Create `.cursorrules` in your project root (or `.cursor/rules/igniteui.md` for a named rule). -2. Paste the contents of the desired `SKILL.md` files into that file. For example: - - ``` - # Ignite UI for Angular Rules +``` +.agents/ + skills/ + igniteui-angular-components/ + SKILL.md + igniteui-angular-grids/ + SKILL.md + igniteui-angular-theming/ + SKILL.md +``` - - - ``` +For user-level (global) skills available across all projects, use `~/.agents/skills/` instead. -3. Cursor will include these rules in every AI request automatically. You can also use the `@rules` mention in chat to reference a specific rule on demand. +### GitHub Copilot -### Windsurf +[GitHub Copilot](https://docs.github.com/en/copilot/concepts/agents/about-agent-skills) discovers skills from: -Windsurf reads persistent rules from a `.windsurfrules` file at the project root: +| Scope | Location | +| :------- | :------------------------------------------------------------------------------------------- | +| Project | `.github/skills/`, `.claude/skills/` | +| Personal | `~/.copilot/skills/`, `~/.claude/skills/` (Copilot coding agent and GitHub Copilot CLI only) | -1. Create `.windsurfrules` in your project root. -2. Paste the contents of the relevant `SKILL.md` files into it. -3. Every Cascade AI session in Windsurf will now include these as persistent instructions. +> **Tip:** In [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), these locations also include the general `.agents/skills/` and `~/.agents/skills/` and you can configure additional skill locations using the `chat.agentSkillsLocations` setting. -### JetBrains IDEs (WebStorm, IntelliJ) +### Claude -JetBrains AI Assistant supports project-level prompts that are applied to every AI interaction: +[Claude](https://code.claude.com/docs/en/skills#where-skills-live) discovers skills from: -1. Open **Settings** (or **Preferences** on macOS) → **Tools** → **AI Assistant** → **Project-level prompt**. -2. Paste the contents of the relevant `SKILL.md` files into the prompt field. -3. Click **Apply**. The AI Assistant will now follow these instructions for all requests inside the project. +| Scope | Location | +| :------- | :------------------ | +| Project | `.claude/skills/` | +| Personal | `~/.claude/skills/` | -### Claude Code +### Cursor -Claude Code supports a `CLAUDE.md` file at the project root as persistent agent instructions: +[Cursor](https://cursor.com/docs/skills#skill-directories) discovers skills from: -1. Create `CLAUDE.md` in your project root. -2. Paste the contents of the relevant `SKILL.md` files into it. For example: +| Scope | Location | +| :------------ | :----------------------------------- | +| Project | `.agents/skills/`, `.cursor/skills/` | +| User (global) | `~/.cursor/skills/` | - ```markdown - # Project Instructions +### Gemini CLI and Antigravity - This project uses Ignite UI for Angular. Always follow these guidelines: +[Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers) and [Antigravity](https://antigravity.google/docs/skills) discover skills from: - - ``` +| Scope | Location | +| :-------- | :--------------------------------------- | +| Workspace | `.gemini/skills/`, `.agents/skills/` | +| User | `~/.gemini/skills/`, `~/.agents/skills/` | -3. Claude Code will automatically read `CLAUDE.md` at the start of every session. +> **Tip:** Use the `/skills` slash command in Gemini CLI to view and manage installed skills. -### General AI Agents +### Junie (JetBrains IDEs) -Alternatively, one can use a general Agent Skills config so your Agent can easily discover and load skills automatically on demand: +[Junie](https://junie.jetbrains.com/docs/agent-skills.html) discovers skills from: -1. Create a `.agents/skills/` directory in your project root. -2. Copy the skill directories from `igniteui-angular/skills/` repository into `.agents/skills/`: +| Scope | Location | +| :------ | :----------------- | +| Project | `.junie/skills/` | +| User | `~/.junie/skills/` | - ``` - .agents/ - skills/ - igniteui-angular-components/ - igniteui-angular-grids/ - igniteui-angular-theming/ - ``` +### Windsurf -3. The Agent will now discover these skills and load the relevant one automatically based on the context of your request. +[Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes) discovers skills from: -> **Tip:** VS Code searches for skills in `.github/skills/`, `.claude/skills/`, and `.agents/skills/` by default. You can configure additional locations using the `chat.agentSkillsLocations` setting. +| Scope | Location | +| :-------- | :------------------------------------------------- | +| Workspace | `.windsurf/skills/`, `.agents/skills/` | +| Global | `~/.codeium/windsurf/skills/`, `~/.agents/skills/` | --- -## Approach 2: Download and Load the Skills +## Installing Skills -Use this approach when you want to load a specific skill on demand, without permanently modifying project configuration files. +Use one of the options below to download and place the skill files into the appropriate [skill location](#skill-locations) for your AI assistant. -### Step 1: Get the Skill Files +### **Option A — Use the installed npm package** -#### **Option A — Download individual files** +If Ignite UI for Angular is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: -Each skill file can be downloaded directly from GitHub. First, create the `.agents/skills/` directory in your project root, then download the files into it: +**macOS / Linux / Windows (PowerShell)** ```bash +cp -r node_modules/igniteui-angular/skills/. .agents/skills/ +``` + +**Windows (Command Prompt)** -# Define the base target directory -BASE_DIR=".agents/skills" +```cmd +robocopy node_modules\igniteui-angular\skills .agents\skills /E +``` -# Components & Layout -curl --create-dirs -o $BASE_DIR/igniteui-angular-components/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-components/SKILL.md +Or copy individual skill directories as needed: -# Data Grids -curl --create-dirs -o $BASE_DIR/igniteui-angular-grids/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-grids/SKILL.md +**macOS / Linux / Windows (PowerShell)** -# Theming & Styling -curl --create-dirs -o $BASE_DIR/igniteui-angular-theming/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-theming/SKILL.md +```bash +cp -r node_modules/igniteui-angular/skills/igniteui-angular-components .agents/skills/ +cp -r node_modules/igniteui-angular/skills/igniteui-angular-grids .agents/skills/ +cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skills/ ``` -The skill files will now be available in `.agents/skills/` and will be automatically discovered by compatible AI assistants. +**Windows (Command Prompt)** +```cmd +robocopy node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components /E +robocopy node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids /E +robocopy node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /E +``` -#### **Option B — Use the `gemini skills` CLI** +### **Option B — Use the `gemini skills` CLI** The `gemini skills install` command installs skills directly from a Git repository. It supports two scopes: @@ -169,66 +170,17 @@ gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-ang Once installed, the skill files are available in the respective location and will be automatically discovered by compatible AI assistants. - -#### **Option C — Use the installed npm package** - -If Ignite UI for Angular is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. for use with General AI Agents under `.agents/skills/`), run: - -```bash -# macOS / Linux -cp -r node_modules/igniteui-angular/skills/. .agents/skills/ -``` - -```powershell -# Windows (PowerShell) -Copy-Item -Recurse node_modules\igniteui-angular\skills .agents\skills -``` - -Or copy individual skill directories as needed: - -**macOS / Linux** - -```bash -cp -r node_modules/igniteui-angular/skills/igniteui-angular-components .agents/skills/ -cp -r node_modules/igniteui-angular/skills/igniteui-angular-grids .agents/skills/ -cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skills/ -``` - -**Windows (PowerShell)** - -```powershell -Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components -Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids -Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming -``` - -**Windows (Command Prompt)** - -```cmd -xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components -xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids -xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming -``` - -The skill files are located at: - -``` -node_modules/igniteui-angular/skills/igniteui-angular-components/SKILL.md -node_modules/igniteui-angular/skills/igniteui-angular-grids/SKILL.md -node_modules/igniteui-angular/skills/igniteui-angular-theming/SKILL.md -``` - -#### **Option D — Use the `npx skills` CLI** +### **Option C — Use the `npx skills` CLI** The `skills` CLI is an interactive tool that downloads and installs skills directly into your project. Run the following command in your project root: -```bash +```shell npx skills add IgniteUI/igniteui-angular ``` The CLI will guide you through a series of prompts to: -1. Select which skills to install (components, grids, and theming). +1. Select which skills to install (components, theming, etc.). 2. Choose the target location for the skill files in your project (e.g. `.agents/skills/`, `.github/skills/`). 3. Download and write the selected skill files automatically. @@ -236,19 +188,6 @@ Once complete, the skills are ready to use — no manual file copying required. > **Note:** Requires Node.js and an internet connection. The command fetches the latest skill files from the [IgniteUI/igniteui-angular](https://github.com/IgniteUI/igniteui-angular) repository. -### Step 2: Load the Skill into Your IDE - -Once you have the files, open them and load them into your AI assistant: - -| IDE / Tool | How to load | -| :--------------------------- | :--------------------------------------------------------------------------------------------------------------------------- | -| **VS Code + GitHub Copilot** | Use `#file:path/to/SKILL.md` in the Copilot Chat input to attach it as context for that session. | -| **Cursor** | Drag the `SKILL.md` file into the chat window, or type `@file` and select it. | -| **Windsurf** | Attach the file using the **+** button in the Cascade chat panel. | -| **JetBrains AI Assistant** | Click the paperclip icon in the AI chat to attach the file as context. | -| **Claude Desktop** | Drag the file into the chat or add it to the project knowledge base via **Project → Add Content**. | -| **Other assistants** | Open the `SKILL.md` file, copy its full contents, and paste them into the system prompt or at the top of your first message. | - --- ## Theming MCP Server @@ -261,10 +200,10 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./
-- [Getting Started with Ignite UI for Angular](../general/getting-started.md) -- [Angular Schematics & Ignite UI CLI](../general/cli-overview.md) -- [How to Use Standalone Components](../general/how-to/how-to-use-standalone-components.md) -- [Code Splitting and Multiple Entry Points](../general/code-splitting-and-multiple-entry-points.md) + + +- Getting Started with Ignite UI for Angular +- Angular Schematics & Ignite UI CLI
Our community is active and always welcoming to new ideas. diff --git a/en/components/ai/theming-mcp.md b/en/components/ai/theming-mcp.md index b59d7e92e7..e14666c494 100644 --- a/en/components/ai/theming-mcp.md +++ b/en/components/ai/theming-mcp.md @@ -1,7 +1,9 @@ --- -title: Ignite UI Theming MCP | Ignite UI for Angular -_description: Ignite UI for Angular ships with the Ignite UI Theming MCP server that allows you to create custom themes, palettes, typography, and elevations for your Angular applications. Learn how to use the MCP server to generate and apply custom themes that match your brand and design requirements. -_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations +title: Angular Theming MCP | Infragistics +_description: Angular works with the Ignite UI Theming MCP server that allows you to create custom themes, palettes, typography, and elevations for your Ignite UI for Angular applications. Learn how to use the MCP server to generate and apply custom themes that match your brand and design requirements. +_keywords: Ignite UI for Angular controls, Angular widgets, web widgets, UI widgets, Components Suite, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations +_license: MIT +mentionedTypes: [] --- # Ignite UI Theming MCP @@ -12,9 +14,9 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI ## Overview -Instead of writing Sass theming code by hand, you can describe your theming intent in plain language and let an AI assistant generate the correct code for you. The MCP server gives the AI the knowledge and tools it needs to produce accurate theming code — including palettes with proper shade generation, typography, elevations, component design token overrides, and more. +Instead of writing styles by hand, you can describe your theming intent in plain language and let an AI assistant generate the correct code for you. The MCP server gives the AI the knowledge and tools it needs to produce accurate theming code — including palettes with proper shade generation, typography, elevations, component design token overrides, and more. -The server supports all four Ignite UI design systems — **Material**, **Bootstrap**, **Fluent**, and **Indigo** — in both light and dark variants. While this guide focuses on Angular, the MCP server also works with **Ignite UI for Web Components**, **React**, and **Blazor**. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. +The server supports all four Ignite UI design systems — **Material**, **Bootstrap**, **Fluent**, and **Indigo** — in both light and dark variants. While this guide focuses on Angular, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** — the server compiles it for you. @@ -33,13 +35,13 @@ Most tools can produce either **Sass** or **CSS** output. Sass output is the def Before configuring the MCP server, make sure you have: - **Node.js** (v18 or later) installed — this provides the `npx` command used to launch the server. -- A project with an **Ignite UI package** listed as a dependency in `package.json`. For Angular, this is `igniteui-angular` (v15.0 or later). The server also supports `igniteui-webcomponents`, `igniteui-react`, and `igniteui-blazor`. +- A project with an **Ignite UI package** listed as a dependency in `package.json`. - An **AI client with MCP support** — for example, VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin. -If you do not have `igniteui-angular` installed yet, run: +If you do not have Ignite UI Theming installed yet, run: ```bash -ng add igniteui-angular +npm install igniteui-theming ``` ## Setup @@ -151,8 +153,11 @@ Use the `/mcp` command inside Claude Code to verify the server is connected. JetBrains AI Assistant supports MCP servers through the IDE settings: 1. Open **Settings** (or **Preferences** on macOS). + 2. Navigate to **Tools → AI Assistant → Model Context Protocol (MCP)**. + 3. Click **+ Add** and choose **As JSON** or use the form fields. + 4. Enter the following configuration: ```json @@ -292,7 +297,7 @@ $my-typography: typography( > _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values — create a custom palette."_ -The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. See [Palettes](../themes/palettes.md) for more detail on shade generation. +The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. See [Palettes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/palettes) for more detail on shade generation. ### Component-Level Customization @@ -310,7 +315,7 @@ The AI will call `set_spacing` scoped to the calendar component and `set_size` a **Platform not detected** -If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-angular`, `igniteui-webcomponents`) as a dependency. You can also tell the AI explicitly: _"Use the Angular platform."_ +If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-angular`) as a dependency. You can also tell the AI explicitly: _"Use the Angular platform."_ **Luminance warning on colors** @@ -328,12 +333,13 @@ Ensure `igniteui-angular` and `igniteui-theming` are installed: ng add igniteui-angular ``` -Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass](../themes/sass/index.md) for the correct file setup. +Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass]() for the correct file setup. ## Additional Resources -Related topics: +- [Ignite UI for Angular Skills](./skills.md) +
diff --git a/en/components/bullet-graph.md b/en/components/bullet-graph.md index baec43369f..79013ecdc1 100644 --- a/en/components/bullet-graph.md +++ b/en/components/bullet-graph.md @@ -29,8 +29,6 @@ The following sample demonstrates how setting multiple properties on the same [` The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the [`transitionDuration`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html#transitionDuration) property. The features of the bullet graph include configurable orientation and direction, configurable visual elements such as the needle, and more. - - ## Dependencies When installing the gauge package, the core package must also be installed. @@ -40,8 +38,6 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-gauges ``` - - ## Component Modules The [`IgxBulletGraphComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxbulletgraphcomponent.html) requires the following modules: diff --git a/en/components/charts/chart-overview.md b/en/components/charts/chart-overview.md index 015ad9cf46..f2189a5fb8 100644 --- a/en/components/charts/chart-overview.md +++ b/en/components/charts/chart-overview.md @@ -339,13 +339,11 @@ If you are considering any other Angular Charts on the market, here are a few th - We are here 24x5. Infragistics has global support that is always online. For North America, Asia Pacific, Middle East, and Europe, we are on the clock when you are! - We have many more UI controls in Angular besides the Charts. We offer a complete Angular solution to build your applications! - + - Ignite UI for Angular is built on Angular for the Angular developer, with zero 3rd party dependencies. We are 100% optimized for Angular. - We offer the world’s first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Figma designs. With Indigo.Design, everything you craft in Figma from our Indigo Design System matches to our Ignite UI for Angular controls. - - ## API References All types of chart types mentioned in this topic are implemented in these API components: diff --git a/en/components/charts/features/chart-axis-gridlines.md b/en/components/charts/features/chart-axis-gridlines.md index e94c3dd810..43ad2c2291 100644 --- a/en/components/charts/features/chart-axis-gridlines.md +++ b/en/components/charts/features/chart-axis-gridlines.md @@ -11,7 +11,7 @@ namespace: Infragistics.Controls.Charts All Ignite UI for Angular charts include built-in capability to modify appearance of axis lines as well as frequency of major/minor gridlines and tickmarks that are rendered on the X-Axis and Y-Axis. -> \[!Note] +> [!Note] > the following examples can be applied to [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) as well as [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) controls. Axis major gridlines are long lines that extend horizontally along the Y-Axis or vertically along the X-Axis from locations of axis labels, and they render through the plot area of the chart. Axis minor gridlines are lines that render between axis major gridlines. diff --git a/en/components/charts/features/chart-axis-layouts.md b/en/components/charts/features/chart-axis-layouts.md index 80c80ee120..69024dc19e 100644 --- a/en/components/charts/features/chart-axis-layouts.md +++ b/en/components/charts/features/chart-axis-layouts.md @@ -10,7 +10,7 @@ mentionedTypes: [ "DomainChart", "CategoryChart", "XYChart", "DomainChart", "Xam All Ignite UI for Angular charts include options to configure many axis layout options such as location as well as having the ability to share axis between series or have multiple axes in the same chart. These features are demonstrated in the examples given below. -> \[!Note] +> [!Note] > the following examples can be applied to [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) as well as [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) controls. ## Axis Locations Example diff --git a/en/components/charts/features/chart-data-aggregations.md b/en/components/charts/features/chart-data-aggregations.md index 35feefbb93..cab03d000e 100644 --- a/en/components/charts/features/chart-data-aggregations.md +++ b/en/components/charts/features/chart-data-aggregations.md @@ -50,5 +50,5 @@ The following is a list of API members mentioned in the above sections: - [`groupSorts`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#groupSorts) - [`groupSortDescriptions`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#groupSortDescriptions) -> \[!Note] +> [!Note] > Chart Aggregation will not work when using [`includedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) | [`excludedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties). These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. diff --git a/en/components/charts/features/chart-data-annotations.md b/en/components/charts/features/chart-data-annotations.md index 85d6befbad..391de91444 100644 --- a/en/components/charts/features/chart-data-annotations.md +++ b/en/components/charts/features/chart-data-annotations.md @@ -11,7 +11,7 @@ namespace: Infragistics.Controls.Charts In the Angular chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands). With data-binding supported, you can create as many annotations as you want to customize your charts. Also, you can combine different annotation layers and you can overlay text inside of plot area to annotated important events, patterns, and regions in your data. -> \[!Note] +> [!Note] > These features are designed to support cartesian axes and does not currently support radius or angle axes. For example, you can annotates stock prices with stock events and patterns. diff --git a/en/components/charts/features/chart-navigation.md b/en/components/charts/features/chart-navigation.md index 9c417c31d0..994980c04a 100644 --- a/en/components/charts/features/chart-navigation.md +++ b/en/components/charts/features/chart-navigation.md @@ -76,7 +76,7 @@ The following example demonstrates enabling scrollbars. ## Chart Navigation through Code -> \[!Note] +> [!Note] > Code navigation of the chart can only be used for the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control. The Angular data chart provides several navigation properties that are updated each time a zoom or pan operation happens in the chart. You can also set each of these properties to zoom or pan the data chart programmatically. The following is a list of these properties: diff --git a/en/components/charts/features/chart-performance.md b/en/components/charts/features/chart-performance.md index 3193342562..c3611f464f 100644 --- a/en/components/charts/features/chart-performance.md +++ b/en/components/charts/features/chart-performance.md @@ -180,7 +180,7 @@ Enabling [Chart Trendlines](chart-trendlines.md) will slightly decrease performa Usage of x-axis with DateTime support is not recommended if spaces between data points, based on the amount of time span between them, are not important. Instead, ordinal/category axis should be used because it is more efficient in the way it coalesces data. Also, ordinal/category axis doesn’t perform any sorting on the data like the time-based x-axis does. -> \[!Note] +> [!Note] > The [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) already uses ordinal/category axis so there is no need to change its properties. This code snippet shows how to ordinal/category x-axis in the [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) and [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) controls. @@ -197,7 +197,7 @@ This code snippet shows how to ordinal/category x-axis in the [`IgxFinancialChar By default, Angular charts will automatically calculate [`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval) based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing [`yAxisInterval`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval) property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels. -> \[!Note] +> [!Note] > We do not recommend setting axis minor interval as it will decrease chart performance. This code snippet shows how to set axis major interval in the Angular charts. diff --git a/en/components/charts/features/chart-user-annotations.md b/en/components/charts/features/chart-user-annotations.md index a8e3ead628..3e017673a5 100644 --- a/en/components/charts/features/chart-user-annotations.md +++ b/en/components/charts/features/chart-user-annotations.md @@ -19,7 +19,7 @@ This is directly integrated with the available tools of the [`IgxToolbarComponen -> \[!Note] +> [!Note] > This feature is designed to support X and Y axes and does not currently support radial or angular axes. ## Using the User Annotations with the Toolbar diff --git a/en/components/charts/types/data-pie-chart.md b/en/components/charts/types/data-pie-chart.md index 8733bea437..e48aff8952 100644 --- a/en/components/charts/types/data-pie-chart.md +++ b/en/components/charts/types/data-pie-chart.md @@ -100,7 +100,7 @@ You can style the aggregated Others slice separately from other slices by using These properties only affect the Others slice (when it exists). All other slices continue to use the normal palette and item-wise coloring behavior. -> \[!NOTE] +> [!NOTE] > The Others slice is only rendered when the chart is configured to create it (for example, with [`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) greater than `0` and an appropriate [`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryType)). If the Others slice is not present, `OthersCategoryBrush` and `OthersCategoryOutline` have no visible effect. If you want to ensure that the Others category does not show up in the [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html), you can set the [`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) to 0. diff --git a/en/components/dashboard-tile.md b/en/components/dashboard-tile.md index 143dc524c9..b18669defe 100644 --- a/en/components/dashboard-tile.md +++ b/en/components/dashboard-tile.md @@ -25,8 +25,6 @@ Interacting with the chart type menu in the toolbar will allow for selecting a d ## Dependencies - - Install the following packages in the Ignite UI for Angular toolset: ```cmd @@ -60,8 +58,6 @@ import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGauge export class AppModule {} ``` - - ## Usage Depending on what you bind the Dashboard Tile's `DataSource` property to will determine which visualization you see by default, as the control will evaluate the data you bind and then choose a visualization from the Ignite UI for Angular toolset to show. The data visualization controls that are included to be shown in the Dashboard Tile are the following: diff --git a/en/components/excel-library-using-cells.md b/en/components/excel-library-using-cells.md index 31d8505b37..a28c3491cd 100644 --- a/en/components/excel-library-using-cells.md +++ b/en/components/excel-library-using-cells.md @@ -21,8 +21,6 @@ The [`WorksheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/
- - ## References The following code shows the imports needed to use the code-snippets below: @@ -37,8 +35,6 @@ import { WorksheetCellComment } from "igniteui-angular-excel"; import { FormattedString } from "igniteui-angular-excel"; ``` - - ## Referencing Cells and Regions You can access a [`WorksheetCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetcell.html) object or a [`WorksheetRegion`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetregion.html) object by calling the [`worksheet`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheetregion.html#worksheet) object’s [`getCell`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#getCell) or [`getRegion`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.worksheet.html#getRegion) methods, respectively. Both methods accept a string parameter that references a cell. Getting a reference to a cell is useful when applying formats or working with formulas and cell contents. diff --git a/en/components/excel-library-using-worksheets.md b/en/components/excel-library-using-worksheets.md index 035c9b41e9..e48d7f084e 100644 --- a/en/components/excel-library-using-worksheets.md +++ b/en/components/excel-library-using-worksheets.md @@ -21,8 +21,6 @@ The Infragistics Angular Excel Engine's [`worksheet`]({environment:dvApiBaseUrl}
- - The following code shows the imports needed to use the code-snippets below: ```ts @@ -40,8 +38,6 @@ import { SortDirection } from "igniteui-angular-excel"; import { WorkbookColorInfo } from "igniteui-angular-excel"; ``` - - ## Configuring the Gridlines The gridlines are used to visually separate the cells in the worksheet. You may show or hide the gridlines and also change their color. diff --git a/en/components/excel-library-working-with-charts.md b/en/components/excel-library-working-with-charts.md index 46c707420e..ced94c4981 100644 --- a/en/components/excel-library-working-with-charts.md +++ b/en/components/excel-library-working-with-charts.md @@ -19,7 +19,7 @@ The Infragistics Angular Excel Engine's [`WorksheetChart`]({environment:dvApiBas -> \[!Note] +> [!Note] > The XLSX format is required. Other formats are not supported at this time.
diff --git a/en/components/excel-library.md b/en/components/excel-library.md index a9f5b531d4..9421b3b94d 100644 --- a/en/components/excel-library.md +++ b/en/components/excel-library.md @@ -21,8 +21,6 @@ The Infragistics Angular Excel Library allows you to work with spreadsheet data
- - ## Dependencies When installing the excel package, the core package must also be installed. @@ -60,8 +58,6 @@ The Excel Library contains 5 modules that you can use to limit bundle size of yo - **IgxExcelXlsxModule** – This contains the load and save logic for xlsx (and related) type files – namely the Excel2007 related and StrictOpenXml WorkbookFormats. - **IgxExcelModule** – This references the other 4 modules and so basically ensures that all the functionality is loaded/available. - - ## Supported Versions of Microsoft Excel The following is a list of the supported versions of Excel.\*\* @@ -86,12 +82,8 @@ The following is a list of the supported versions of Excel.\*\* Now that the Excel Library module is imported, next step is to load a workbook. - - In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook). - - In order to load and save [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) objects, you can utilize the save method of the actual [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_excel.sheet.html#workbook) object, as well as its static `Load` method. ```ts @@ -104,8 +96,6 @@ var workbook = ExcelUtility.load(file); ExcelUtility.save(workbook, "fileName"); ``` - - ## Managing Heap Due to the size of the Excel Library, it's recommended to disable the source map generation. @@ -138,8 +128,6 @@ Modify `angular.json` by setting the `vendorSourceMap` option under architect => } ``` - - ## API References - `Load` diff --git a/en/components/general-changelog-dv.md b/en/components/general-changelog-dv.md index c9398a8b07..3417f27aee 100644 --- a/en/components/general-changelog-dv.md +++ b/en/components/general-changelog-dv.md @@ -10,7 +10,7 @@ namespace: Infragistics.Controls.Charts All notable changes for each version of Ignite UI for Angular are documented on this page. -> \[!Note] +> [!Note] > This topic discusses changes only for components that are not included in the igniteui-angular package. > For changes specific to igniteui-angular components, please see CHANGELOG.MD. @@ -183,7 +183,7 @@ There is a new property called [`useInsetOutlines`]({environment:dvApiBaseUrl}/p ### igniteui-angular-maps (Geographic Map) -> \[!Note] +> [!Note] > As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028. > For more details please visit: @@ -400,7 +400,7 @@ Added significant improvements to default behaviors, and refined the Category Ch - GroupSorts - GroupSortDescriptions -> \[!Note] +> [!Note] > The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not work when using [`includedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) | [`excludedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties) because these properties are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. ## **13.2.0 (June 2022)** @@ -426,7 +426,7 @@ Added significant improvements to default behaviors, and refined the Category Ch ## **13.1.0 (November 2021)** -> \[!Note] +> [!Note] > Please ensure package "lit-html": "^2.0.0" or newer is added to your project for optimal compatibility. ### igniteui-angular-charts (Charts) @@ -519,7 +519,7 @@ for example: ### igniteui-angular-maps (GeoMap) -> \[!Note] +> [!Note] > These features are CTP - Added support for wrap around display of the map (scroll infinitely horizontally) @@ -535,7 +535,7 @@ for example: Import statements have been simplified to use just package names instead of full paths to API classes and enums. -> \[!Note] +> [!Note] > These breaking changes were introduce in these packages and components only: | Affected Packages | Affected Components | diff --git a/en/components/geo-map-binding-multiple-shapes.md b/en/components/geo-map-binding-multiple-shapes.md index c910f281a5..53d8b20180 100644 --- a/en/components/geo-map-binding-multiple-shapes.md +++ b/en/components/geo-map-binding-multiple-shapes.md @@ -123,8 +123,6 @@ sdsLocations.databaseSource = url + "/Shapes/WorldCities.dbf"; sdsLocations.dataBind(); ``` - - ## Processing Polygons Process shapes data loaded in [`IgxShapeDataSource`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) with of countries of the world and assign it to [`IgxGeographicShapeSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicshapeseriescomponent.html) object. @@ -216,8 +214,6 @@ public onPointsLoaded(sds: IgxShapeDataSource, e: any) { } ``` - - ## Map Background Also, you might want to hide geographic imagery from the map background content if your shape files provided sufficient geographic context (e.g. shape of countries) for your application. diff --git a/en/components/geo-map.md b/en/components/geo-map.md index 9d843361f8..cc527c6117 100644 --- a/en/components/geo-map.md +++ b/en/components/geo-map.md @@ -35,8 +35,6 @@ For more details please visit: [Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) - - ## Dependencies The Angular geographic map component, you need to first install these packages: @@ -47,8 +45,6 @@ npm install --save igniteui-angular-charts npm install --save igniteui-angular-maps ``` - - ## Component Modules The [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) requires the following modules, however the DataChartInteractivityModule is only required for mouse interactions, such as panning and zooming the map content. diff --git a/en/components/inputs/color-editor.md b/en/components/inputs/color-editor.md index 6dd4c67d94..570814a5a2 100644 --- a/en/components/inputs/color-editor.md +++ b/en/components/inputs/color-editor.md @@ -24,8 +24,6 @@ The Ignite UI for Angular Color Editor is a lightweight color picker component. ## Dependencies - - First, you need to install the Ignite UI for Angular by running the following command: ```cmd @@ -35,14 +33,10 @@ npm install igniteui-angular-inputs Before using the `ColorEditor`, you need to register the following modules as follows: - - ## Usage The simplest way to start using the `ColorEditor` is as follows: - - ```html ``` - - ## Binding to events The Color Editor component raises the following events: @@ -60,8 +52,6 @@ The Color Editor component raises the following events: - valueChanged - valueChanging - - ```ts @ViewChild("colorEditor", { static: true } ) private colorEditor: IgxColorEditorComponent @@ -75,8 +65,6 @@ public onValueChanged = (e: any) => { } ``` - -
## API References diff --git a/en/components/interactivity/accessibility-compliance.md b/en/components/interactivity/accessibility-compliance.md index 84614689b5..ca5fdfd444 100644 --- a/en/components/interactivity/accessibility-compliance.md +++ b/en/components/interactivity/accessibility-compliance.md @@ -83,7 +83,7 @@ The matrix below provides a high-level outline of the accessibility support prov | | The control/component is not entirely accessible unless you perform some sort of action. | | | 'white space' | this particular rule does not apply to the control | | -> \[!WARNING] +> [!WARNING] > The table above is relevant only to the **Default theme**of Ignite UI for Angular theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors. ### Compliance Information @@ -164,7 +164,7 @@ The matrix below provides a high-level outline of the accessibility support prov | | The control/component is not entirely accessible unless you perform some sort of action. | | | 'white space' | this particular rule does not apply to the control | | -> \[!WARNING] +> [!WARNING] > The table above is relevant only to the **Default theme**of Ignite UI for Angular theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors. ### Compliance Information diff --git a/en/components/linear-gauge.md b/en/components/linear-gauge.md index 9d8c16e547..274655d70f 100644 --- a/en/components/linear-gauge.md +++ b/en/components/linear-gauge.md @@ -24,8 +24,6 @@ The following sample demonstrates how setting multiple properties on the same [`
- - ## Dependencies When installing the Angular gauge component, the core package must also be installed. @@ -35,8 +33,6 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-gauges ``` - - ## Component Modules The [`IgxLinearGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html) requires the following modules: diff --git a/en/components/menus/toolbar.md b/en/components/menus/toolbar.md index ba78ab5f53..3c4658228f 100644 --- a/en/components/menus/toolbar.md +++ b/en/components/menus/toolbar.md @@ -21,8 +21,6 @@ The Angular Toolbar component is a companion container for UI operations to be u ## Dependencies - - Install the Ignite UI for Angular layouts, inputs, charts and core packages: ```cmd @@ -67,8 +65,6 @@ IgrDataChartInteractivityModule.register(); IgrDataChartCategoryTrendLineModule.register(); ``` - - ## Usage ### Tool Actions diff --git a/en/components/radial-gauge.md b/en/components/radial-gauge.md index 26d92ff931..a9a833fb76 100644 --- a/en/components/radial-gauge.md +++ b/en/components/radial-gauge.md @@ -24,8 +24,6 @@ The following sample demonstrates how setting multiple properties on the same [`
- - ## Dependencies When installing the gauge component, the core package must also be installed. @@ -35,8 +33,6 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-gauges ``` - - ## Component Modules The [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) requires the following modules: diff --git a/en/components/spreadsheet-chart-adapter.md b/en/components/spreadsheet-chart-adapter.md index 1853b1119d..1adafb1fcc 100644 --- a/en/components/spreadsheet-chart-adapter.md +++ b/en/components/spreadsheet-chart-adapter.md @@ -83,7 +83,7 @@ There are over 35 chart types supported by the Spreadsheet ChartAdapters includi ## Dependencies -> \[!Note] +> [!Note] > > In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook). diff --git a/en/components/spreadsheet-overview.md b/en/components/spreadsheet-overview.md index 227b106e92..ce6e18e1d3 100644 --- a/en/components/spreadsheet-overview.md +++ b/en/components/spreadsheet-overview.md @@ -93,7 +93,7 @@ Now that the Angular spreadsheet module is imported, next is the basic configura ``` -> \[!Note] +> [!Note] > > In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a [`workbook`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#workbook). diff --git a/en/components/zoomslider-overview.md b/en/components/zoomslider-overview.md index ed41da8d10..d6ffd76237 100644 --- a/en/components/zoomslider-overview.md +++ b/en/components/zoomslider-overview.md @@ -34,8 +34,6 @@ The following sample demonstrates how to use [`IgxZoomSliderComponent`]({environ | Extensibility | The ZoomSlider control supports DataChart control out-of the box. | | Configurable zoom-range window | The initial zoom-range window width and position, as well as its minimum size, are configurable. | - - ## Dependencies When installing the Angular chart component, the core package must also be installed. @@ -45,8 +43,6 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-charts ``` - - ## Component Modules The [`IgxZoomSliderComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxzoomslidercomponent.html) requires the following modules: