|
| 1 | +--- |
| 2 | +title: Manage Angular Page Layout | Tile Manager | Ignite UI | Infragistics |
| 3 | +_description: The Ignite UI for Angular Tile Manager component enables the display of content in individual tiles. |
| 4 | +_keywords: manage angular page layout, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Native Angular Components, Angular Tile Manager, Infragistics, Tile , Angular Tile Manager component, Angular Tile Manager control |
| 5 | +--- |
| 6 | +# Angular Tile Manager Overview |
| 7 | + |
| 8 | +The Tile Manager component enables the display of content in individual tiles. It allows users to interact with these tiles by rearranging and resizing them, giving them the freedom to customize the layout and appearance of the content according to their preferences. This flexibility enhances the user experience by enabling a more personalized and efficient way to view and manage content. |
| 9 | + |
| 10 | +## Angular Tile Manager Example |
| 11 | + |
| 12 | +The following Ignite UI for Angular Tile Manager Example shows the component in action. |
| 13 | + |
| 14 | +<code-view style="height:752px" |
| 15 | + data-demos-base-url="{environment:demosBaseUrl}" |
| 16 | + iframe-src="{environment:demosBaseUrl}/layouts/tile-manager-sample" alt="Angular Tile Manager Example"> |
| 17 | +</code-view> |
| 18 | +<div class="divider--half"></div> |
| 19 | + |
| 20 | +> [!WARNING] |
| 21 | +> Due to the iframe permissions policy, the fullscreen button in this example will only work when the example is opened in standalone mode by clicking the 'Expand to fullscreen' button in the top-right corner. |
| 22 | +
|
| 23 | +## Getting Started with Ignite UI for Angular Tile Manager |
| 24 | + |
| 25 | +Ignite UI Tile Manager is a standard [web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and as such can be used in an Angular application. |
| 26 | + |
| 27 | +To start using it, first, you need to install the Ignite UI for Web Components package by running the following command: |
| 28 | + |
| 29 | +```cmd |
| 30 | +npm install igniteui-webcomponents --save |
| 31 | +``` |
| 32 | + |
| 33 | +Next, you should call the `defineCustomElements()` function with `IgcTileManagerComponent` argument either in your `main.ts` file or in the component `.ts` file that is using `IgcTileManager`. |
| 34 | + |
| 35 | +```ts |
| 36 | +import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents'; |
| 37 | + |
| 38 | +defineComponents(IgcTileManagerComponent); |
| 39 | +``` |
| 40 | +You also need to include the `CUSTOM_ELEMENTS_SCHEMA` schema in your component's configuration |
| 41 | + |
| 42 | +```typescript |
| 43 | +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; |
| 44 | + |
| 45 | +@Component({ |
| 46 | + schemas: [CUSTOM_ELEMENTS_SCHEMA] |
| 47 | +}) |
| 48 | +export class AppComponent { |
| 49 | +``` |
| 50 | +
|
| 51 | +Now you can start with a basic configuration of the Angular Tile Manager. |
| 52 | +
|
| 53 | +## Usage |
| 54 | +
|
| 55 | +The Tile Manager provides a base tile layout behavior, managing the placement of tiles in maximized or normal state. The tiles can be sized independently of each other and used to form complex layouts. End users can reorder tiles by dragging and dropping them, providing a flexible and intuitive experience. |
| 56 | +
|
| 57 | +The Tile Manager offers two components that we can use: |
| 58 | +- `IgcTileComponent` - This component represents an individual tile displayed within the Tile Manager. |
| 59 | +- `IgcTileManagerComponent` - This is the main component that contains all of the tile components, serving as the container for the entire tile layout. |
| 60 | +
|
| 61 | +```html |
| 62 | +<igc-tile-manager> |
| 63 | + <igc-tile> |
| 64 | + <p>Tile 1</p> |
| 65 | + </igc-tile> |
| 66 | + <igc-tile> |
| 67 | + <p>Tile 2</p> |
| 68 | + </igc-tile> |
| 69 | + <igc-tile> |
| 70 | + <p>Tile 3</p> |
| 71 | + </igc-tile> |
| 72 | +</igc-tile-manager> |
| 73 | +``` |
| 74 | +
|
| 75 | +For a complete introduction to the Ignite UI for Angular, read the [*Getting Started*](general/getting-started.md) topic. |
| 76 | +
|
| 77 | +For further information on the usage of the Tile Manager component, you can check out [this topic]({environment:infragisticsBaseUrl}/products/ignite-ui-web-components/web-components/components/layouts/tile-manager.html). |
0 commit comments