Skip to main content

Bind multiple datas to Label using one way binding in nativescript angular

home.component.ts

import { ItemEventData } from "ui/list-view"
import { Component, OnInit } from "@angular/core";

@Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html",
styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {

entries: { currententry: number, totalentry: number}[] = [
{ currententry: 1 , totalentry : 5 },
{ currententry: 2 , totalentry: 5 },
{ currententry: 3 , totalentry: 5 } ];

onItemTap(args: ItemEventData): void {
console.log('Item with index: ' + args.index + ' tapped');
}
constructor() {
}
ngOnInit(): void {
}
}


home.component.html

<ActionBar title="Home" class="action-bar">
</ActionBar>
<ScrollView class="page">
<StackLayout class="home-panel">
<ListView class="list-group" [items]="entries" (itemTap)="onItemTap($event)" style="height:1250px">
<ng-template let-entry="item">
<Label [text]="'Showing ' + entry.currententry + ' to ' + entry.totalentry + ' of ' + entry.totalentry + ' entries' " class="list-group-item-heading" textWrap="true" verticalAlignment="center" 
style="width: 60%"></Label>
</ng-template>
</ListView>
</StackLayout>
</ScrollView>

Comments

Popular posts from this blog

NgFor Directive with Index in nativescript angular

home.component.ts import { Component, OnInit } from "@angular/core"; @Component({ selector: "Home", moduleId: module.id, templateUrl: "./home.component.html", styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { silabusList = [ { "subject": "tamil" }, { "subject": "hindi" }, {"subject": "english"}, { "subject": "spanish" }, ] constructor() { } ngOnInit(): void { } btn(args) { console.log("index subje " + args) } } home.component.html <ActionBar title="Home" class="action-bar"> </ActionBar> <ScrollView class="page"> <StackLayout class="home-panel"> <StackLayout *ngFor="let item of silabusList ; let i = index"> <Label [text]="item.subject" (tap)="btn(i)" ></Label> </...

Using Icons from graphemica/whatsapp in nativescript angular

Using graphemica Icons -  1. Open the below link http://graphemica.com/%F0%9F%93%8E 2. Copy the icon then paste in the label text as mentioned, <Label text="📎" horizontalAlignment="center"></Label> Using Whatsapp Icons -  1. Just open the whatsapp web,  https://web.whatsapp.com/ 2. Copy the icons/symbols then paste it in the label text  as mentioned, <Label horizontalAlignment=" center " text="😍"></Label>

Dividing screen into multiple fragments for design home screen menus in nativescript angular

home.component.ts import { Component, OnInit } from "@angular/core"; @Component({ selector: "Home", moduleId: module.id, templateUrl: "./home.component.html", styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { onButtonTap(): void { console.log("Button was pressed"); } constructor() { } ngOnInit(): void { } } home.component.html <ActionBar title="Home" class="action-bar"> </ActionBar> <GridLayout height="90%" width="95%" rows="*,*" columns="*,*"> <StackLayout class="a" row="0" col="0"> <Button text="Button 1" (tap)="onButtonTap()"></Button> </StackLayout> <StackLayout class="b" row="0" col="1"> <Button text="Button 2" (tap)="onButtonTap()"...