angular ng-template with nativescript is really weird buggy - nativescript

Sorry for that not so concrete title but starting with angular + NS I experience so much weird exceptional behavior that really wonders me.
That works ok:
<StackLayout>
<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>
That works not: (getting no concrete exception message just that getView call failed... great thanks...)
<StackLayout>
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>
<b>shit</b>
</ng-template>
</ListView>
</StackLayout>
That works partially: (getting no exception here but the bold word shit is not visible)
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<StackLayout> <Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>
<b>shit</b>
</StackLayout>
</ng-template>
</ListView>
Why result those code in such confusing cases?
Do I not understand the listview enough? What am I missing here?
Probably the case is that html tags like bold-tag seems not to be allowed within an ng-template used with NS but using a button/datepicker NS_angular component does not work either and result in an exception inside getView...
Update 1
Ok I just found out that I can not put more than one element inside ng-template that everything crashes oh come on what a lousy tooling behavior!!!
Putting a StackPanelLayout around the Label and Button then it is rendered!
I thought with NS + angular I can code with angular I was used to and just have a NS wrapper around not disturbing me. But it seems I have to learn NS a lot and put little angular knowledge inside, rather disappointing.

I would recommend you to go through the basics of {N} documentation to avoid further confusions.
Your app is totally native here therefore you can't use HTML tags those are specific to Web Browsers. You must use the standard {N} UI widgets, to make text bold, you must use the fontWeight property or font-weight in CSS. If you like part of your text to be bold then you suppose to use FormattedString.

Related

expand listview with multiple item.description

By referring to the example provide below:
Creating a collapsible list with NativeScript
May I know how to expand the listview with multiple description like the following design?
Multiple description example
Following the example that you provided in the other question, you need another label in the ng-template of the ListView and to bind it to your additional descriptions like this:
...
<ng-template accordionItemTemplate let-item="item" let-parent="parentIndex" let-even="even" let-child="childIndex">
<StackLayout>
<Label [text]="item.description"></Label>
<Label [text]="item.description2"></Label>
<Label [text]="item.description3"></Label>
</StackLayout>
</ng-template>
...

Can Nativescript 4.0 new Frame use more elements than Tabview or Sidedrawer?

I see that Frame works now much better.
We can have Tabview,that is a root of current view.
<TabView androidTabsPosition="bottom">
<TabViewItem title="First">
<Frame defaultPage="home/home-page" />
</TabViewItem>
<TabViewItem title="Second">
<Frame defaultPage="second/second-page" />
</TabViewItem>
</TabView>
This looks like home-page or second-page is “included”.
Now, i’m wondering if it’s possible to have app-root.xml that holds common elements, and needed page is included. I’ve tried this, but this is not working (why? This approach is possible only for tabview and sidedrawer ?)
app-root.xml
<Page>
<Frame defaultPage="create/create"></Frame>
</Page>
create/create.xml
<StackLayout class="footer white">
<Label text="test"></Label>
</StackLayout>
Instead of Page use layout like GridLayout Look at this test application as a reference and more specifically this page
However, the above approach would work for Android but for iOS, you should either remove the action bar for each Page (inside each Frame) or create multiple action bars (not recommended!).

How to align text inside list view to the right instead of the default left?

I am creating an Arabic app with NativeScript. I want each row inside list view to be viewed in rtl direction so the text in the row is aligned to the right.
I tired using text-align:right and horizontal-align:right but didn't worked.
How can I do this?
Thank you.
As there is no code snippet of what you have tried so far we can only speculate what is your code structure.(see here)
However here is a very basic example on how to align all list-view cell templates to the right by default.
<ListView.itemTemplate>
<GridLayout rows="*" columns="*">
<Label row="0" col="0" text="right aligned text" textAlignment="right" textWrap="true" />
</GridLayout>
</ListView.itemTemplate>

NativeScript Scroll ListView with Title

I have this code in main-page.xml:
<GridLayout rows="auto, *">
<Label text="Title" class="title" row="0" />
<ListView id="listView" items="{{ listItems }}" row="1">
<ListView.itemTemplate>
<StackLayout>
<Button text="{{ name }}" tap="dd" />
</StackLayout>
</ListView.itemTemplate>
</ListView>
</GridLayout>
When I scroll the title stick to the top (stay and don't move), is there is a way to make it behave normally ?
I found a cleaner solution using : https://docs.nativescript.org/cookbook/ui/repeater
<ScrollView>
<StackLayout>
<Label text="Title" class="title" />
<Repeater id="listItems" items="{{ listItems }}">
<Repeater.itemTemplate>
<StackLayout>
<Button text="{{ name }}" tap="loadGuide" />
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
This is definitely the expected behavior when placing a Label at a row of a GridLayout which is set to auto. What you want to achieve can be done but will require additional implementations for example like this (No boring ActionBar) third party Android library. What you can do is either implement the same using pure JavaScript/TypeScript directly in your app (by managing the size of the ActionBar) or create a custom NativeScript plugin that uses the mentioned android library.
One of the many beauties of NativeScript is that 100% of the native iOS and Android APIs are accessible meaning anything that is achievable in an native iOS or Android app is achievable in {N}.

NativeScript Floating Button

I just recently started with NativeScript and ran into a roadblock.
I have a AppBuilder/NativeScript project (iOS only for now) in which I want to implement a floating action button. I have seen plenty of examples where the FAB is positioned above a ListView however my scenario is different:
I have 3 repeaters (displaying unrelated data).
each repeater may or may not be visible on the page (if there is no data to display, I am hiding it)
I would like to place the FAB on the bottom right regardless of what the content is
The whole page is wrapped in a ScrollView
I tried using nativescript-floatingactionbutton, but I cannot compile with this module installed. I keep getting "Cannot build project because module nativescript-floatingactionbutton contains insecure code. Remove the module and try again."
I also tried an AbsoluteLayout on the page level, but it seems that the layout overlays the rest of the page and I cannot even see the content, just the FAB.
Here is the markup
<Page id="MainPage" xmlns="http://schema.nativescript.org/tns.xsd" actionBarHidden="true" loaded="pageLoaded" xmlns:drawer="nativescript-telerik-ui/sidedrawer" xmlns:sharedDrawers="widgets/drawers">
<drawer:RadSideDrawer id="mainDrawer">
<drawer:RadSideDrawer.mainContent>
<ScrollView id="wrapper" opacity="0">
<DockLayout stretchLastChild="false">
<GridLayout id="mainHeader" cssClass="header" dock="top" columns="50, *, 50">
<Label class="icomoon-icon" text="" row="0" col="0" horizontalAlignment="center" tap="openDrawer" fontSize="18" />
<Label horizontalAlignment="center" text="{{ pageTitle }}" row="0" col="1" />
<Label class="icomoon-icon" text="" row="0" col="2" horizontalAlignment="center" tap="notifications" fontSize="18" />
</GridLayout>
<GridLayout cssClass="main" rows="auto, *" >
<StackLayout row="0">
<StackLayout cssClass="{{arr.length ? '' : 'hidden' }}">
<label cssClass="section-title" text="{{strings.activeLoans}}"></label>
<Repeater items="{{ arr }}" >
<Repeater.itemTemplate cssClass="item">
...
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
<StackLayout cssClass="{{arr2.length ? '' : 'hidden' }}">
<label cssClass="section-title" text="{{strings.history}}" marginTop="20" />
<Repeater items="{{ arr2 }}">
<Repeater.itemTemplate>
...
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
<StackLayout cssClass="{{arr3.length ? '' : 'hidden' }}">
<label cssClass="section-title" text="{{strings.data}}" marginTop="20" />
<Image src="~/images/pic.jpg" />
<Repeater items="{{ arr3 }}">
<Repeater.itemTemplate>
...
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
</StackLayout>
</GridLayout>
</DockLayout>
</ScrollView>
</drawer:RadSideDrawer.mainContent>
<drawer:SideDrawer.drawerContent>
<sharedDrawers:mainDrawer />
</drawer:SideDrawer.drawerContent>
</drawer:RadSideDrawer>
<!--<AbsoluteLayout cssClass="fabContainer">
<Image src="res://fab_add" tap="newLoan" cssClass="fab" />
</AbsoluteLayout>-->
</Page>
I have truncated and changed some of the non-relevant code.
Any help is greatly appreciated.
Thank you.
Аs Brad Martin says, the plugin cannot be built inside Telerik Platform as not all of its maintainers are white listed. To be more precise, when an iOS build of a plugin containing a pod file is initiated in Telerik Platform, the service checks its maintainers. As a pod file can contain post build scripts, Telerik Platform is currently flagging plugins as safe by keeping a list of white listed maintainers.
This plugin has 5 maintainers - Brad Martin being only one of them. Brad’s email is white listed but ‘gabrielbiga’ and ‘lazaromenezes’ are not yet whitelisted. #Brad Martin- can you please let us know whether we should whitelist these users emails as well?
The other approach would be to replace the pod file with frameworks instead.
One last thing, moving forward with Telerik Platform releases Telerik Platform team will be working on improving the support for plugins containing pods. They will probably remove the "whitelisting” approach with sandboxing instead but we couldn’t yet comment on any specifics. 

Resources