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


Search Results

Index Record

  "feature": "Foo",
  "operations": [
  "webpages": [
  "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">
        <ng-template let-hits="hits" let-results="results">
            <div *ngIf="hits.length === 0">
                No results found matching <strong>{{results.query}}</strong>.

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

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


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