A tile view that uses virtualisation to efficiently display large numbers of cells.
Install via bower:
bower install angular-tileview --save
Add dependency:
angular.module('myApp', ['td.tileview']);Add component to template:
<td-tileview items="myItems" options="myOptions"></td-tileview>Make sure that both dist/tileview.js and dist/tileview.css are included in your html file. The most common source of errors in relation to this component is that the css file was not included correctly.
http://tinydesk.github.io/angular-tileview/demo/
Type: Array (required)
The data that should be displayed. Each item is associated with one cell in the tileview. The cell will be bound to the data of the corresponding item. There is no restriction on the shape of the items in the array. Any data can be used. Note that though it seems that each item has it's own cell, the component only creates enough dom elements to view all visible items at once and reuses those elements when the user scrolls.
Type: Object
The component supports the following options:
Type: String (required)
Path to a template that is used to render a cell. The template might reference the item property which will always points to the item that is displayed in that cell. Note that it is possible to change this property later on, but it must be always the same for all cells.
Type: Object (required)
An object that has two numeric properties width and height which define the exact size of each cell. Note that it is possible to change this property later on, but it must be always the same for all cells.
Type: boolean. Default: false
If set to true, line breaks will be disabled and the items will be aligned in one large row with a horizontal scroll-bar if necessary.
Type: function
A callback that is invoked when the user scrolls to the end of the data. The expression can be optionally triggered in advance by setting the option scrollEndOffset.
Type: number. Default: 0
The row, counted from the end, that triggers the scrollEnd expression.
Type: number. Default: 2
The number of excess rows that are added to the DOM.
Type: number. Default: 0
Debounce while scrolling in milliseconds. A value of 0 is interpreted as no debounce.
Type: number
Sets pointer-events to none during scrolling to improve performance. The value of this property is a number indicating the number of milliseconds that the component waits to determine if scrolling has ended.
Event: td.tileview.resize
Type: Input
A manual resize will trigger a layout of the tiles if the new size changes the tile configuration.
Event: td.tileview.update
Type: Input
A manual update will always perform a layout, even if the number of tiles stays the same. This can be, for example, used to force an update after the element's direction value has changed.
Event: td.tileview.layout
Type: Output
This event is emitted by the tileview whenever it performs a layout.