Angular TileView - Customize Tile Appearance

For a minor customization of tiles, you can define specific fields in item data objects. For example, the following code generates three tiles: the first is disabled, the second is not customized, the third is hidden.

TypeScript
HTML
  • import { DxTileViewModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • tileViewData = [
  • { text: "Alabama", disabled: true },
  • { text: "Alaska" },
  • { text: "Arizona", visible: false }
  • ];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTileViewModule
  • ],
  • // ...
  • })
  • <dx-tile-view
  • [dataSource]="tileViewData">
  • </dx-tile-view>

If you need a more flexible solution, define an itemTemplate.

HTML
TypeScript
CSS
  • <dx-tile-view
  • [dataSource]="tileViewData"
  • [itemMargin]="15"
  • [baseItemHeight]="80"
  • [baseItemWidth]="140"
  • itemTemplate="tile">
  • <div class="tile" *dxTemplate="let data of 'tile'">
  • <p style="font-size:larger"><b>{{data.name}}</b></p>
  • <p>Capital: <i>{{data.capital}}</i></p>
  • </div>
  • </dx-tile-view>
  • import { DxTileViewModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • tileViewData = [
  • { name: "Alabama", capital: "Montgomery" },
  • { name: "Alaska", capital: "Juneau" },
  • { name: "Arizona", capital: "Phoenix" },
  • // ...
  • ];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTileViewModule
  • ],
  • // ...
  • })
  • .tile {
  • border-radius: .5em;
  • text-align: center;
  • color: white;
  • background: gray;
  • }

You can also customize individual tiles. Declare them using the dxItem component.

HTML
TypeScript
  • <dx-tile-view>
  • <dxi-item>
  • <span>User</span>
  • </dxi-item>
  • <dxi-item>
  • <span>Comment</span>
  • </dxi-item>
  • </dx-tile-view>
  • import { DxTileViewModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTileViewModule
  • ],
  • // ...
  • })

Built-In Template Engine Demo 3rd-Party Template Engine Demo

See Also