Skip to content

Instantly share code, notes, and snippets.

@vakrilov
Last active December 9, 2016 12:50
Show Gist options
  • Save vakrilov/4b098aab4cf766f4f92996e070adf493 to your computer and use it in GitHub Desktop.
Save vakrilov/4b098aab4cf766f4f92996e070adf493 to your computer and use it in GitHub Desktop.
ListView odd/eve template
<StackLayout>
<ListView [items]="listItems" rowHeight="60" [itemTemplateSelector]="templateSelector">
<template nsTemplateKey="odd" let-item="item">
<StackLayout class="odd">
<Image [src]="item.image"></Image>
<Label [text]='item.date' textWrap="true" style="padding-left:10;"></Label>
</StackLayout>
</template>
<template nsTemplateKey="even" let-item="item">
<StackLayout class="even">
<Image [src]="item.image"></Image>
<Label [text]='item.date' textWrap="true" style="padding-left:10;"></Label>
</StackLayout>
</template>
</ListView>
</StackLayout>
import { Component, OnInit } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "app.component.html",
})
export class AppComponent implements OnInit {
public counter: number = 16;
public listItems = [];
public templateSelector = (item: any, index: number, items: any) => {
return (index % 2) ? "odd" : "even";
}
ngOnInit() {
for (let i = 0; i < 200; i++) {
this.listItems.push({
image: i % 2 == 0 ? "res://list_locked_green" : "res://list_unlocked_red",
date: new Date()
});
}
}
}
{
//...
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/router": "3.2.1",
"nativescript-angular": "1.2.0",
"nativescript-theme-core": "^0.2.1",
"reflect-metadata": "~0.1.8",
"rxjs": "5.0.0-beta.12",
"tns-core-modules": "2.4.0"
},
"devDependencies": {
"babel-traverse": "6.19.0",
"babel-types": "6.19.0",
"babylon": "6.14.1",
"lazy": "1.0.11",
"nativescript-dev-android-snapshot": "^0.*.*",
"nativescript-dev-typescript": "^0.3.2",
"typescript": "^2.0.10",
"zone.js": "~0.6.21"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment