How to access Hits array elements?

I’m using Angular8/AIS 3.35.1.

How would I access a specific webpage, and description based on the value of an operation? For example, given the record and search code shown below, if I search for create foo, how could I display a string such as:

To create a foo, see this webpage: https://mydomain/myapp/foo/how_to_create

Thanks,
Bob

Search Results

Index Record

 {
  "feature": "Foo",
  "operations": [
    "create",
    "cancel"
  ],
  "webpages": [
    "https://mydomain/myapp/foo/how_to_create",
    "https://mydomain/myapp/foo/how_to_cancel"
  ],
  "descriptions": [
    "To create a foo, see this webpage: #WEBPAGE#",
    "To cancel a foo, see this webpage: #WEBPAGE#"
  ],
  "objectID": "87009280"
}

Search Code

<ais-instantsearch [config]="config">
    <ais-search-box></ais-search-box>
    <ais-hits>
        <ng-template let-hits="hits" let-results="results">
            <div *ngIf="hits.length === 0">
                No results found matching <strong>{{results.query}}</strong>.
            </div>

            <div *ngIf="results.query">
                <div *ngFor="let hit of hits" class="content">
                    <section>
                        <h3>{{hit.feature}} Results</h3>

                        <ais-highlight attribute="webpages" [hit]="hit"></ais-highlight>
                        <br>
                        <ais-highlight attribute="descriptions" [hit]="hit"></ais-highlight>
                        <br>
                        <ais-highlight attribute="documents" [hit]="hit"></ais-highlight>

                    </section>
                </div>
            </div>
        </ng-template>
    </ais-hits>
</ais-instantsearch>

You have two options:

  1. set this up as a query rule, and read userData from the results in a custom widget
  2. use a custom widget with connectSearchBox and show the text based on your condition & state.currentRefinement

docs: