Getting Started

7 Jun 20179 minutes to read

This section helps you to understand the getting started of the Tile component with the step-by-step instructions.

Create a Tile Component

The following steps guide you to add a Tile component.

1) To get start with how to use the Tile component within Angular-2 platform, refer the basic requisites and the configurations needs to be done on the system from here.

2) Create a simple Tile by adding ej-tile attribute for initializing a Tile component on the application.

HTML

<div class="tiles">
                <div class="e-tile-column">
                    <ej-tile id="tile" imagePosition="fill" tileSize="medium" imageUrl='http://js.syncfusion.com/ug/web/content/tile/map.png' [caption]="caption">
                    </ej-tile>
                   
                </div>
       </div>

Add the following code in the component’s constructor file for given the text of the Tile component.

JAVASCRIPT

export class AppComponent {
             caption: any;
             constructor() {
                this.caption = { text: "Maps" };
             }
       }

Get the following output from the above-mentioned code

You can easily design a home page using tile control for easy navigation. Therefore, you require many different sizes of tiles aligned in a grid-like manner. The tiles will be aligned automatically to define the necessary tile elements inside the wrapper element, that contains a “e-tile-column” class. You can define all columns elements under the wrapper element with the tile “e-tile-group” class to make ‘n’ number of tiles as a grouped tile. Add the below mentioned code to the corresponding view page.

HTML

<div class="tiles">
    <div class="cols-sample-area">
        <div id="scrollTarget">
            <div class="e-tile-group">
                <div class="e-tile-column">
                    <ej-tile id="tile1" imagePosition="fill" tileSize="medium" imageUrl='http://js.syncfusion.com/ug/web/content/tile/people_1.png' [caption]="caption1">
                    </ej-tile>
                    <div class="e-tile-small-col-2">
                        <ej-tile id="tile2" imagePosition="center" tileSize="small" imageUrl='http://js.syncfusion.com/ug/web/content/tile/alerts.png'>
                        </ej-tile>
                        <ej-tile id="tile3" imagePosition="center" tileSize="small" imageUrl='http://js.syncfusion.com/ug/web/content/tile/bing.png'>
                        </ej-tile>
                        <ej-tile id="tile4" tileSize="small" imageUrl='http://js.syncfusion.com/ug/web/content/tile/camera.png'>
                        </ej-tile>
                        <ej-tile id="tile5" tileSize="small" imagePosition="center" imageUrl='http://js.syncfusion.com/ug/web/content/tile/messages.png'>
                        </ej-tile>
                    </div>
                    <ej-tile id="tile6" tileSize="medium" imagePosition="center" imageUrl='http://js.syncfusion.com/ug/web/content/tile/games.png' [caption]="caption2">
                    </ej-tile>
                    <ej-tile id="tile7" tileSize="medium" imageUrl='http://js.syncfusion.com/ug/web/content/tile/map.png' [caption]="caption3">
                    </ej-tile>
                    <ej-tile id="tile8" tileSize="wide" imageUrl='http://js.syncfusion.com/ug/web/content/tile/sports.png' [caption]="caption4" imagePosition="fill">
                    </ej-tile>
                </div>
                <div class="e-tile-column">
                    <ej-tile id="tile9" tileSize="medium" imagePosition="fill" imageUrl='http://js.syncfusion.com/ug/web/content/tile/people_2.png' [caption]="caption5">
                    </ej-tile>
                    <ej-tile id="tile10" tileSize="medium" imagePosition="center" imageUrl='http://js.syncfusion.com/ug/web/content/tile/pictures.png' [caption]="caption6">
                    </ej-tile>
                    <ej-tile id="tile11" tileSize="wide" imagePosition="center" imageUrl='http://js.syncfusion.com/ug/web/content/tile/weather.png' [caption]="caption7">
                    </ej-tile>
                    <ej-tile id="tile12" tileSize="medium" imagePosition="center" imageUrl='http://js.syncfusion.com/ug/web/content/tile/music.png' [caption]="caption8">
                    </ej-tile>
                    <ej-tile id="tile13" tileSize="medium" imagePosition="center" imageUrl='http://js.syncfusion.com/ug/web/content/tile/favs.png' [caption]="caption9">
                    </ej-tile>
                </div>
            </div>
        </div>
    </div>
</div>

Add the following code in the component’s constructor file for given the text of the Tile component.

JAVASCRIPT

export class AppComponent {
    caption1: any;
    caption2: any;
    caption3: any;
    caption4: any;
    caption5: any;
    caption6: any;
    caption7: any;
    caption8: any;
    caption9: any;
    constructor() {
        this.caption1 = { text: "People" };
        this.caption2 = { text: "Play" };
        this.caption3 = { text: "Maps" };
        this.caption4 = { text: "Sports" };
        this.caption5 = { text: "People" };
        this.caption6 = { text: "Photo" };
        this.caption7 = { text: "Weather" };
        this.caption8 = { text: "Music" };
        this.caption9 = { text: "Favorites" };
    }
 }

Run the above code to get the following output.

NOTE

You can find the Tile component properties from the API reference.