### Start Ignite UI CLI Guided Setup

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/general-getting-started.md

Run the `ig` command to initiate the step-by-step wizard for creating a new application. This guides you through framework, project type, and template selection.

```cmd
ig
```

--------------------------------

### Start MCP Server (with global install)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/general-cli-overview.md

Starts the Ignite UI CLI MCP server when the CLI is installed globally.

```cmd
ig mcp
```

--------------------------------

### Working with Grids Example

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/excel-library-working-with-grids.md

This example showcases how to work with grids in the {Platform} Excel Library. It requires no specific setup beyond the library itself.

```typescript
TODO
```

--------------------------------

### Start Documentation for Specific Platforms

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/README.md

Commands to start the documentation server for Web Components, React, or Blazor platforms.

```cmd
yarn startWC
```

```cmd
yarn startReact
```

```cmd
yarn startBlazor
```

--------------------------------

### Web Components Grid Setup with Filtering

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/_shared/search.md

Configure a Web Component grid with columns, enabling filtering and sorting. This example shows the declarative HTML setup.

```html
<{ComponentSelector} id="grid1" class="gridSize" auto-generate="false" allow-filtering="true">
    <igc-column field="IndustrySector" data-type="string" sortable="true"></igc-column>
    <igc-column field="IndustryGroup" data-type="string" sortable="true"></igc-column>
    <igc-column field="SectorType" data-type="string" sortable="true"></igc-column>
    <igc-column field="KRD" data-type="number" sortable="true"></igc-column>
    <igc-column field="MarketNotion" data-type="number" sortable="true"></igc-column>
    <igc-column field="Date" data-type="date" sortable="true"></igc-column>
</{ComponentSelector}>
```

--------------------------------

### {Platform} Displaying Heat Imagery Example

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/geo-map-display-heat-imagery.md

This is an example of displaying heat imagery on the map. It requires prior setup of shape files and data binding.

```javascript
sample="/maps/geo-map/display-heat-imagery", height="500", alt="{Platform} Displaying Heat Imagery Example"
```

--------------------------------

### Install Theming Tools

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/ai/cli-mcp.md

Install the `igniteui-theming` package if you need theming tools in your client session and it's not already available.

```bash
npm install igniteui-theming
```

--------------------------------

### Install {ProductName} Web Components

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/list.md

Install the {ProductName} package for web components using npm.

```cmd
npm install {PackageWebComponents}
```

--------------------------------

### Install Query Builder and Grids (Web Components)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/inputs/query-builder.md

Install the necessary packages for using the Query Builder with Web Components. This command installs the core Query Builder package and the Grids package, which may be a dependency.

```cmd
npm install {PackageWebComponents} {PackageGrids}
```

--------------------------------

### Install Web Component Polyfills

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/general-getting-started.md

Install the necessary polyfills for web components using npm.

```bash
npm install @webcomponents/custom-elements
```

--------------------------------

### Install IgniteUI WebComponents

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/_shared/collapsible-column-groups.md

Install the core and grids packages for IgniteUI WebComponents using npm.

```cmd
npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-grids
```

--------------------------------

### Install Grid Lite with npm (React)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grid-lite/overview.md

Install the React wrapper for Grid Lite and the Grid Lite component itself using npm.

```cmd
npm install igniteui-react
npm install igniteui-grid-lite
```

--------------------------------

### Install Bullet Graph Packages

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/bullet-graph.md

Install the core and gauges packages using npm. Ensure both are installed before proceeding.

```cmd
npm install --save {PackageCore}
npm install --save {PackageGauges}
```

--------------------------------

### Install Webpack

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/general-getting-started.md

Install webpack and webpack-cli as development dependencies for bundling your project.

```cmd
npm install webpack webpack-cli --save-dev
```

--------------------------------

### Install Grid Lite with yarn (React)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grid-lite/overview.md

Install the React wrapper for Grid Lite and the Grid Lite component itself using yarn.

```cmd
yarn add igniteui-react
yarn add igniteui-grid-lite
```

--------------------------------

### Install Dock Manager Package

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/layouts/dock-manager.md

To install the Dock Manager package, execute the npm install command.

```cmd
npm install --save {PackageDockManager}
```

--------------------------------

### Install Grid Lite with .NET CLI (Blazor)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grid-lite/overview.md

Install the IgniteUI.Blazor.GridLite NuGet package using the .NET CLI.

```cmd
dotnet add package IgniteUI.Blazor.GridLite
```

--------------------------------

### Install IgniteUI React

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/_shared/collapsible-column-groups.md

Install the IgniteUI React grids package using npm.

```cmd
npm install igniteui-react-grids
```

--------------------------------

### Install Grid Lite with yarn (WebComponents)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grid-lite/overview.md

Install the Grid Lite component using yarn in your project's root folder.

```cmd
yarn add igniteui-grid-lite
```

--------------------------------

### Run the Application

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/general-step-by-step-guide-using-cli.md

Builds the project, starts a local web server, and opens the application in your default browser. Use this command to view your project during development.

```cmd
ig start
```

--------------------------------

### Install Spreadsheet Dependencies

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/spreadsheet-overview.md

Install the core, excel, and spreadsheet packages using npm. Ensure you use the correct package names for your platform.

```cmd
npm install --save {PackageCore}
npm install --save {PackageExcel}
npm install --save {PackageSpreadsheet}
```

--------------------------------

### Web Components Button Download Example

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/inputs/button.md

Sets up a web component button to initiate a download, specifying the download URL and target.

```html
<igc-button
    href=""
    variant="contained"
    download="url_to_content"
    target="_blank">
    Download
</igc-button>
```

--------------------------------

### Overview Example

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/inputs/date-time-input.md

Shows a basic overview of the {Platform} Date Time Input.

```html
<IgcDateTimeInput displayFormat="dd/MM/yyyy HH:mm" inputFormat="MM/dd/yyyy HH:mm"></IgcDateTimeInput>
```

--------------------------------

### React Textarea Setup

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/inputs/text-area.md

Install the igniteui-react package and import the IgrTextarea component along with its CSS.

```cmd
npm install igniteui-react
```

```tsx
import { IgrTextarea } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
```

--------------------------------

### Build and Start React Application

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/kr/components/general-getting-started.md

Use these commands to build your React application for production or start the development server. The application will automatically open in your default browser.

```bash
npm run-script build
```

```bash
npm run-script start
```

--------------------------------

### Angular Map Component Setup

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/geo-map.md

Example of an Angular component that uses `IgxGeographicMapComponent`. It sets the `windowRect` property in the `ngAfterViewInit` lifecycle hook.

```typescript
import { AfterViewInit, Component, ViewChild } from "@angular/core";
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';

@Component({
  selector: "app-map-overview",
  styleUrls: ["./map-overview.component.scss"],
  templateUrl: "./map-overview.component.html"
})

export class MapOverviewComponent implements AfterViewInit {

    @ViewChild ("map")
    public map: IgxGeographicMapComponent;
    constructor() {
    }

    public ngAfterViewInit(): void {
        this.map.windowRect = { left: 0.2, top: 0.1, width: 0.7, height: 0.7 };
    }
}
```

--------------------------------

### Build Documentation for Web Components

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/PORTING.md

Use this command to build the documentation specifically for Web Components.

```bash
yarn run buildWebComponents
```

--------------------------------

### Basic MaskInput Usage in React

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/inputs/mask-input.md

This example shows how to use the MaskInput component in a React application. Ensure you have installed the igniteui-react package and imported the necessary CSS.

```tsx
import { IgrMaskInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

<IgrMaskInput mask="00000">
    <span slot="prefix">
        <IgrIcon ref={iconLocationRef} name="location" collection="material"></IgrIcon>
    </span>
    <span slot="helper-text">ZIP Code</span>
</IgrMaskInput>
```

--------------------------------

### Process Points in Web Components

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/geo-map-binding-multiple-shapes.md

Parses shapefile data to create geo-locations and assigns them to an IgcGeographicSymbolSeriesComponent. This example uses DOM manipulation to get the series and then renders it.

```typescript
import { IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
// ...
public onPointsLoaded(sds: IgcShapeDataSource, e: any) {
    const geoLocations: any[] = [];
    // parsing shapefile data and creating geo-locations
    let pointData = sds.getPointData();
    for ( let i = 0; i < pointData.length; i++ ) {
        let record = pointData[i];
        const pop = record.fieldValues.POPULATION;
        if (pop > 0) {
            // each shapefile record has just one point
            const location = {
                latitude: record.points[0][0].y,
                longitude: record.points[0][0].x,
                city: record.fieldValues.NAME,
                population: pop
            };
            geoLocations.push(location);
        }
    }
    let symbolSeries = (document.getElementById("symbolSeries") as IgcGeographicSymbolSeriesComponent);
    symbolSeries.dataSource = geoLocations;
    symbolSeries.renderSeries(false);
}
```

--------------------------------

### {Platform} Spreadsheet Chart Adapter Example

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/spreadsheet-chart-adapter.md

This example demonstrates how to integrate the chart adapter with the {Platform} Spreadsheet. It requires a sample file to be loaded.

```javascript
<div class="divider--half"></div>

## Chart Adapter Overview

Using `ChartAdapter` you can display the charts in the spreadsheet. The spreadsheet chart adapters creates and initializes chart elements for the spreadsheet based on a Infragistics.Documents.Excel.WorksheetChart instance.

In order to add a WorksheetChart to a worksheet, you must use the `AddChart` method of the worksheet’s Shapes collection.You can find more detail of adding charts in Excel below.

Here are the steps by step description :

1. Add the SpreadsheetChartAdapterModule reference to your project
2. Create an instance of a SpreadsheetChartAdapter class assigning it to the Spreadsheet
3. Run your app and load a worksheet containing a chart.
```

--------------------------------

### Install Core and Grid Packages

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/data-grid/overview.md

Install the core, grids, and inputs packages using npm for Angular, React, or Web Components projects.

```cmd
npm install --save {PackageCore}
npm install --save {PackageGrids}
npm install --save {PackageInputs}
```

--------------------------------

### Web Components TreeGrid Setup with Filtering

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/_shared/search.md

Set up a Web Component TreeGrid with hierarchical data, primary/foreign keys, and filtering. This example uses declarative HTML for configuration.

```html
<igc-tree-grid id="treeGrid" auto-generate="false" primary-key="ID" foreign-key="ParentID" allow-filtering="true" height="100%" width="100%">
    <igc-column field="Name" data-type="string" sortable="true"></igc-column>
    <igc-column field="ID" data-type="number" sortable="true"></igc-column>
    <igc-column field="Title" data-type="string" sortable="true"></igc-column>
    <igc-column field="Age" data-type="number" sortable="true"></igc-column>
    <igc-column field="HireDate" data-type="date" sortable="true"></igc-column>
</igc-tree-grid>
```

--------------------------------

### Build Documentation for React

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/PORTING.md

Use this command to build the documentation specifically for the React platform.

```bash
yarn run buildReact
```

--------------------------------

### Angular Component Setup for Hierarchical Grid

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/hierarchical-grid/load-on-demand.md

Sets up an Angular component to use the RemoteLoDService and injects it using `providers`. It also uses `ViewChild` to get a reference to the IgxHierarchicalGridComponent.

```typescript
@Component({
    providers: [RemoteLoDService],
    selector: "app-hierarchical-grid-lod",
    styleUrls: ["./hierarchical-grid-lod.component.scss"],
    templateUrl: "./hierarchical-grid-lod.component.html"
})
export class HierarchicalGridLoDSampleComponent {
    @ViewChild("hGrid")
    public hGrid: IgxHierarchicalGridComponent;

    constructor(private remoteService: RemoteLoDService) { }
}
```

--------------------------------

### Enable Row Editing in Angular TreeGrid

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/_shared/row-editing.md

Configure the TreeGrid component with `rowEditable` set to true and define columns. This example shows basic row editing setup for a TreeGrid.

```html
<{ComponentSelector} [data]="data" [primaryKey]="'ID'" width="100%" height="500px" [rowEditable]="true">
    <igx-column field="Name" header="Name" [dataType]="'string'"></igx-column>
    <igx-column field="Age" header="Reorder Level" [dataType]="'number'"></igx-column>
    <igx-column field="Title" header="Title" [dataType]="'string'">
    <igx-column field="HireDate" header="Hire Date" [dataType]="'date'"></igx-column>
</{ComponentSelector}>
```

--------------------------------

### Razor Multi-Column Headers

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/_shared/multi-column-headers.md

Configure multi-column headers in Razor components. This example shows a basic setup with a column group for general information and individual columns for contact details.

```razor
<{ComponentSelector} Data=data AllowFiltering=true PrimaryKey="ID" ForeignKey="ParentID">
    <IgbColumnGroup Header="General Information">
        <IgbColumn Field="Phone" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.String"></IgbColumn>
    </IgbColumnGroup>
    <IgbColumn Field="Name" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="Title" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="Age" Sortable=true Resizable=true DataType="GridColumnDataType.Number"></IgbColumn>
</{ComponentSelector}>
```

--------------------------------

### Install WebComponents Skills (User Scope)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/ai/skills.md

Installs WebComponents related Gemini skills to the user's global scope. Ensure the GitHub link is valid.

```bash
gemini skills install {GithubLink}.git --path skills/igniteui-wc-choose-components
gemini skills install {GithubLink}.git --path skills/igniteui-wc-customize-component-theme
gemini skills install {GithubLink}.git --path skills/igniteui-wc-optimize-bundle-size
gemini skills install {GithubLink}.git --path skills/igniteui-wc-integrate-with-framework
gemini skills install {GithubLink}.git --path skills/igniteui-wc-generate-from-image-design
```

--------------------------------

### Basic Chart Synchronization

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/charts/features/chart-synchronization.md

This example demonstrates the basic setup for synchronizing two {Platform} data charts. Ensure that the `SyncChannel` property is set to the same value for charts intended to be synchronized.

```javascript
this.chart1 = new Infragistics.Controls.Charts.XamDataChart({
    targetElementConfig: {
        element: "chart1"
    },
    options: {
        horizontalZoomEnabled: true,
        verticalZoomEnabled: true,
        syncChannel: "channel1",
        synchronizeHorizontally: true,
        synchronizeVertically: true
    }
});

this.chart2 = new Infragistics.Controls.Charts.XamDataChart({
    targetElementConfig: {
        element: "chart2"
    },
    options: {
        horizontalZoomEnabled: true,
        verticalZoomEnabled: true,
        syncChannel: "channel1",
        synchronizeHorizontally: true,
        synchronizeVertically: true
    }
});
```

--------------------------------

### {Platform} Dashboard Tile Example

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/dashboard-tile.md

This example demonstrates the {Platform} Dashboard Tile component with local data. It automatically selects an appropriate visualization based on the provided data.

```html
<div class="sample-container">
    <igc-dashboard-tile 
        sample="/charts/dashboard-tile/local-data-source-dashboard"
        height="600"
        alt="{Platform} Dashboard Tile Example">
    </igc-dashboard-tile>
</div>
```

--------------------------------

### Basic {Platform} Pivot Grid Setup

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/pivot-grid/overview.md

Defines the basic structure for an {Platform} Pivot Grid component using its configuration property. This is the starting point for most Pivot Grid implementations.

```html
<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
</igx-pivot-grid>
```

```html
<igc-pivot-grid #grid1 data="data" pivot-configuration="pivotConfigHierarchy">
</igc-pivot-grid>
```

```razor
<IgbPivotGrid PivotConfiguration="PivotConfiguration" Data="PivotData">
</IgbPivotGrid>
```

```tsx
<IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration}>
</IgrPivotGrid>
```

--------------------------------

### Web Components: Search Icon Buttons

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/_shared/search.md

This Web Components example sets up icon buttons for navigating search results. It includes HTML for the buttons and TypeScript for event listener setup.

```html
<div slot="suffix">
    <igc-icon-button id="prevIconBtn" variant="flat" name="prev" collection="material" ></igc-icon-button>
    <igc-icon-button id="nextIconBtn" variant="flat" name="next" collection="material"></igc-icon-button>
</div>
```

```typescript
constructor() {
    const nextIconButton = this.nextIconButton = document.getElementById('nextIconBtn') as IgcIconButtonComponent;
    const prevIconButton = this.prevIconButton = document.getElementById('prevIconBtn') as IgcIconButtonComponent;
    nextIconButton.addEventListener("click", this.nextSearch);
    prevIconButton.addEventListener("click", this.prevSearch);
}
```

--------------------------------

### Build Documentation for Blazor

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/PORTING.md

Use this command to build the documentation specifically for the Blazor platform.

```bash
yarn run buildBlazor
```

--------------------------------

### Configure Row Grouping in Web Components Data Grid

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/data-grid/row-grouping.md

Utilize IgcColumnGroupDescription for defining grouping criteria in web components. This example shows setup within the connectedCallback lifecycle hook.

```typescript
import { IgcIgcColumnGroupDescription } from 'igniteui-webcomponents-data-grids';
import { ListSortDirection } from 'igniteui-webcomponents-core';
import { GroupHeaderDisplayMode } from 'igniteui-webcomponents-core';

public connectedCallback() {
    const state = new IgcColumnGroupDescription();
    state.field = "Country";
    state.displayName = "Location";
    state.sortDirection = ListSortDirection.Descending;
    const city = new IgcColumnGroupDescription();
    city.field = "City";
    city.displayName = "";
    const income = new IgcColumnGroupDescription();
    income.field = "Income";
    income.displayName = "Income";

    this.grid = document.getElementById("grid") as IgcDataGridComponent;
    this.grid.groupDescriptions.add(state);
    this.grid.groupDescriptions.add(city);
    this.grid.groupDescriptions.add(income);

    this.grid.isGroupCollapsable = true;
    this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split;
}
```

--------------------------------

### Web Components: Grid Template for Conditional Styling

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/_shared/conditional-cell-styling.md

A Web Component grid template setup for conditional cell styling. This example shows the basic structure for defining columns and their properties.

```html
<{ComponentSelector} id="grid1" height="500px" width="100%" >
  <igc-column id="Col1" field="Col1" data-type="number"></igc-column>
  <igc-column id="Col2" field="Col2" data-type="number" editable="true"></igc-column>
  <igc-column id="Col3" field="Col3" header="Col3" data-type="string"></igc-column>
<{ComponentSelector}>
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/general-getting-started.md

Change your current directory to the newly created project folder.

```cmd
cd wc-html
```

--------------------------------

### Adding CellEdit Event Listener (Grid - WebComponents)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/_shared/cell-editing.md

Example of adding a 'cellEdit' event listener to an IgcGridComponent in Web Components. This setup is necessary to handle cell editing events programmatically.

```typescript
constructor() {
    var grid = document.getElementById('grid') as IgcGridComponent;
    this.webGridCellEdit = this.webGridCellEdit.bind(this);
    grid.addEventListener("cellEdit", this.webGridCellEdit);
}
```

--------------------------------

### Create Project with Direct Command (WebComponents)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/ai/cli-mcp.md

Create a new WebComponents project with a specific template using a direct command. This allows for quick setup of projects with a side navigation structure.

```bash
ig new my-app --framework=webcomponents --template=side-nav
```

--------------------------------

### Basic {Platform} Donut Chart

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/charts/types/donut-chart.md

Create a Donut Chart using the XamDoughnutChart control by binding your data. This example demonstrates the basic setup for displaying data in a donut chart format.

```xml
<ig:XamDoughnutChart Name="MyDoughnutChart" Height="600" />
```

--------------------------------

### Build and Run Application with Ignite UI CLI

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/kr/components/general-cli-overview.md

Use 'ig build' to compile your application and 'ig run' to start the development server and open it in your browser.

```cmd
ig build
ig run
```

--------------------------------

### Build Docs for Different Frameworks

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/TESTING.md

Use these npm scripts to build documentation for Angular, Blazor, React, and Web Components.

```bash
npm run buildAngular
npm run buildBlazor
npm run buildReact
npm run buildWebComponents
```

--------------------------------

### Create Project with Direct Command (Angular)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/ai/cli-mcp.md

Create a new Angular project with specific settings using a direct command. This bypasses the guided prompts and allows for immediate project setup.

```bash
ig new my-app --framework=angular --type=igx-ts --template=empty
```

--------------------------------

### Tree Grid with Multi-Column Headers (Angular)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/_shared/multi-column-headers.md

Configure multi-column headers in the Angular Tree Grid using `igx-column-group`. This example shows a basic setup with sortable and resizable columns within a group.

```html
<{ComponentSelector} [data]="data" primaryKey="ID" foreignKey="ParentID" [moving]="true">
    <igx-column-group header="Contact Information">
        <igx-column field="Phone" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
    </igx-column-group>
    <igx-column field="Name" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
    <igx-column field="Title" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [resizable]="true"></igx-column>
</{ComponentSelector}>
```

--------------------------------

### Install Ignite UI and Add Skills (Web Components)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/ai/ai-assisted-development-overview.md

Install the Ignite UI Web Components package and then re-run the `ai-config` command to add AI skills to your project.

```bash
npm install igniteui-webcomponents
npx igniteui-cli@latest ai-config
```

--------------------------------

### Grid Multi-Column Headers Configuration

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/_shared/multi-column-headers.md

Configure multi-column headers by wrapping columns within an `igx-column-group` or equivalent component, specifying a header title. This example shows the basic setup for the Grid component.

```html
<{ComponentSelector} [data]="data" [allowFiltering]="true">
    <igx-column-group header="Contact Information">
        <igx-column sortable="true" resizable="true" field="Phone"></igx-column>
        <igx-column sortable="true" resizable="true" field="Fax"></igx-column>
        <igx-column sortable="true" resizable="true" field="PostalCode"></igx-column>
    </igx-column-group>
</{ComponentSelector}>
```

```razor
<{ComponentSelector} Data=data AllowFiltering=true>
    <IgbColumnGroup Header="Contact Information">
        <IgbColumn Field="Phone" Sortable=true Resizable=true></IgbColumn>
        <IgbColumn Field="Fax" Sortable=true Resizable=true></IgbColumn>
        <IgbColumn Field="PostalCode" Sortable=true Resizable=true></IgbColumn>
    </IgbColumnGroup>
</{ComponentSelector}>
```

```html
<{ComponentSelector} allow-filtering="true">
    <igc-column-group header="Contact Information">
        <igc-column sortable="true" resizable="true" field="Phone"></igc-column>
        <igc-column sortable="true" resizable="true" field="Fax"></igc-column>
        <igc-column sortable="true" resizable="true" field="PostalCode"></igc-column>
    </igc-column-group>
</{ComponentSelector}>
```

```tsx
<{ComponentSelector} allowFiltering={true}>
    <IgrColumnGroup header="Contact Information">
        <IgrColumn sortable={true} resizable={true} field="Phone"></IgrColumn>
        <IgrColumn sortable={true} resizable={true} field="Fax"></IgrColumn>
        <IgrColumn sortable={true} resizable={true} field="PostalCode"></IgrColumn>
    </IgrColumnGroup>
</{ComponentSelector}>
```

--------------------------------

### Get selected data examples (TypeScript)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/_shared/cell-selection.md

Illustrates the format of data returned by `GetSelectedData` based on different selection scenarios, such as single cells, cells in a column, cells in a row, or multiple ranges.

```typescript
expectedData = [
    { CompanyName: 'Infragistics' },
    { Name: 'Michael Langdon' },
    { ParentID: 147 }
];
```

```typescript
expectedData = [
    { Address: 'Obere Str. 57'},
    { Address: 'Avda. de la Constitución 2222'},
    { Address: 'Mataderos 2312'}
];
```

```typescript
expectedData = [
    { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];
```

```typescript
expectedData = [
    { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
    { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];
```

```typescript
expectedData = [
    { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
    { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
    { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
    { Address: 'Fauntleroy Circus', City: 'London'}
];
```

```typescript
expectedData = [
    { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
    { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
    { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
    { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
];
```

--------------------------------

### Install WebComponents Skills (Workspace Scope)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/ai/skills.md

Installs WebComponents related Gemini skills to the current project's workspace scope. Ensure the GitHub link is valid.

```bash
gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-choose-components
gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-customize-component-theme
gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-optimize-bundle-size
gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-integrate-with-framework
gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-generate-from-image-design
```

--------------------------------

### Calendar Localization and Formatting

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/kr/components/scheduling/calendar.md

Customize the calendar's locale, month, and weekday formatting. This example sets the week to start on Monday and allows users to select different locales via radio buttons.

```html
<igc-radio-group alignment="horizontal">
    <igc-radio name="locale" value="en" checked>EN</igc-radio>
    <igc-radio name="locale" value="de">DE</igc-radio>
    <igc-radio name="locale" value="fr">FR</igc-radio>
    <igc-radio name="locale" value="ar">AR</igc-radio>
    <igc-radio name="locale" value="ja">JA</igc-radio>
</igc-radio-group>

<igc-calendar
    id="calendar1"
    week-start="monday">
</igc-calendar>
```

```typescript
this.calendar = document.getElementById('calendar1') as IgcCalendarComponent;
this.calendar.formatOptions = {
    month: 'short',
    weekday: 'short'
};

this.radios = document.querySelectorAll('igc-radio') as NodeListOf<IgcRadioComponent>;
this.radios.forEach(radio => {
    radio.addEventListener('igcChange', () => {
        if (radio.checked) {
            this.calendar.locale = radio.value;
        }
    });
})
```

--------------------------------

### Host Docs Locally for Different Frameworks

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/TESTING.md

Use these npm scripts to host documentation locally for Angular, Blazor, React, and Web Components.

```bash
npm run startAngular
npm run startBlazor
npm run startReact
npm run startWebComponents
```

--------------------------------

### Linear Gauge with All Features Enabled (TypeScript)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/linear-gauge.md

This snippet demonstrates the IgxLinearGauge component configured with all available properties in TypeScript. It mirrors the HTML example, providing a comprehensive setup for labels, ticks, needles, scales, backing, and ranges.

```tsx
<IgrLinearGauge
    height="80px" width="400px"
    minimumValue={0}
    maximumValue={100}

    labelInterval={10}
    labelExtent={0.025}
    labelsPreTerminal={0}
    labelsPostInitial={0}
    fontBrush="Black"
    font="11px Verdana"

    interval={10}
    tickBrush="Black"
    ticksPreTerminal={0}
    ticksPostInitial={0}
    tickStrokeThickness={2}
    tickStartExtent={0.25}
    tickEndExtent={0.05}

    minorTickCount={4}
    minorTickBrush="Black"
    minorTickEndExtent={0.05}
    minorTickStartExtent={0.15}
    minorTickStrokeThickness={1}

    value={50}
    isNeedleDraggingEnabled={true}
    needleShape="Custom"
    needleBrush="Black"
    needleOutline="Black"
    needleStrokeThickness={1}
    needleBreadth={15}
    needleInnerExtent={0.35}
    needleOuterExtent={0.65}
    needleOuterPointExtent={0.8}
    needleInnerPointExtent={0.325}
    needleInnerPointWidth={0}
    needleOuterPointWidth={0.3}
    needleInnerBaseWidth={0}
    needleOuterBaseWidth={0.07}

    isScaleInverted={false}
    scaleBrush="Gray"
    scaleOutline="Gray"
    scaleStrokeThickness={1}
    scaleInnerExtent={0.05}
    scaleOuterExtent={0.65}
    scaleStartExtent={0.05}
    scaleEndExtent={0.95}

    backingBrush="#cecece"
    backingOutline="#cecece"
    backingStrokeThickness={4}
    backingInnerExtent={0}
    backingOuterExtent={1}

    rangeBrushes ="#C62828, #F96232, #FF9800"
    rangeOutlines="#C62828, #F96232, #FF9800">
    <IgrLinearGraphRange
        startValue={0} endValue={50}
        innerStartExtent={0.075} innerEndExtent={0.075}
        outerStartExtent={0.25} outerEndExtent={0.4} />
    <IgrLinearGraphRange
        startValue={50} endValue={100}
        innerStartExtent={0.075} innerEndExtent={0.075}
        outerStartExtent={0.4} outerEndExtent={0.55} />
</IgrLinearGauge>
```

--------------------------------

### Start Local Documentation Server

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/README.md

Starts the DocFX documentation server locally. Requires administrator privileges for PowerShell. This command serves English documentation for the Blazor platform by default.

```cmd
yarn start
```

--------------------------------

### Install React Skills (User Scope)

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/ai/skills.md

Installs React related Gemini skills to the user's global scope. Ensure the GitHub link is valid.

```bash
gemini skills install {GithubLink}.git --path skills/igniteui-react-components
gemini skills install {GithubLink}.git --path skills/igniteui-react-customize-theme
gemini skills install {GithubLink}.git --path skills/igniteui-react-optimize-bundle-size
gemini skills install {GithubLink}.git --path skills/igniteui-react-generate-from-image-design
```

--------------------------------

### Extend Chat Input Actions with Custom Buttons in React

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/interactivity/chat.md

Customize the start and end actions of the chat input area in React. This example shows adding a microphone button and replacing the send button with custom controls.

```tsx
const _actionsStartTemplate = () => (
  <IgrIconButton variant="flat">🎤</IgrIconButton>
);

const _actionsEndTemplate = (ctx) => (
  <div>
    <IgrButton onClick={() => handleCustomSendClick(ctx.instance)}>Ask</IgrButton>
    <IgrIconButton variant="flat" name="more_horiz"></IgrIconButton>
  </div>
);

const options = {
  renderers: {
    inputActionsStart: _actionsStartTemplate,
    inputActionsEnd: _actionsEndTemplate,
    sendButton: () => null,
  },
};
```

--------------------------------

### Extend Chat Input Actions with Custom Buttons

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/interactivity/chat.md

Customize the start and end actions of the chat input area using renderers. This example demonstrates adding a microphone button and replacing the send button with custom controls in WebComponents.

```typescript
const _actionsStartTemplate = () => html`
  <igc-icon-button variant="flat">🎤</igc-icon-button>
`;

const _actionsEndTemplate = (ctx: ChatRenderContext) => html`
  <div>
    <igc-button @click=${() => handleCustomSendClick(ctx.instance)}>Ask</igc-button>
    <igc-icon-button variant="flat" name="more_horiz"></igc-icon-button>
  </div>
`;

const options = {
  renderers: {
    inputActionsStart: _actionsStartTemplate,
    inputActionsEnd: _actionsEndTemplate,
    sendButton: () => nothing,
  },
};
```

--------------------------------

### {Platform} Binding Periodic Table Example

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/data-grid/type-periodic-table.md

This example showcases the creation of a periodic table using template columns in the {ProductName} Data Grid. It is intended for use with Blazor and WebComponents.

```html
<igc-data-grid auto-generate-columns="false" height="600px" width="100%">
    <igc-grid-column field="atomicNumber" header="Atomic Number" width="120" 
        > 
    </igc-grid-column>
    <igc-grid-column field="symbol" header="Symbol" width="80" 
        > 
    </igc-grid-column>
    <igc-grid-column field="name" header="Name" width="150" 
        > 
    </igc-grid-column>
    <igc-grid-column field="atomicMass" header="Atomic Mass" width="120" 
        > 
    </igc-grid-column>
    <igc-grid-column field="electronicConfiguration" header="Electronic Configuration" width="200" 
        > 
    </igc-grid-column>
    <igc-grid-column field="atomicRadius" header="Atomic Radius" width="120" 
        > 
    </igc-grid-column>
    <igc-grid-column field="electronegativity" header="Electronegativity" width="150" 
        > 
    </igc-grid-column>
    <igc-grid-column field="ionizationEnergy" header="Ionization Energy" width="150" 
        > 
    </igc-grid-column>
    <igc-grid-column field="group" header="Group" width="80" 
        > 
    </igc-grid-column>
    <igc-grid-column field="period" header="Period" width="80" 
        > 
    </igc-grid-column>
    <igc-grid-column field="phase" header="Phase" width="80" 
        > 
    </igc-grid-column>
    <igc-grid-column field="state" header="State" width="80" 
        > 
    </igc-grid-column>
    <igc-grid-column field="metallic" header="Metallic" width="80" 
        > 
    </igc-grid-column>
    <igc-grid-column field="natural" header="Natural" width="80" 
        > 
    </igc-grid-column>
    <igc-grid-column field="discoveredBy" header="Discovered By" width="150" 
        > 
    </igc-grid-column>
</igc-data-grid>
```

--------------------------------

### Web Components TreeGrid Search Input

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/grids/_shared/search.md

Integrate a search input with the TreeGrid using Web Components. This example shows how to get references to the search input and chip components, and use them to perform a search with case sensitivity and exact match options.

```html
<igc-input id="searchBox" name="searchBox">
</igc-input>
```

```typescript
constructor() {
    this.searchBox = document.getElementById('searchBox') as IgcInputComponent;
    this.caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent;
    this.exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent;
}

public nextSearch() {
    this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}
```

--------------------------------

### Start Documentation with Language Switch

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/README.md

Use the --lang switch to view documentation output in a different language, such as Japanese.

```cmd
yarn startWC --lang=jp
```

```cmd
yarn startReact --lang=jp
```

```cmd
yarn startBlazor --lang=jp
```

--------------------------------

### Date Range Picker CSS Parts Styling

Source: https://github.com/igniteui/igniteui-xplat-docs/blob/vnext/doc/en/components/scheduling/date-range-picker.md

Style specific parts of the DateRangePicker, such as labels, calendar icons, and clear icons, using CSS custom properties. This example demonstrates how to target the start and end calendar icons and clear icons for different states.

```css
igc-date-range-picker::part(label) {
  color: var(--ig-gray-600);
}

igc-date-range-picker::part(calendar-icon-start),
igc-date-range-picker::part(calendar-icon-end) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

igc-date-range-picker::part(calendar-icon-open-start),
igc-date-range-picker::part(calendar-icon-open-end) {
  background-color: var(--ig-primary-700);
  color: var(--ig-primary-700-contrast);
}

igc-date-range-picker::part(clear-icon-start),
igc-date-range-picker::part(clear-icon-end) {
  background-color: var(--ig-error-500);
  color: var(--ig-error-500-contrast);
}
```