Does RadListView still exist (Nativescript pro-ui)

Question

Edit: I have posted the higher level version of getting RadListView to work with the grouping function here. The question here addresses just getting RadListView to work in its basic form.

---

I have been away from Nativescript pro ui for a few months, and now am trying to put together a multilevel list (with categories, items in each category; and user able to hide and show categories with tap). From the discussion here I see that *ngFor is not the stable way to do a multilevel list (though it is the easiest!)

So now I am trying to use the pro ui listview, but the documentation is a few months old and uses the term "RadListView".

Does RadListView still exist? And what is the best documentation for doing a two or three level list in Nativescript Angular?

Details in case helpful:

So I am now trying to use RadListView to do this, but it is not clear to me that RadListView exists at all anymore. The market place listing for Nativescript pro-ui says the old pro-ui has been deprecated, and each item of the pro ui now must be downloaded individually (link).

It lists an npm listing for the pro ui "ListView", that uses the term "ListView". But, when you click on any of the documentation / sample code links in that npm listing, they all use the term "RadListView" (the old formulation).

I am not able to get RadListView to work. Even for the most simple example (which worked a few months ago), if I use RadListView in my component html, the screen is blank.

For example, I am trying to do a multilevel list. Looks like the "grouping" function in RadListView is the (only?) way to do this. I have cut and pasted in the code from here, but it does not work--blank screen with "RadListView" and no data with just "ListView".

example:

ts:

import { ListViewEventData, LoadOnDemandListViewEventData } from "nativescript-ui-listview";
import { RadListViewComponent } from "nativescript-ui-listview/angular";

export class SampleComponent implements OnInit {
  public arrayItems = [
                      {category:'person', name: 'jim', description: 'a very 
                       nice person'}, 
                      {category:'jungle animal', name: 'lion', description: 
                       'king of the jungle'}
                     ]

  private _myGroupingFunc: (item: any) => any;

   constructor (){
       this.myGroupingFunc = (item: arrayItems) => {
            return item.category;
        };
   }

   ngOnInit(): void {
   }

   get myGroupingFunc(): (item: any) => any {
        return this._myGroupingFunc;
    }

    set myGroupingFunc(value: (item: any) => any) {
        this._myGroupingFunc = value;
    }
}...

html:

<StackLayout>
   <ListView [items]="arrayItems" enableCollapsibleGroups="true" [groupingFunction]="myGroupingFunc" >
     <ng-template tkListItemTemplate let-arrayItem="item" >
      <StackLayout>
        <Label [text]="arrayItem.name"></Label>
        <Label [text]="arrayItem.description"></Label>    
      </StackLayout>
    </ng-template>
  </ListView>
</StackLayout>

With this code, copied from here, there are not entries that appear (just the lines of a ListView with nothing inside). If I say "RadListView" instead of "ListView", the screen is entirely blank. I would definitely appreciate if someone has updated code for this action.

Answer 1

Thanks to Ian MacDonald for his help. RadListView does remain the Nativescript pro-ui version of list view. It works for me like this:

$ tns plugin add nativescript-ui-listview

$ npm i

$ tns update //don't know why/what was out of date, but features like the grouping function did not work for me until I ran this.

coolComponent.module.ts: (if using lazy loading, I was only able to get RadListView to work by importing the module directly into the component module)

import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
...
@ngModule({
   imports: [
    ...
   NativeScriptUIListViewModule,
  ]
...

coolComponent.html:

<GridLayout>
    <RadListView [items]="cats" >
        <ng-template tkListItemTemplate let-cat="item">
            <StackLayout>
                <Label [text]="cat"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

coolComponent.ts:

import { Component } from "@angular/core";
import { ListViewEventData, RadListView } from "nativescript-ui-listview";
...

export class CoolComponent {
    public cats = ['tiger', 'lion', 'puma']

    constructor(){
   }
}