How to enable buttons of a ListView item one by one?

Question

I'm writing an app using Nativescript and Angular. I have a component whith a template that uses ListView and looks like this:

<ScrollView>
  <ListView [items]="things">
    <ng-template let-item="item">
      <GridLayout rows="*" columns="*,*,*">
         <Button col="0" text="Play Short" (tap)="playShort(item.shortAudio)"></Button>
         <Button col="1" text="Play Full" (tap)="playFull(item.fullAudio)"></Button>
         <Button col="2" text="Answer" (tap)="playShort(item.answer)"></Button>
      </GridLayout>
    </ng-template>
  </Listview
</ScrollView>

What I'm looking for: Is there a way to enable buttons one after another within one ListView item? Tapping "Play Short" enables "Play Full" and it enables "Answer" in its turn.

I know how to do it 'globally' when buttons of all ListView items will be enabled.

And is it possible to use Images instead of buttons? Changing image when its state switches from disable to enable?

Answer 1

You could use multiple boolean flags to enable / disable each button or even maintain the state with an integer value, something like

<ScrollView>
  <ListView [items]="things">
    <ng-template let-item="item">
      <GridLayout rows="*" columns="*,*,*">
         <Button col="0" text="Play Short" (tap)="playShort(item.shortAudio)"></Button>
         <Button col="1" text="Play Full" [disabled]="item.state < 1" (tap)="playFull(item.fullAudio)"></Button>
         <Button col="2" text="Answer" [disabled]="item.state < 2" (tap)="playShort(item.answer)"></Button>
      </GridLayout>
    </ng-template>
  </Listview
</ScrollView>

Assume you assign an initial value to state as 0 and Play Short button is always enabled. Upon tapping Play Short set the value of state to 1 by then Play Full will be enabled. Upon Play Full tap, set state to 2 then Play Answer should be enabled.