Simplest Nativescript Pro UI

proui

#1

I’m trying to use nativescript-pro-ui’s RadListView and I currently have this simple setup just to get things started and absolutely nothing is working. Please help

After installing plugin and re-building app…

app.module.ts:

import {NativeScriptUIListViewModule} from "nativescript-pro-ui/listview/angular";
...

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        ...
        NativeScriptUIListViewModule,
       ..
    ],

items.component.html

<RadListView>
   <Label text="Hello world"></Label>
</RadListView>

#2

The list view is meant to render the data items using given templates, it doesn’t work like the usual views / layouts. You can find all possible angular examples for Pro UI from basic to advanced level here.


#3

Hello. I’ve seen this resource and been through all the examples. I’ve used the examples just as they are and still nothing. That’s why I tried make the view do as little as possible and build on top. I started a new project with the --ng tag and used the “items” from items.component.ts to get the RadListView to render and also still nothing


#4

my items.component.html at the moment

<GridLayout tkExampleTitle tkToggleNavButton>
    <RadListView [items]="items">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical">
                <Label class="nameLabel" [text]="item.name"></Label>
                <Label class="descriptionLabel" [text]="item.role"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

#5

This must work if you have right data in items array. You might have to remove the tkExampleTitle and tkToggleNavButton directives if you haven’t copied them in your project.


#6

Ha! I did a rebuild and now it working! Thanks