NativeScript: Format long text, especially an ordered list

Question

We are developing a mobile app using NativeScript 8 with Angular. We want to display long formatted texts like our terms and conditions right in the app, but formatting those long texts is quite cumbersome, because you have to use Label, FormattedString and GridLayout a lot to accomplish things that are pretty simple in HTML.

Specifically, we want to show an ordered list. In HTML, this is done pretty easily by using the ol element. With the ol element, numbering and formatting are done automatically by the web browser.

In NativeScript, I tried to replicate a similarly formatted ordered list by using GridLayout like so

<GridLayout
    columns="auto, *"
    rows="auto, auto, auto">
    <Label row="0" col="0">1)</Label>
    <Label row="0" col="1" textWrap="true">This is the first rule you should follow when using the app.</Label>

    <Label row="1" col="0">2)</Label>
    <Label row="1" col="1" textWrap="true">This is another rule.</Label>

    <!-- ... -->
</GridLayout>

This works, but I need a lot of code just to format a simple ordered list. Also, the item numbers are hardcoded, so if things should be rearranged, I need to change the numbering too and as far as I know, I also have to set the number of rows of the GridLayout to a fixed value, so whenever a new item should be added to the list, I also have to add another entry to the rows attribute of the GridLayout or the new row won't show up.

I looked into the ListView, but just by looking at the docs, I couldn't figure out if I can set the items for the ListView right in the XML. It seems like you can only bind the items property of the ListView to a property of the component class, but I don't want to define the list items as an array property in my component class, I want the items to be part of the XML.

Is there a way to use ListView to accomplish an ordered list? Or is the simplest way of formatting long texts to use the WebView with an HTML file? Or is there an entirely different, simpler solution to displaying a long formatted text in NativeScript?

Answer 1

You could take a look at HtmlView. It sounds like a perfect fit for your use case.

<HtmlView [html]="htmlString"></HtmlView>

import { Component } from '@angular/core'

@Component({
  moduleId: module.id,
  templateUrl: './usage.component.html'
})
export class HtmlViewUsageComponent {
  htmlString: string

  constructor() {
    this.htmlString = `<span>
                         <h1>HtmlView demo in <font color="blue">NativeScript</font> App</h1>
                       </span>`
  }
}