Creating a collapsible list with NativeScript

I was finally able to figure it out, but I had help from @manojdcoder's code in the nativescript forum. I used ListView and Observable arrays. This is my solution:

  import { Component, OnInit, ViewChild} from "@angular/core";
  import { Router } from "@angular/router";
  import { Question } from "../../shared/question/question";
  import { Observable } from "tns-core-modules/data/observable";
  import { ObservableArray } from "tns-core-modules/data/observable-array";
  import { RadListView, ListViewEventData } from "nativescript-ui-listview";
  // import { RadDataFormComponent } from "nativescript-ui-dataform/angular";

  import { isIOS, isAndroid } from "platform";
  import * as utils from "utils/utils";
  declare var UIView, NSMutableArray, NSIndexPath;


  @Component({
    selector: "question",
    moduleId: module.id,
    templateUrl: "./question.html",
    styleUrls: ["./question-common.css", "./question.css"]
  })
  export class QuestionComponent implements OnInit{ 
    public myQuestions: ObservableArray<any>;
    public isItemVisible: boolean;
    constructor(){
    }

    ngOnInit() {
      this.myQuestions =new ObservableArray([
        new Question("Topic 1", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 2", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 3", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 4", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 5", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 6", "lorem ipsum lorem ipsum lorem ipsum",false)
        ]);  
    } 

    templateSelector(item: any, index: number, items: any): string {
      return item.expanded ? "expanded" : "default";
    }

    onItemTap(event: ListViewEventData) {
      const listView = event.object,
          rowIndex = event.index,
          dataItem = event.view.bindingContext;

      dataItem.expanded = !dataItem.expanded;
      if (isIOS) {
              var indexPaths = NSMutableArray.new();
              indexPaths.addObject(NSIndexPath.indexPathForRowInSection(rowIndex, event.groupIndex));
              listView.ios.reloadItemsAtIndexPaths(indexPaths);
      }
      if (isAndroid) {
          listView.androidListView.getAdapter().notifyItemChanged(rowIndex);
      }
    }

  }

And here is the view, using a RadListView:

<RadListView [items]="myQuestions" [itemTemplateSelector]="templateSelector" class="list-group" (itemTap)="onItemTap($event)">
    <ng-template tkListItemTemplate let-item="item">
        <GridLayout rows="auto,auto" columns="6*,*" class="add-dropdown">
            <Label [text]="item.question" class="list-group-item" col="0"></Label>
            <Image src="res://arrow" col="1"></Image>
        </GridLayout>

    </ng-template>
    <ng-template tkTemplateKey="expanded" let-item="item">
        <GridLayout rows="auto,auto" columns="6*,*" class="list-group-item add-dropdown">
            <Label row="0" col="0" [text]="item.question" class="font-weight-bold"></Label>
            <Image row="0" col="1" src="res://arrow_horizontal"></Image>
            <Label row="1" col="0" [text]="item.description" class="show-answer"></Label>
        </GridLayout>

    </ng-template>
</RadListView>

And here is my screen: enter image description here