### Installation Step 2

Source: https://github.com/igniteui/igniteui-angular/blob/master/readme-template.md

A subsequent installation step. Continue following the provided examples to finish the setup.

```plaintext
until finished
```

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

### Installation Step 1

Source: https://github.com/igniteui/igniteui-angular/blob/master/readme-template.md

The first step in the installation process. Follow the subsequent steps for complete setup.

```plaintext
Give the example
```

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

### Install Project Dependencies

Source: https://github.com/igniteui/igniteui-angular/blob/master/README.md

Installs all necessary dependencies for the project from the root folder.

```bash
npm install
```

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

### Getting Started with IgxPaginator

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/paginator/README.md

Demonstrates the basic setup of the IgxPaginator component in an Angular application. Import the component and configure total records and items per page.

```typescript
import { Component } from '@angular/core';
import { IgxPaginatorComponent } from 'igniteui-angular/paginator';

@Component({
        selector: 'app-sample',
        standalone: true,
        imports: [IgxPaginatorComponent],
        template: \
            <igx-paginator
                [totalRecords]="total"
                [perPage]="perPage"
                (perPageChange)="perPage = $event"
                (pageChange)="handlePage($event)">
            </igx-paginator>
        \
})
export class SampleComponent {
        public total = 250;
        public perPage = 25;

        public handlePage(index: number): void {
                // Load the data chunk for the requested page.
        }
}
```

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

### Time Picker with Start Hint

Source: https://github.com/igniteui/igniteui-angular/wiki/Time-Picker-Specification

Displays a hint text at the start of the time picker input, providing an example format.

```html
<igx-time-picker #picker>
    <igx-hint position="start">Ex.: 09:20:00</igx-hint>
</igx-time-picker>
```

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

### Install Tile Manager Web Components

Source: https://github.com/igniteui/igniteui-angular/blob/master/skills/igniteui-angular-components/references/layout-manager.md

Install the necessary package for Tile Manager functionality. This is a prerequisite for using the component.

```bash
npm install igniteui-webcomponents
```

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

### Getting Started with IgxSplitter

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/splitter/README.md

Demonstrates the basic setup of the IgxSplitter component in a standalone Angular component. Imports `IGX_SPLITTER_DIRECTIVES` for standalone usage.

```typescript
import { Component } from '@angular/core';
import { IGX_SPLITTER_DIRECTIVES, SplitterType } from 'igniteui-angular/splitter';

@Component({
		selector: 'app-split-layout',
		standalone: true,
		imports: [IGX_SPLITTER_DIRECTIVES],
		template: \
			<igx-splitter [type]="orientation">
				<igx-splitter-pane [size]="'30%'">Navigation</igx-splitter-pane>
				<igx-splitter-pane>Content</igx-splitter-pane>
			</igx-splitter>
		"
})
export class SplitLayoutComponent {
		public orientation = SplitterType.Horizontal;
}
```

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

### Run Performance Application

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular-performance/README.md

Execute this command to start the performance sample applications.

```sh
npm run start:performance
```

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

### WC Card Example with Media and Header

Source: https://github.com/igniteui/igniteui-angular/blob/master/src/app/card/card.sample.html

Shows a Web Component (WC) card example, including a media element (image) and header details, using similar templating logic as the Angular card.

```html
@for(section of sectionOrder; track section) { @if(section === 'media' && !properties.hideMedia) { ![](assets/images/card/media/ny.jpg) } @if(section === 'header' && !properties.hideHeader) { @if(!hideThumbnail) { } @if(!hideTitle) { New York City } @if(!hideSubtitle) { City in New York } } @if(section === 'content' && !properties.hideContent) { New York City comspanrises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is Manhattan, a densely populated borough that’s among the world’s major commercial, financial and cultural centers. } @if(section === 'actions' && !properties.hideActions) { Read More @for(icon of cards[0].icons; track icon) { } } }
```

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

### Install IgxGridLite

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/grids/lite/README.md

Install the necessary Ignite UI packages for Angular and the web component powering the grid.

```shell
npm install igniteui-grid-lite
```

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

### Run Demo Application

Source: https://github.com/igniteui/igniteui-angular/blob/master/README.md

Starts the sample application that showcases different Ignite UI components and directives.

```bash
npm start
```

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

### Basic IgxSelect Usage

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/select/README.md

Demonstrates the basic declarative setup of the IgxSelect component with a list of items.

```html
<igx-select>
    <igx-select-item [value]="1">Sofia</igx-select-item>
    <igx-select-item [value]="2">London</igx-select-item>
    <igx-select-item [value]="3">Paris</igx-select-item>
    <igx-select-item [value]="4">New York</igx-select-item>
</igx-select>
```

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

### Migration Collection Schema Example

Source: https://github.com/igniteui/igniteui-angular/wiki/Update-Migrations

An example of the `migration-collection.json` file structure, defining individual migrations with their version, description, and factory path.

```json
{
  "schematics": {
  "migration-01": {
    "version": "6.0.0",
    "description": "Updates Ignite UI for Angular from v5 to v6",
    "factory": "./update-6"
  }
  //...
}
```

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

### Basic Date Range Picker Setup

Source: https://github.com/igniteui/igniteui-angular/blob/master/skills/igniteui-angular-components/references/form-controls.md

A basic configuration of the date range picker with two input fields for start and end dates.

```html
<igx-date-range-picker [(ngModel)]="dateRange">
  <igx-date-range-start>
    <input igxInput igxDateTimeEditor type="text" />
  </igx-date-range-start>
  <igx-date-range-end>
    <input igxInput igxDateTimeEditor type="text" />
  </igx-date-range-end>
</igx-date-range-picker>
```

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

### Install IgxGridLite

Source: https://github.com/igniteui/igniteui-angular/blob/master/skills/igniteui-angular-grids/references/types.md

Install the IgxGridLite npm package using npm.

```bash
npm install igniteui-grid-lite
```

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

### Example Dependency

Source: https://github.com/igniteui/igniteui-angular/blob/master/readme-template.md

This is an example of a dependency that might be required. Specific dependencies will vary based on project needs.

```plaintext
Give examples
```

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

### Full-Window Grid Setup (CSS)

Source: https://github.com/igniteui/igniteui-angular/blob/master/skills/igniteui-angular-grids/references/sizing.md

To make the grid fill the entire browser window, set the height of the html, body, and a specific container element to 100%. This CSS setup is required for the `height="100%"` on the grid to work as expected for full-window coverage.

```css
html, body, .grid-container {
  height: 100%;
}
```

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

### Basic Configuration

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/progressbar/README.md

Example of how to configure and use `igx-circular-bar` and `igx-linear-bar` components in your HTML template.

```APIDOC
<igx-circular-bar [value]="currentValue" [max]="100" [animate]="true" [textVisibility]="false" (progressChanged)="progresChange($event)"></igx-circular-bar>

<igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [textTop]="true" [striped]="true" [textVisibility]="true" (progressChanged)="progresChange($event)"></igx-linear-bar>
```

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

### Install Ignite UI Angular Premium Package

Source: https://github.com/igniteui/igniteui-angular/blob/master/skills/igniteui-angular-grids/references/grid-migration.md

Use npm to install the `igniteui-angular` package for the Premium Grid. If you have a licensed version, use the `@infragistics/igniteui-angular` package and ensure your private registry is configured.

```bash
# Open-source package
npm install igniteui-angular

# OR licensed package (requires private registry)
npm install @infragistics/igniteui-angular
```

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

### Package and Install Local Build

Source: https://github.com/igniteui/igniteui-angular/wiki/Update-Migrations

Alternatively, package the local build using `npm pack`, install the generated .tgz file in the consuming project, and then run `ng add` and `ng update`.

```bash
npm pack
npm install .\igniteui-angular-0.0.1.tgz
ng add igniteui-angular
ng update igniteui-angular
```

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

### Install Ignite UI Angular

Source: https://github.com/igniteui/igniteui-angular/blob/master/skills/igniteui-angular-components/references/setup.md

Install the Ignite UI Angular components using npm. Choose the open-source package or the licensed version if you have a subscription.

```bash
# Open-source
npm install igniteui-angular

# Licensed (requires @infragistics registry configured)
npm install @infragistics/igniteui-angular
```

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

### Simple Tooltip Example

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/directives/src/directives/tooltip/README.md

This example demonstrates how to create a basic tooltip for a button. The IgxTooltipTarget directive is applied to the button, and the IgxTooltip directive is applied to the element that will serve as the tooltip content.

```html
<button type="button" igxButton [igxTooltipTarget]="tooltipRef">
    Hover me
</button>

<div #tooltipRef="tooltip" igxTooltip>
    Hello there, this is a tooltip!
</div>
```

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

### Install Dock Manager Package

Source: https://github.com/igniteui/igniteui-angular/blob/master/skills/igniteui-angular-components/references/layout-manager.md

Install the igniteui-dockmanager package using npm. This is the first step to using the Dock Manager component.

```bash
npm install igniteui-dockmanager
```

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

### Custom Overlay Settings for IgxSelect

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/select/README.md

Provides an example of customizing the overlay behavior of IgxSelect by passing custom OverlaySettings.

```html
<igx-select [overlaySettings]="customOverlaySettings">
    <igx-select-item *ngFor="let item of items">
        {{item}}
    </igx-select-item>
</igx-select>
```

```typescript
export class MyClass implements OnInit {
    @ViewChild(IgxSelectComponent)
    public igxSelect: IgxSelectComponent;
    public items: string[] = ["Orange", "Apple", "Banana", "Mango", "Tomato"];
    public customOverlaySettings: OverlaySettings;
    public ngOnInit(): void {
        const positionSettings: PositionSettings = {
            closeAnimation: slideOutRight,
            horizontalDirection: HorizontalAlignment.Right,
            horizontalStartPoint: HorizontalAlignment.Left,
            openAnimation: slideInLeft,
            target: this.igxSelect.inputGroup.element.nativeElement,
            verticalDirection: VerticalAlignment.Bottom,
            verticalStartPoint: VerticalAlignment.Bottom
        };
        this.customOverlaySettings = {
            closeOnOutsideClick: false,
            modal: true,
            positionStrategy: new ConnectedPositioningStrategy(
                positionSettings
            ),
            scrollStrategy: new AbsoluteScrollStrategy()
        };
    }
}
```

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

### Simple Tooltip Example

Source: https://github.com/igniteui/igniteui-angular/blob/master/src/app/tooltip/tooltip.sample.html

Demonstrates a basic tooltip with a simple text content. This is useful for providing concise information on hover.

```html
<igc-tooltip>Her name is Toola Tipa</igc-tooltip>
```

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

### Column Visibility Example

Source: https://github.com/igniteui/igniteui-angular/blob/master/src/app/grid-column-pinning/grid-column-pinning.sample.html

Shows how to control the visibility of columns, specifically 'ID' and 'ContactName', 'ContactTitle'.

```html
Visibility 'ID'
Visibility 'ContactName'
Visibility 'ContactTitle'
```

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

### Basic TestBed Setup for Component Initialization

Source: https://github.com/igniteui/igniteui-angular/wiki/Test-implementation-guidelines-for-Ignite-UI-for-Angular

Use `describe` to group tests by feature and `beforeAll` with `TestBed.configureTestingModule` to set up the testing module. Declare components used in the tests and import necessary modules like `IgxComboModule`.

```typescript
describe('Initialization and rendering tests: ', () => {
    configureTestSuite();
    beforeAll(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                <b>IgxComboSampleComponent</b>
            ],
            imports: [
                IgxComboModule,
                NoopAnimationsModule,
                IgxToggleModule
            ]
        }).compileComponents();
    }));
    ...

```

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

### Define IgxPivotDateDimension

Source: https://github.com/igniteui/igniteui-angular/wiki/igxPivotGrid-Specification

Instantiate the IgxPivotDateDimension for row or column dimensions in IPivotConfiguration. This example shows the basic setup for a 'Date' member.

```typescript
public pivotConfigHierarchy: IPivotConfiguration = {
    rows: [
        new IgxPivotDateDimension({ memberName: 'Date', enabled: true });
    ]
}
```

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

### Get Row using Row Index (Legacy)

Source: https://github.com/igniteui/igniteui-angular/wiki/IgxGrid-primaryKey-Specification

Example of retrieving a row component using its row index (1).

```typescript
this.gridAPI.get_row(this.gridID, 1)
```

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

### Usage Example: Applying Data Operations

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/core/src/data-operations/README-DATACONTAINER.md

Demonstrates how to initialize DataContainer and apply filtering, sorting, and paging using the `process` method.

```typescript
let items: Array<Object> = [
            { id: 1, text: "Item 1" },
            { id: 2, text: "Item 2" },
            { id: 3, text: "Item 3" },
            { id: 4, text: "Item 4" },
            { id: 5, text: "Item 5" },
            { id: 6, text: "Item 6" }
        ];

        let state: DataState = {
                    filtering: {
                        expressions: [{
                            fieldName: "id", 
                            condition: FilteringCondition.number.greaterThan, 
                            searchVal: 1}]
                    },
                    sorting: {
                            expressions: [
                                {
                                    fieldName: "text",
                                    dir: SortingDirection.Desc
                                }
                            ]
                        },
                    paging: {
                        index: 0,
                        recordsPerPage: 2
                    }
                };
        
        let dataContainer: DataContainer = new DataContainer(items);
        dataContainer.process(state);
        let res = dataContainer.transformedData;
```

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

### Get Row using Primary Key

Source: https://github.com/igniteui/igniteui-angular/wiki/IgxGrid-primaryKey-Specification

Example of retrieving a row component using its primary key value ('A2').

```typescript
this.gridAPI.get_row(this.gridID,"A2")
```

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

### Configuring Virtualized Drop Down Items with *igxFor

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/drop-down/README.md

Demonstrates how to use the `*igxFor` directive for virtualized lists, including required properties like `scrollOrientation`, `containerSize`, and `itemSize`.

```html
    <igx-drop-down>
        <div class="wrapping-div">
            <igx-drop-down-item *igxFor="let item of localItems; index as index; scrollOrientation: 'vertical'; containerSize: itemsMaxHeight; itemSize: itemHeight;"
            [value]="item" [index]="index"
            >
                {{ item.data }}
            </igx-drop-down-item>
        </div>
    </igx-drop-down>
```

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

### Date Range Picker with Custom Icons

Source: https://github.com/igniteui/igniteui-angular/wiki/Date-Range-Picker-Specification

Example of a date range picker with manually added IgxPickerToggleComponent and IgxPickerClearComponent within the start date input for custom icons.

```html
<igx-date-range-picker>
    <igx-date-range-start>
        ...
        <igx-picker-toggle igxPrefix>
            <igx-icon>calendar_view_day</igx-icon>
        </igx-picker-toggle>
        <igx-picker-clear igxSuffix>
            <igx-icon>clear</igx-icon>
        </igx-picker-clear>
        ...
    </igx-date-range-start>
    <igx-date-range-end>
        ...
    </igx-date-range-end>
</igx-date-range-picker>
```

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

### Tooltip Settings Configuration

Source: https://github.com/igniteui/igniteui-angular/blob/master/src/app/tooltip/tooltip.sample.html

Illustrates how to configure tooltip settings like show and hide delays, and provides examples of showing and hiding the tooltip programmatically.

```html
Show Delay: {{target.showDelay}}
Hide Delay: {{target.hideDelay}}

<button (click)="tooltip.show()">Show Tooltip</button>
<button (click)="tooltip.hide()">Hide Tooltip</button>
```

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

### Date Range Picker Without Forms

Source: https://github.com/igniteui/igniteui-angular/blob/master/src/app/date-range/date-range.sample.html

Showcases the Date Range Picker in a standalone configuration, without form integration. Includes examples for changing locale, week start day, and using predefined/custom ranges.

```html
Default range picker with predefined and custom ranges

Drop down single input with custom suffix

calendar_view_day

Dialog two inputs with prefix

calendar_view_day clear
calendar_view_day clear
```

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

### Angular Date Range Picker with Template-Driven Form

Source: https://github.com/igniteui/igniteui-angular/blob/master/src/app/date-range/date-range.sample.html

Configure the Date Range Picker within a template-driven form, including optional header, title, separator, and hint content. This example shows how to bind start and end dates.

```html
<igx-date-range
    clear
    start-date
    end-date>
    @if (properties.headerTemplate) { Custom header content }
    @if (properties.calendarTitle) { Custom calendar title }
    @if (properties.separator) { {{ properties.separator }} }
    @if (properties.hint) { {{ properties.hint }} }
</igx-date-range>
```

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

### TestBed Configuration with Multiple Components and Modules

Source: https://github.com/igniteui/igniteui-angular/wiki/Test-implementation-guidelines-for-Ignite-UI-for-Angular

For grid-related tests, configure the `TestBed` with relevant components like `SelectionWithScrollsComponent` and `SelectionWithTransactionsComponent`, and import `IgxGridModule` and `NoopAnimationsModule`.

```typescript
describe('IgxGrid - Multi Cell selection', () => {
    configureTestSuite();
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                SelectionWithScrollsComponent,
                SelectionWithTransactionsComponent
            ],
            imports: [NoopAnimationsModule, IgxGridModule]
        }).compileComponents();
    }));
    describe('Base', () => {
        ...
        beforeEach(fakeAsync(/** height/width setter rAF */() => {
           fixture = TestBed.createComponent(TestComponentX);
           ...
        }));

        it('Should be able to select a range with mouse dragging', () => {
...

```

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

### VS Code MCP Server Configuration

Source: https://github.com/igniteui/igniteui-angular/blob/master/skills/igniteui-angular-theming/references/mcp-setup.md

Configure the `.vscode/mcp.json` file for VS Code to enable the Ignite UI theming MCP server. This setup works whether the `igniteui-theming` package is installed locally or needs to be fetched from the npm registry.

```json
{
  "servers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}
```

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

### Install Ignite UI Package

Source: https://github.com/igniteui/igniteui-angular/blob/master/README.md

Installs the igniteui-angular package as a dependency in your project.

```bash
npm install igniteui-angular
```

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

### Configuring Grid Column Selection Modes

Source: https://github.com/igniteui/igniteui-angular/blob/master/src/app/grid-column-selection/grid-column-selection.sample.html

Demonstrates how to display and select different column selection modes for the grid.

```html
Grid 2 selection mode is: {{grid2.columnSelection}}

Selection mode: {{grid1.columnSelection}} expand_more @for (item of selectionModes; track item) { {{ item }} }
```

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

### IgxIcon Usage Example

Source: https://github.com/igniteui/igniteui-angular/wiki/Icon-Specification

Example of how to use the IgxIcon component in HTML markup.

```APIDOC
## Usage Example

```html
<igx-icon family="material" name="home" active="false">
</igx-icon>
```
```

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

### Basic IgxSplitter Configuration

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/splitter/README.md

Illustrates basic configuration of the IgxSplitter, including orientation, non-collapsible panes, and event handling for resize actions. Shows how to set pane sizes and control collapsed states.

```html
<igx-splitter
	[type]="SplitterType.Vertical"
	[nonCollapsible]="true"
	(resizeStart)="log('start', $event)"
	(resizing)="log('resize', $event)"
	(resizeEnd)="log('end', $event)">

	<igx-splitter-pane [minSize]="'200px'" [size]="'40%'">
		Filters
	</igx-splitter-pane>

	<igx-splitter-pane [collapsed]="detailsHidden" (collapsedChange)="detailsHidden = $event">
		Details
	</igx-splitter-pane>

</igx-splitter>
```

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

### Install ts-node for Debugging

Source: https://github.com/igniteui/igniteui-angular/wiki/Debug-&-test-migrations-&-schematics

Install 'ts-node' in your test project to enable debugging of TypeScript files.

```bash
npm i ts-node
```

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

### Build Schematics and Migrations

Source: https://github.com/igniteui/igniteui-angular/wiki/Debug-&-test-migrations-&-schematics

Commands to build the schematics and migrations for testing purposes. Ensure you are in the correct directory.

```bash
npm run build:lib
```

```bash
npm run build:schematics
```

```bash
npm run build:migrations
```

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

### Conditional Pinned Start Columns Rendering

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/grids/tree-grid/src/tree-grid-row.component.html

Conditionally renders content if there are pinned columns on the start side.

```html
@if (pinnedStartColumns.length > 0) { }
```

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

### Simple Snackbar Usage

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/snackbar/README.md

Demonstrates how to open a basic snackbar with a predefined message. Use the `open()` method on the snackbar instance to display it.

```html
<button type="button" igxButton (click)="snackbar.open()">Show snackbar</button>

<igx-snackbar #snackbar
            message="This is a simple snackbar!">
</igx-snackbar>
```

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

### Show Component with Custom Overlay Settings

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/core/src/services/overlay/README.md

Demonstrates how to display a component using the IgxOverlayService with specific overlay configuration settings.

```typescript
this.overlay.show(component, overlaySettings);
```

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

### HammerJS Installation for Touch Drag

Source: https://github.com/igniteui/igniteui-angular/blob/master/skills/igniteui-angular-components/references/directives.md

Instructions for installing HammerJS to enable touch-based drag and drop functionality in Angular projects.

```bash
npm install hammerjs
```

```json
// angular.json — inside your project's architect.build.options
"scripts": ["./node_modules/hammerjs/hammer.min.js"]
```

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

### Flat JSON Data Example

Source: https://github.com/igniteui/igniteui-angular/wiki/Pivot-Pipes-Specification

An example of flat JSON data structure used as input for pivot table transformations.

```json
[
    { "ProductCategory": "Clothing", "UnitPrice": 12.81, "SellerName": "Stanley", "Country": "Bulgaria", "Date": "01/01/2021", "UnitsSold": 282 },
    { "ProductCategory": "Clothing", "UnitPrice": 49.57, "SellerName": "Elisa", "Country": "USA", "Date": "01/05/2019", "UnitsSold": 296 },
    { "ProductCategory": "Bikes", "UnitPrice": 3.56, "SellerName": "Lydia", "Country": "Uruguay", "Date": "01/06/2020", "UnitsSold": 68 },
    { "ProductCategory": "Accessories", "UnitPrice": 85.58, "SellerName": "David", "Country": "USA", "Date": "04/07/2021", "UnitsSold": 293 },
    { "ProductCategory": "Components", "UnitPrice": 18.13, "SellerName": "John", "Country": "USA", "Date": "12/08/2021", "UnitsSold": 240 },
    { "ProductCategory": "Clothing", "UnitPrice": 68.33, "SellerName": "Larry", "Country": "Uruguay", "Date": "05/12/2020", "UnitsSold": 456 },
    { "ProductCategory": "Clothing", "UnitPrice": 16.05, "SellerName": "Walter", "Country": "Bulgaria", "Date": "02/19/2020", "UnitsSold": 492 }
]
```

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

### Navigation Drawer Mini Variant Setup

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/navigation-drawer/README.md

Illustrates how to enable the mini variant of the Navigation Drawer. This is achieved by providing an alternative template marked with `igxDrawerMini`, which displays only icons.

```html
<igx-nav-drawer id="navdrawer">
    <ng-template igxDrawer>
        <span igxDrawerItem [isHeader]="true"> Header </span>
        <span igxDrawerItem igxRipple>
            <igx-icon>home</igx-icon>
            <span>Home</span>
        </span>
    </ng-template>
    <ng-template igxDrawerMini>
        <span igxDrawerItem igxRipple>
            <igx-icon>home</igx-icon>
        </span>
    </ng-template>
</igx-nav-drawer>
```

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

### Build API Documentation

Source: https://github.com/igniteui/igniteui-angular/blob/master/README.md

Builds the API documentation for the library using TypeDoc and SassDoc.

```bash
npm run build:docs
```

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

### Install Ignite UI for Angular

Source: https://github.com/igniteui/igniteui-angular/blob/master/README.md

Installs the igniteui-angular and igniteui-cli packages to your project. This enables the use of Ignite UI CLI commands.

```bash
ng add igniteui-angular
```

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

### Pin/Unpin Column Example

Source: https://github.com/igniteui/igniteui-angular/blob/master/src/app/grid-column-pinning/grid-column-pinning.sample.html

Provides examples of pinning and unpinning specific columns like 'ContactName', 'ContactTitle', 'CompanyName', 'City', 'Region', and 'Address'.

```html
Pin/Unpin 'ContactName'
Pin/Unpin 'ContactTitle'
Pin/Unpin 'CompanyName'
Pin/Unpin 'City'
Pin/Unpin 'Region'
Pin/Unpin 'Address'
```

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

### Configuring Overlay Settings

Source: https://github.com/igniteui/igniteui-angular/wiki/Grid-Toolbar-Specification

Illustrates how to configure overlay settings for components like pinning and hiding within the grid toolbar actions.

```APIDOC
## IgxGridToolbarPinningComponent Input: overlaySettings

### Description
Configures the overlay settings for the column pinning dropdown.

### Type
any

### Default value
(Not specified)

## IgxGridToolbarHidingComponent Input: overlaySettings

### Description
Configures the overlay settings for the column hiding dropdown.

### Type
any

### Default value
(Not specified)

### Usage
```html
<igx-grid-toolbar-actions>
    <igx-grid-toolbar-pinning [overlaySettings]="overlaySettingsGlobal"></igx-grid-toolbar-pinning>
    <igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
    ...
```
```

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

### Basic Navigation Drawer Setup

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.html

Add the `<ng-template igxDrawer>` tag to your HTML to initialize the navigation drawer. Items within the drawer should be styled using `igxDrawerItem` and `igxRipple` directives for enhanced user experience.

```html
<ng-template igxDrawer>
    <div class="drawer-content">
        <div igxDrawerItem>
            <span class="igx-icon">home</span>
            <span>Home</span>
        </div>
        <div igxDrawerItem>
            <span class="igx-icon">settings</span>
            <span>Settings</span>
        </div>
        <div igxDrawerItem disabled>
            <span class="igx-icon">info</span>
            <span>About</span>
        </div>
    </div>
</ng-template>
```

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

### Angular List Component Setup

Source: https://github.com/igniteui/igniteui-angular/blob/master/skills/igniteui-angular-components/references/data-display.md

Import necessary directives and components for the IgxListComponent. This setup is required before using the list component in your Angular application.

```typescript
import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
import { IgxAvatarComponent } from 'igniteui-angular/avatar';
import { IgxIconComponent } from 'igniteui-angular/icon';
```

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

### Run Migration Command

Source: https://github.com/igniteui/igniteui-angular/wiki/Update-Migrations

Execute the migration using the schematic collection and migration name.

```bash
ng g igniteui-angular/migrations/migration-collection.json:migration-12
```

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

### IgxTree Static Tree Example

Source: https://github.com/igniteui/igniteui-angular/blob/master/src/app/tree/tree.sample.html

An example of a static tree structure, likely for demonstration or testing purposes, displaying company names in a hierarchical format.

```html
@for (node of data; track node) {
    {{ node.ID }}
    @if (node.ID === 'FRANS') { NA\_FRANCO\_DETETO }
    @for (child of node.ChildCompanies; track child) {
        {{ child.ID }}
        @for (leafchild of child.ChildCompanies; track leafchild) {
            {{ leafchild.ID }}
        }
    }
}
<a [href]="'https://google.com'" [igxRipple] [target]="'_blank'">Link to Google</a>
{{ expanded ? "close\_fullscreen": "open\_in\_full"}}
```

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

### Editable Inputs with Start and End Components

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/date-picker/src/date-range-picker/README.md

Configure the IgxDateRangePicker to use editable start and end date inputs by projecting IgxDateRangeStartComponent and IgxDateRangeEndComponent with IgxDateTimeEditorDirective.

```html
<igx-date-range-picker>
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.start">
    </igx-date-range-start>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.end">
    </igx-date-range-end>
</igx-date-range-picker>
```

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

### Install HammerJS for Touch Gestures

Source: https://github.com/igniteui/igniteui-angular/blob/master/skills/igniteui-angular-components/references/setup.md

To enable touch gesture support for components like Slider and Drag & Drop, install the `hammerjs` package and add its script to your `angular.json` configuration.

```bash
npm install hammerjs
```

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

### Correct vs. Avoided Multi-Entry-Point Imports

Source: https://github.com/igniteui/igniteui-angular/blob/master/skills/igniteui-angular-components/references/setup.md

Illustrates the correct way to import components from specific entry points for tree-shaking, and shows the avoided practice of importing from the root barrel which includes the entire library.

```typescript
// CORRECT — tree-shakeable, specific entry point
import { IgxComboComponent } from 'igniteui-angular/combo';
import { IgxDatePickerComponent } from 'igniteui-angular/date-picker';

// AVOID — pulls in entire library
import { IgxComboComponent } from 'igniteui-angular';
```

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

### Date Range Picker with Custom Week Start and Value Change Handler

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/date-picker/src/date-range-picker/README.md

Configures the IgxDateRangePicker to start the week on Monday and includes a handler for when the date range selection changes.

```html
<igx-date-range-picker [weekStart]="2" (valueChange)="onRangeSelected($event)"></igx-date-range-picker>
```

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

### Basic Grid Configuration with Columns

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/grids/grid/README.md

Defines the igx-grid with specific columns, including fields, widths, filtering, and custom header templates. This example also shows how to bind data using an async pipe and set the grid's height and width.

```html
<igx-grid #grid1 [data]="data | async" [height]="'500px'" width="100%" [autoGenerate]='false'>
    <igx-column [field]="'ProductID'" [width]="'120px'" [filterable]='true' ></igx-column>
    <igx-column [field]="'Category'" [width]="'120px'" [filterable]='true' ></igx-column>
    <igx-column [field]="'Type'" [width]="'150px'"></igx-column>
    <igx-column [field]="'Change'" [width]="'120px'" [dataType]="'number'" [headerClasses]="'headerAlignSyle'">
        <ng-template igxHeader>
            <span class="cellAlignSyle">Change</span>
        </ng-template>
    <igx-column [field]="'Change(%)'" [width]="'130px'" [dataType]="'number'" [formatter]="formatNumber">
        <ng-template igxHeader>
            <span class="cellAlignSyle">Change(%)</span>
        </ng-template>
    </igx-column>
</igx-grid>
```

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

### Start and End Performance Measurement

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular-performance/README.md

Use this pattern to measure the execution time of a specific code block. The `start` method returns a function that must be called after the measured code finishes.

```typescript
const end = performanceService.start(name);
data.sort();
end();
```

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

### Basic Local Data Binding for igx-simple-combo

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/simple-combo/README.md

Demonstrates basic usage of igx-simple-combo with a local data source, specifying the valueKey and displayKey properties for item identification and display.

```html
<igx-simple-combo [data]="localData" [valueKey]="'ProductID'" [displayKey]="'ProductName'"></igx-simple-combo>
```

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

### Basic IgxStepper Usage

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/stepper/README.md

Demonstrates the basic structure of an IgxStepper with multiple IgxStep components. Each step can contain custom content, icons, and titles.

```html
<igx-stepper>
   <igx-step *ngFor="let step of stepsData" [disabled]=”step.disabled”>
      <igx-icon igxStepIndicator>
	      {{step.indicator}}
	  </igx-icon>

      <p igxStepTitle>
	      {{step.title}}
	  </p>

      <div igxStepContent>
         ...
      </div>
    </igx-step>
</igx-stepper>
```

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

### Basic IgxQueryBuilder Usage

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/query-builder/README.md

Demonstrates the basic HTML structure for integrating the IgxQueryBuilder component. It shows how to bind entities and an expression tree, and includes a custom header with a title.

```html
<igx-query-builder
    [entities]="entities"
    [expressionTree]="customExpressionTree">

    <!-- Custom header -->
    <igx-query-builder-header [title]="'Custom title for Query Builder'">
    </igx-query-builder-header>

</igx-query-builder>
```

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

### IgxOverlayService Static Methods

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/core/src/services/overlay/README.md

Static methods for creating and calculating overlay settings.

```APIDOC
## getPointFromPositionsSettings

### Description
Calculates the point from which the overlay should start showing.

### Parameters
- **settings** (any) - The position settings.

---

## createAbsoluteOverlaySettings

### Description
Creates overlay settings with global or container position strategy based on a preset position settings.

### Parameters
- **position?** (any) - Optional preset position settings.
- **useContainerStrategy?** (boolean) - Optional flag to use container strategy.

---

## createRelativeOverlaySettings

### Description
Creates overlay settings with auto, connected or elastic position strategy based on a preset position settings.

### Parameters
- **target** (any) - The target element for the relative positioning.
- **strategy?** (any) - Optional position strategy.
- **position?** (any) - Optional position settings.
```

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

### Run Ignite UI Angular Extras Project Locally

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular-extras/README.md

Command to run the project with a small sample for local testing and development.

```bash
npm run start
```

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

### Templating the close button

Source: https://github.com/igniteui/igniteui-angular/blob/master/projects/igniteui-angular/directives/src/directives/tooltip/README.md

Example of how to customize the close button of the tooltip using ng-template.

```APIDOC
#### Templating the close button

```html
<igx-icon [igxTooltipTarget]="tooltipRef" [closeButtonTemplate]="customClose">
    info
</igx-icon>

<span #tooltipRef="tooltip" igxTooltip>
    Hello there, I am a tooltip!
</span>

<ng-template #customClose>
    <button igxButton>Close</button>
</ng-template>
```
```