I'm using NativeScript 6.1.1 and I have a RadListView in which I would like to have unique references for each row. One way I was thinking of is if I could get an index field then I could have the 'automationText' fields with the following
name0
name1
name2
Here is my current template;
<RadListView automationText="listing"
[items]="dataItems"
[filteringFunction]="filterItems"
pullToRefresh="true"
(pullToRefreshInitiated)="onPullToRefreshInitiated($event)">
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="vertical">
<GridLayout class="itemContainer" rows="50,*" columns="*,100">
<Label automationText="name" row="0" col="0" class="nameLabel" [text]="item.name"></Label>
</GridLayout>
</StackLayout>
</ng-template>
</RadListView>
Is it possible to do something like this?
<Label automationText="name#{index}" row="0" col="0" class="nameLabel" [text]="item.name"></Label>
to get the index you may add let-i="index" to ng-template and consume it as automationText="name{{i}}"
sample:
<RadListView [items]="_dataItems" [itemTemplateSelector]="templateSelector">
<ng-template tkTemplateKey tkListItemTemplate let-item="item"
let-i="index">
<StackLayout>
<Label automationText="name{{i}}" text="name{{i}}"></Label>
</StackLayout>
</ng-template>
</RadListView>
Related
I have the following angular nativescript template. I want to be able to dismiss the keyboard (from SearchBar) in Ios, so I added the often recommended dismissSoftInput() (inside hideKeyboard) when you tap anywhere else. The problem is, once I add this, I can't select tabs, nor select any items within the child listviews.
What can I do to allow the top level (tap) while preserving the tab functionality?
<GridLayout rows="auto *" (tap)="hideKeyboard()">
<GridLayout row="0" rows="*">
<StackLayout row="0" class="input-field">
<SearchBar #searchField hint="Search ..." class="input" (submit)="startSearch($event)" (clear)="startSearch($event)"></SearchBar>
</StackLayout>
</GridLayout>
<GridLayout row="1" rows="*">
<Tabs row="0"selectedIndex="0">
<TabStrip>
<TabStripItem>
<Label text="Tab 1"></Label>
</TabStripItem>
<TabStripItem>
<Label text="Tab 2"></Label>
</TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout rows="*">
<ActivityIndicator row="0" [busy]="isSearchingKJ"></ActivityIndicator>
<ListView row="0" *ngIf="kjResults?.length > 0" [items]="kjResults" (itemTap)="select($event)">
<ng-template let-item="item" let-i="index">
<StackLayout>
<Label class="search" [text]="item.book + ' ' + item.chapter + ':' + item.verse"></Label>
<Label class="search-results" textWrap="true">
<FormattedString>
<Span *ngIf="item.text.length > 0" [text]="item.text[0].text"></Span>
</FormattedString>
</Label>
</StackLayout>
</ng-template>
</ListView>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout rows="*">
<ActivityIndicator row="0" [busy]="isSearchingMormon"></ActivityIndicator>
<ListView row="0" *ngIf="mormonResults?.length > 0" [items]="mormonResults" (itemTap)="select($event)">
<ng-template let-item="item" let-i="index">
<StackLayout>
<Label class="search" [text]="item.book + ' ' + item.chapter + ':' + item.verse"></Label>
<Label class="search-results" textWrap="true">
<FormattedString>
<Span *ngIf="item.text.length > 0" [text]="item.text[0].text"></Span>
</FormattedString>
</Label>
</StackLayout>
</ng-template>
</ListView>
</GridLayout>
</TabContentItem>
</Tabs>
</GridLayout>
</GridLayout>
I have a big problem in my project. I'm using a *ngIf that work only in android platform. In iOS platform doesn't work.
I have this code in HTML:
<GridLayout columns ="auto, auto" rows="*" (tap)="open()">
<StackLayout col="0" row ="0">
<label text="SomethingText"></label>
</StackLayout>
<StackLayout col="1" row ="0" *ngIf="sub">
<label text="Right"></label>
</StackLayout>
<StackLayout col="1" row ="0" *ngIf="!sub">
<label text="Bottom"></label>
</StackLayout>
</GridLayout>
In TS I have:
sub: boolean = false;
public open() {
this.sub= !this.sub;
console.log('value',this.sub)
}
When I click function in view show not correct, show empty, Right,Bottom,Bottom,etc.
But console in function show correct true , false in each click.
Please, can you ask me any idea how to solution this problem?
best way to implement this is to use ngif/else instead of having 2 ngif blocks.
<StackLayout col="1" row ="0" *ngIf="sub === true; else elseBlock"><label text="Right"></label>
</StackLayout>
<ng-template #elseBlock> <StackLayout col="1" row ="0">
<label text="Bottom"></label>
</StackLayout></ng-template>
For further reading, you can refer here.
I have a listview under actionBar, which seems to be taking only half of the screen vertical real estate. The list scrolls within half of the screen.
<StackLayout orientation="vertical" height="100%">
<ActionBar class="action-bar">
<NavigationButton visibility="collapsed"></NavigationButton>
<GridLayout columns="auto,*,auto" height="100%" width="100%">
<Label col="0" text="" class="fa" (tap)="onDrawerButtonTap()"></Label>
<Label col="1" text="Menu" class="action-bar-title"></Label>
</GridLayout>
</ActionBar>
<!-- <ScrollView orientation="vertical"> -->
<ListView [items]="restaurant_menu" class="list-group">
<ng-template let-item="item" let-i="index">
<StackLayout orientation="vertical" class="list-group-item">
<Label [text]="item.name"></Label>
<GridLayout columns="*,auto,auto,auto" rows="auto" orientation="horizontal" class="list-group-item">
<Label [text]="'Rs. '+item.price" col="0" row="0" verticalAlignment="top"></Label>
<Label *ngIf="order && order[item.name]>0" text="-" col="1" row="0" verticalAlignment="top" horizontalAlignment="right"></Label>
<Label *ngIf="order && order[item.name]>0" [text]="order[item.name]" col="1" row="0" verticalAlignment="top" horizontalAlignment="right"></Label>
<Label (tap)="build_order(item.name, '+')" text="+" col="1" row="0" verticalAlignment="top" horizontalAlignment="right"></Label>
</GridLayout>
</StackLayout>
</ng-template>
</ListView>
<!-- </ScrollView> -->
</StackLayout>
setting the height to 100% doesn't change the outcome. What am I missing? I'm using native-core-theme and no css changes that dictates the height.
Try removing the StackLayout above ActionBar. ActionBar should be part of Page instance or just at root level in case of {N} Angular. ListView can be placed just below it, you don't need a StackLayout to wrap them up.
I am trying to create mapping over image for the areas to tap on. It's for a demo for now and I don't have time to build out all of the native parts.
For now I am overlaying a StackLayout on top of an Image. The StackLayout tap. I tried a suggestion to put into aGridLayout` but the tap event still doesn't work. The lightgray background appears over the area I want.
<GridLayout rows="*"
columns="*">
<StackLayout row="0"
col="0"
width="262"
height="36"
marginLeft="30"
marginTop="147"
backgroundColor="lightgray"
style="z-index: 2"
(tap)="onTap()">
</StackLayout>
<Image row="0"
col="0"
src="~/images/map.svg"
width="100%"
height="255"
style="z-index: 1"></Image>
</GridLayout>
Changing places of the elements fixes it.
<GridLayout rows="*"
columns="*">
<Image row="0"
col="0"
src="~/images/map.svg"
width="100%"
height="255"
style="z-index: 1"></Image>
<StackLayout row="0"
col="0"
width="262"
height="36"
marginLeft="30"
marginTop="147"
backgroundColor="lightgray"
style="z-index: 2"
(tap)="onTap()">
</StackLayout>
</GridLayout>
I am working on a angular 2 nativescript app.
On one of the pages, we have a bottom bar that needs to appear on bottom of the page initially and when the keyboard is called move up with it (see screen shots). The bar is displaying correctly in Android, i.e. the Bottom bar (id: bottom-bar) is moving up with the key board. But this behaviour is not working correctly in iOS. The bar remains at the bottom of the page even when the keyboard slides up. How do I fix this behaviour in iOS?
Screenshot Android
Screenshot iOS
My templates are below:
Parent Template:
<StackLayout>
<StackLayout sdkToggleNavButton>
<ActionBar title="Parent" backgroundColor="#f82462">
</ActionBar>
</StackLayout>
<GridLayout rows="auto, *">
<GridLayout row="0" rows="auto auto">
<StackLayout row="0" id="horizontal-tag-container">
<horizontal-tag [name]="detailItem['item']"></horizontal-tag>
</StackLayout>
<StackLayout row="1" id="segmented-bar-container">
<SegmentedBar class="m-5" #sb [items]="myItems" selectedIndex="0" (selectedIndexChange)="onChange(sb.selectedIndex)"></SegmentedBar>
</StackLayout>
</GridLayout>
<GridLayout row="1" rows="*, auto">
<!--The child template is replaced by router outlet-->
<router-outlet></router-outlet>
</GridLayout>
</GridLayout>
Child template (for router-outlet)
<GridLayout>
<GridLayout rows="*, auto">
<StackLayout row="0" class="form">
<StackLayout class="input-field">
<TextView [(ngModel)]="textContent" class="input" hint="Write something"></TextView>
</StackLayout>
</StackLayout>
<GridLayout row="1" backgroundColor="#f82462">
<GridLayout height="50" columns="25*, 25*, 25*, 25*" backgroundColor="#f82462" id="bottom-bar">
<GridLayout col="0" (tap)="setTab(0)">
<Label class="fa fa-tab-icon" text="" [ngClass]="{'tab-selected': selected === 0}"></Label>
</GridLayout>
<GridLayout col="0" (tap)="setTab(0)">
<Label text="Back" class="tabLabel" [ngClass]="{'tab-selected': selected === 0}"></Label>
</GridLayout>
<!--<GridLayout col="1" (tap)="setTab(1)">
<Label class="fa fa-tab-icon" text="" [ngClass]="{'tab-selected': selected === 1}"></Label>
</GridLayout>
<GridLayout col="1" (tap)="setTab(1)">
<Label text="Test" class="tabLabel" [ngClass]="{'tab-selected': selected === 1}"></Label>
</GridLayout>-->
<GridLayout col="2" (tap)="setTab(2)">
<Label class="fa fa-tab-icon" text="" [ngClass]="{'tab-selected': selected === 2}"></Label>
</GridLayout>
<GridLayout col="2" (tap)="setTab(2)">
<Label text="" class="tabLabel" [ngClass]="{'tab-selected': selected === 2}"></Label>
</GridLayout>
<GridLayout col="3" (tap)="setTab(3)">
<Label class="fa fa-tab-icon" text="" [ngClass]="{'tab-selected': selected === 3 }"></Label>
</GridLayout>
<GridLayout col="3" (tap)="setTab(3)">
<Label text="Next" class="tabLabel" [ngClass]="{'tab-selected': selected === 3}"></Label>
</GridLayout>
</GridLayout>
</GridLayout>
</GridLayout>
</GridLayout>