Skip to content

fix(*): add tile manager to skills - 21.1.x #17058

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kdinev merged 3 commits into from
Mar 23, 2026
Merged

fix(*): add tile manager to skills - 21.1.x #17058

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5eff02c
fix(*): add tile manager to skills
mtsvyatkova Mar 17, 2026
5310a57
Merge branch '21.1.x' into mtsvyatkova/tile-manager-skill-21.1.x
kdinev Mar 20, 2026
691a7ad
chore(*): apply suggestions from code review
mtsvyatkova Mar 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions skills/igniteui-angular-components/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
name: igniteui-angular-components
description: "Covers all non-grid Ignite UI for Angular UI components: application scaffolding and setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider), layout containers (tabs, stepper, accordion, splitter, navigation drawer), data-display components (list, tree, card, chips, carousel, paginator, progress indicators, chat), feedback overlays (dialog, snackbar, toast, banner), directives (button, icon button, button group, ripple, tooltip, drag-and-drop), Dock Manager, Layout Manager, and Charts. Use when users ask about any Ignite UI Angular component that is NOT a data grid — such as forms, dropdowns, pickers, dialogs, navigation, lists, trees, cards, charts, or initial project setup. Do NOT use for data grids, tables, or tabular data — use igniteui-angular-grids instead. Do NOT use for theming or styling — use igniteui-angular-theming instead."
description: "Covers all non-grid Ignite UI for Angular UI components: application scaffolding and setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider), layout containers (tabs, stepper, accordion, splitter, navigation drawer), data-display components (list, tree, card, chips, carousel, paginator, progress indicators, chat), feedback overlays (dialog, snackbar, toast, banner), directives (button, icon button, button group, ripple, tooltip, drag-and-drop), Dock Manager, Layout Manager, Tile Manager, and Charts. Use when users ask about any Ignite UI Angular component that is NOT a data grid — such as forms, dropdowns, pickers, dialogs, navigation, lists, trees, cards, charts, or initial project setup. Do NOT use for data grids, tables, or tabular data — use igniteui-angular-grids instead. Do NOT use for theming or styling — use igniteui-angular-theming instead."
user-invocable: true
---

Expand Down Expand Up @@ -34,7 +34,7 @@ Base your code and explanation exclusively on what you read. If the reference fi
| List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress Indicators, Chat | [`references/data-display.md`](./references/data-display.md) |
| Dialog, Snackbar, Toast, Banner | [`references/feedback.md`](./references/feedback.md) |
| Button, Icon Button, Button Group, Ripple, Tooltip, Drag and Drop | [`references/directives.md`](./references/directives.md) |
| Layout Manager (`igxLayout`, `igxFlex` directives), Dock Manager (`igc-dockmanager` web component) | [`references/layout-manager.md`](./references/layout-manager.md) |
| Layout Manager (`igxLayout`, `igxFlex` directives), Dock Manager (`igc-dockmanager` web component), Tile Manager (`igc-tile-manager` web component) | [`references/layout-manager.md`](./references/layout-manager.md) |
| Charts (Area, Bar, Column, Stock/Financial, Pie), chart configuration, chart features (animation, tooltips, markers, highlighting, zooming), data binding | [`references/charts.md`](./references/charts.md) |

> **When in doubt, read more rather than fewer reference files.** The cost of an unnecessary file read is negligible; the cost of hallucinated API usage is a broken application.
Expand Down
130 changes: 129 additions & 1 deletion skills/igniteui-angular-components/references/layout-manager.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Layout Manager & Dock Manager
# Layout Manager, Dock Manager & Tile Manager

> **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
> For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
Expand All @@ -7,6 +7,7 @@

- [Layout Manager Directives](#layout-manager-directives)
- [Dock Manager](#dock-manager)
- [Tile Manager](#tile-manager)

---

Expand Down Expand Up @@ -411,6 +412,133 @@ export class DockManagerComponent {
5. **Premium component** — requires a licensed Ignite UI subscription; verify availability before recommending to users
6. **Not part of `igniteui-angular`** — do not import from `igniteui-angular` entry points; all Dock Manager types come from `igniteui-dockmanager`

---

## Tile Manager

> **Docs:** [Tile Manager (Angular)](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tile-manager)
> **Full API Docs:** [Tile Manager Web Component](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager.html)

The Tile Manager is a **layout Web Component** that displays content in individual tiles users can **rearrange and resize**. It is implemented as an `igc-tile-manager` container with one or more `igc-tile` children.

### Installation

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

### Setup

Register the Tile Manager Web Component before bootstrap:

```typescript
import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents';

defineComponents(IgcTileManagerComponent);
Comment on lines +432 to +437
Copy link

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Tile Manager setup snippet says to register the web component “before bootstrap”, but (unlike the Dock Manager section above) it doesn’t specify the concrete placement (e.g., main.ts before bootstrapApplication). Adding that call-site guidance would prevent users from registering too late and getting “unknown element” behavior.

Suggested change
Register the Tile Manager Web Component before bootstrap:
```typescript
import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents';
defineComponents(IgcTileManagerComponent);
In your `main.ts`, register the Tile Manager Web Component **before** calling `bootstrapApplication`:
```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents';
defineComponents(IgcTileManagerComponent);
bootstrapApplication(AppComponent);

Copilot uses AI. Check for mistakes.
```

Add `CUSTOM_ELEMENTS_SCHEMA` to any component using `<igc-tile-manager>`:

```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
selector: 'app-tile-manager',
templateUrl: './tile-manager.component.html',
Comment on lines +443 to +447
Copy link

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Tile Manager component example omits changeDetection: ChangeDetectionStrategy.OnPush, while the rest of the skill references generally default to OnPush in component examples. Consider adding OnPush here as well (and the corresponding ChangeDetectionStrategy import) so the snippet reflects the recommended Angular performance setup.

Suggested change
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
selector: 'app-tile-manager',
templateUrl: './tile-manager.component.html',
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
selector: 'app-tile-manager',
templateUrl: './tile-manager.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,

Copilot uses AI. Check for mistakes.
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TileManagerComponent { }
```

### Basic Usage

```html
<igc-tile-manager>
<igc-tile>
<span slot="title">Tile 1 header</span>
<p>Tile 1 content</p>
</igc-tile>
<igc-tile>
<span slot="title">Tile 2 header</span>
<p>Tile 2 content</p>
</igc-tile>
</igc-tile-manager>
```

### Layout Properties

Key `igc-tile-manager` properties:

- **`column-count`**: number of grid columns; if omitted or \<1, as many columns as fit with a minimum width (200px) are created.
- **`gap`**: space between tiles (e.g., `"20px"`, `"1rem"`).
- **`min-column-width`**: minimum width per column (e.g., `"200px"`).
- **`min-row-height`**: minimum height per row (e.g., `"150px"`).

```html
<igc-tile-manager
column-count="2"
gap="20px"
min-column-width="220px"
min-row-height="160px">
<igc-tile>
<span slot="title">Tile 1 header</span>
<p>Tile 1 content</p>
</igc-tile>
<igc-tile>
<span slot="title">Tile 2 header</span>
<p>Tile 2 content</p>
</igc-tile>
</igc-tile-manager>
```

### Tile Properties

Each `igc-tile` can configure its own size and behavior:

- **`row-start` / `col-start`**: starting row/column for the tile
- **`row-span` / `col-span`**: how many rows/columns the tile spans
- **`disable-resize`**: prevents the tile from being resized
- **`disable-maximize`** / **`disable-fullscreen`**: hide default header actions

```html
<igc-tile-manager>
<igc-tile col-span="2" disable-resize>
<span slot="title">Wide tile</span>
<p>Content</p>
</igc-tile>
<igc-tile row-span="2">
<span slot="title">Tall tile</span>
<p>Content that spans two rows.</p>
</igc-tile>
</igc-tile-manager>
```

### Resizing & Dragging

- Resizing is controlled by the `resize-mode` property on `igc-tile-manager` (`"none"`, `"hover"`, `"always"`).
- Reordering is enabled via the `drag-mode` property (`"tile"` or `"tile-header"`).

```html
<igc-tile-manager resize-mode="hover" drag-mode="tile-header">
<igc-tile>
<span slot="title">Tile 1</span>
<p>Content</p>
</igc-tile>
<igc-tile>
<span slot="title">Tile 2</span>
<p>Content</p>
</igc-tile>
</igc-tile-manager>
```

### Key Rules for Tile Manager

1. **Web Component package** — Tile Manager ships via `igniteui-webcomponents`, not `igniteui-angular`.
2. **Register components** — call `defineComponents(IgcTileManagerComponent)` once before using `<igc-tile-manager>`.
3. **Use `CUSTOM_ELEMENTS_SCHEMA`** on Angular components that host the Tile Manager.
4. **Use slots** — header content goes into `slot="title"`; additional actions and custom adorners use the documented slots (`fullscreen-action`, `maximize-action`, `actions`, `side-adorner`, `corner-adorner`, `bottom-adorner`).
5. **Treat it as a layout container** — use Tile Manager when users need interactive, resizable and re-orderable tiles, not tabular data (use grids for that).

## See Also

- [`setup.md`](./setup.md) — App providers, architecture, all entry points
Expand Down
Loading