Last active
December 9, 2016 12:50
-
-
Save vakrilov/4b098aab4cf766f4f92996e070adf493 to your computer and use it in GitHub Desktop.
ListView odd/eve template
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() | |
}); | |
} | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
//... | |
"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