🤖 Create a chatbot for your NativeScript app! Learn more at our upcoming webinar.

NativeScript Angular

RadListView Item Templates

By default when using the RadListView in order for the items from its data source to be visualized all that you need to do is declare your own itemTemplate and set it to the desired UI View. This will make sure that each of the business objects of the passed to the items property are visualized using that template, but there are scenarios where you may want to use different template for specific business objects (different sections, important business objects, more detailed objects etc.). IN such scenarios the the itemTemplates can be used.

Using Multiple Item Templates

In order to setup the RadListView to use different templates for its items representation you will need to:

  • Create a function or pass a string representation of a "property" by which the template for each business object will be determined. This is done by setting the itemTemplateSelector property
  • Create multiple separate ng-template, add them to the itemTemplates collection property and set their tkTemplateKey to the desired unique template identifier. The tkTemplateKey is a custom directive and is what will be used to do the comparison in the itemTemplateSelector

Example 1: Setting up itemTemplateSelector and itemTemplates

In the code snippets bellow we are declaring multiple <ng-template></ng-template> instances in the HTML. After that we are creating a function in our Angular Component that simply returns the property of the business object that will be used to determine FFthe template of its item representation and finally we are binding that function to the itemTemplateSelector property:

Figure 1: RadListView with multiple item templates:

RadListView: Multiple item templates RadListView: Multiple item templates

References

Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.