I am trying to develop a little app in NativeScript with Angular. I used a TabView with a component for each Tab. At first i used the Angular directive (*ngIf) to control the visibility of these tabs:
<TabView (selectedIndexChanged)="onSelectedIndexChanged($event)">
<StackLayout *tabItem="{title: 'Kezdőlap'}">
<Home></Home>
</StackLayout>
<ng-container *ngIf="loginService.isAuthorized">
<StackLayout *tabItem="{title: 'Hírek'}">
<News></News>
</StackLayout>
<StackLayout *tabItem="{title: 'Csomagok'}">
<Packages></Packages>
</StackLayout>
<ng-container *ngIf="loginService.loggedInUser.role == Role.Admin">
<StackLayout *tabItem="{title: 'Felhasználók'}">
<Users></Users>
</StackLayout>
</ng-container>
</ng-container>
</TabView>
First, this isAuthorized variable is false and when I change it to true, all of the Tabs appear. BUT after I change back the isAuthorized value to false, i got an error:
Error: View not added to this instance. View: CommentNode(51) CurrentParent: undefined ExpectedParent: TabView(424)
After a little Google, I found this BugReport and in it stated that I cannot remove Tabs with Angular directives only rebind all of the Tabs programatically.
And here comes my problem. I don't know, how to instantiate an Angular component (Home, News, Package, Users) which can be inserted into a StackLayout programatically.
Related
I have a RadListView that displays a list of items. In each item template I have a (tap) event that fires when tapping on the item, to redirect to the item details screen. However, for some reason whenever I swipe the RadListView vertically to traverse the list, it fires the (tap) event wherever I start swiping from and incorrectly redirects to the item details screen instead of just moving up or down the list.
<RadListView
class="list transparent"
[class.visible]="!data.loading"
[visibility]="!data.loading ? 'visible' : 'collapse'"
[items]="data.items"
swipeActions="true"
(itemSwipeProgressStarted)="onSwipeCellStarted($event)">
<ng-template let-item="item">
<StackLayout class="item" orientation="horizontal" (tap)="view(item)">
<Image
[src]="item.photos?.length ? item.photos[0] : ''"
[visibility]="item.photos?.length ? 'visible' : 'collapse'">
</Image>
<StackLayout orientation="vertical">
<Label
class="title"
[text]="item.address">
</Label>
</StackLayout>
</StackLayout>
</ng-template>
<GridLayout *tkListItemSwipeTemplate columns="*, auto">
<StackLayout id="delete" col="1" (tap)="deleteRow($event)" class="delete">
<Label class="fas" [text]="IconsEnum.trashAlt"></Label>
</StackLayout>
</GridLayout>
</RadListView>
I tried getting rid of the (tap) event and instead using the following on the RadListView:
multipleSelection="false" selectionBehavior="Press" (itemSelected)="itemSelected($event)"
That resolved the issue with swiping, however it introduced a new issue where it would only select an item every two taps instead of every swipe.
What is the proper way to select an item from a RadListView?
Upgrading from #nativescript/ios 7.1.1 to 7.2.0 resolved this bug.
I have AbsoluteLayout in ScrollView with pager and custom components inside Pager. The code is working on Android, but on iOS is nothing shown. Does anyone have some solution?
<ScrollView>
<AbsoluteLayout>
<Pager row="1" #pager [selectedIndex]="currentPagerIndex" width="100%">
<ns-dashboard-profile height="100" *pagerItem></ns-dashboard-profile>
<ns-dashboard-home *pagerItem></ns-dashboard-home>
<ns-dashboard-devices *pagerItem></ns-dashboard-devices>
</Pager>
<FlexboxLayout class="navigation-wrapper" top="230">
<Label text="Profil" (tap)="goToPage('profile')" class="profile-tab"></Label>
<Label text="Početna" (tap)="goToPage('home')" class="home-tab"></Label>
<Label text="Moji uređaji" (tap)="goToPage('devices')" class="my-device-tab"></Label>
</FlexboxLayout>
</AbsoluteLayout>
ScrollView closing tag is not shown in the code snippet.
<RadListView row="0" [items]="Array" itemReorder="true" (itemReordered)="groupReordered($event)" reorderMode="Drag">
how to hide default drag handle in ios or how to customize it
I have created a sample playgroud for you here.
To customise the recordhandle, you need to set that in item-template for listview like below
<RadListView class="list-group" [items]="countries" (itemReordered)="onItemReordered($event)"
itemReorder="true" reorderMode="Drag" style="height:1250px">
<ng-template let-country="item">
<FlexboxLayout flexDirection="row" class="list-group-item">
<ReorderHandle verticalAlignment="center">
<Image [src]="country.imageSrc" class="thumb img-circle"></Image>
</ReorderHandle>
<Label [text]="country.name" class="list-group-item-heading"
verticalAlignment="center" style="width: 60%"></Label>
</FlexboxLayout>
</ng-template>
</RadListView>
by default in ios, a reorder handle is displayed at the right side of the item. But in the example above you can drag by image. Also if you want to hide that then do not pass anything in ReorderHandle.
I am using RadListView trying to use the header feature. If I try to use a StackLayout inside the header it disappears after the content is loaded. But if the header is one element (such as a Label) it works fine. The issue only appears on Android.
<GridLayout>
<RadListView [items]="products">
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="vertical">
<Label class="nameLabel" text="test title"></Label>
<Label class="descriptionLabel" text="test description"></Label>
</StackLayout>
</ng-template>
<ng-template tkListViewHeader>
<StackLayout orientation="vertical">
<Label text="This is header row 1"></Label>
<Label text="This is header row 2"></Label>
</StackLayout>
</ng-template>
</RadListView>
</GridLayout>
Before Load:
After load:
I found the issue. My data source for the list was not an Observable. So I guess it can't work with dynamic content being loaded directly into a normal array after it has been initialized.
In my HTML file I have this markup: While the ActionBar shows the title , the tabviews in the stacklayout are not visible at all and I get no errors, but I do not understand why??? I am new to nativescript... ;-)
Anyone can see what I do wrong?
<ActionBar title="Working days planner" class="action-bar">
</ActionBar>
<StackLayout class="page">
<TabView id="tabViewContainer">
<TabViewItem title="First Tab">
<StackLayout>
<Label text="Working days" class="action-label m-15"></Label>
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>
</ng-template>
</ListView>
</StackLayout>
</TabViewItem>
<TabViewItem title="Second Tab">
<StackLayout>
<Label text="Second Tab" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
</StackLayout>
</TabViewItem>
</TabView>
</StackLayout>
The StackLayout code in the first TabViewItem does work when its put under the ActionBar, but the TabView component somehow screws everything.
I haven't seen that syntax with the TabViewItem element. Try starting from a simpler example from the documentation page:
NativeScript TabView for Angular
Once you get a basic example working take incremental steps to change the content over to yours. Also, this is a basic feature so you can set up a Playground example and share that if you have specific problems.
Try removing the StackLayout above, you really don't need it.