{"id":32261190,"url":"https://github.com/tinydesk/angular-tileview","last_synced_at":"2026-02-21T02:01:45.266Z","repository":{"id":58217885,"uuid":"56911459","full_name":"tinydesk/angular-tileview","owner":"tinydesk","description":"A tile view that uses virtualisation to efficiently display large numbers of cells","archived":false,"fork":false,"pushed_at":"2018-03-22T21:59:21.000Z","size":198,"stargazers_count":10,"open_issues_count":1,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2026-01-24T13:43:21.996Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinydesk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-23T09:29:36.000Z","updated_at":"2024-04-15T20:45:36.000Z","dependencies_parsed_at":"2022-08-30T20:00:47.483Z","dependency_job_id":null,"html_url":"https://github.com/tinydesk/angular-tileview","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/tinydesk/angular-tileview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinydesk%2Fangular-tileview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinydesk%2Fangular-tileview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinydesk%2Fangular-tileview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinydesk%2Fangular-tileview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinydesk","download_url":"https://codeload.github.com/tinydesk/angular-tileview/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinydesk%2Fangular-tileview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29671513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T00:11:43.526Z","status":"online","status_checked_at":"2026-02-21T02:00:07.432Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-22T20:19:39.177Z","updated_at":"2026-02-21T02:01:45.260Z","avatar_url":"https://github.com/tinydesk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-tileview\n\nA tile view that uses virtualisation to efficiently display large numbers of cells.\n\n## Get Started\n\nInstall via bower:\n\n```\nbower install angular-tileview --save\n```\n\nAdd dependency:\n\n```javascript\nangular.module('myApp', ['td.tileview']);\n```\n\nAdd component to template:\n\n```html\n\u003ctd-tileview items=\"myItems\" options=\"myOptions\"\u003e\u003c/td-tileview\u003e\n```\n\nMake 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.\n\n## Demo\n\n[http://tinydesk.github.io/angular-tileview/demo/](http://tinydesk.github.io/angular-tileview/demo/)\n\n## Parameters\n\n### items\n\nType: `Array` (required)\n\nThe 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.\n\n### options\n\nType: `Object`\n\nThe component supports the following options:\n\n#### templateUrl\n\nType: `String` (required)\n\nPath 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.\n\n#### tileSize\n\nType: `Object` (required)\n\nAn 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.\n\n#### alignHorizontal\n\nType: `boolean`. Default: `false`\n\nIf 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.\n\n#### onScrollEnd\n\nType: `function`\n\nA 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`.\n\n#### scrollEndOffset\n\nType: `number`. Default: `0`\n\nThe row, counted from the end, that triggers the `scrollEnd` expression.\n\n#### overflow\n\nType: `number`. Default: `2`\n\nThe number of excess rows that are added to the DOM. \n\n#### debounce\n\nType: `number`. Default: `0`\n\nDebounce while scrolling in milliseconds. A value of `0` is interpreted as no debounce.\n\n#### disablePointerEvents\n\nType: `number`\n\nSets `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.\n\n## Events\n\n### Manual Resize\n\nEvent: `td.tileview.resize`\nType: Input\n\nA manual resize will trigger a layout of the tiles if the new size changes the tile configuration.\n\n### Manual Update\n\nEvent: `td.tileview.update`\nType: Input\n\nA 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.\n\n### Layout\n\nEvent: `td.tileview.layout`\nType: Output\n\nThis event is emitted by the tileview whenever it performs a layout.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinydesk%2Fangular-tileview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinydesk%2Fangular-tileview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinydesk%2Fangular-tileview/lists"}