Migrating from filtered collection-repeat in ionic v1 to filtered VirtualScroll in ionic-v4 based on Search input

Hi,

I posted this on StackOverflow here but since I didn’t get any response there I am hoping this forum may provide me a response.

I am starting to migrate an ionic-v1 app to ionic-v4.

I have an associative array of country objects as below

var countries = {
        af: {
            name: 'Afghanistan (‫افغانستان‬‎)',
            countryCode: 'af',
            intlPrefix: '93'
        },
        al: {
            name: 'Albania (Shqipëri)',
            countryCode: 'al',
            intlPrefix: '355'
        },
        dz: {
            name: 'Algeria (‫الجزائر‬‎)',
            countryCode: 'dz',
            intlPrefix: '213'
        },
        ... more countries
}

I have this simple code in ionic-v1 that lets the user type in the country name and filter the displayed list to select the country.

  <ion-content>
    <div class="list list-inset">
      <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Search" ng-model="search" maxlength="20"/>
      </label>
    </div>
    <div class="list">
      <div class="item item-country" collection-repeat="country in countries | filter:{'name': search}" ng-click="updateSelectedCountry(country);">
        <h2>{{country.name}}</h2>
        <p>+{{country.intlPrefix}}</p>
      </div>
    </div>
  </ion-content>

I understand that collection-repeat from ionic-v1 has been replaced by VirtualScroll in ionic-v4 and was thinking that ionic-v4 would have something simple to achieve this. However, after a lot of reading and searching I haven’t found a simple elegant mechanism to accomplish what the code above does. In particular I am looking to translate this piece of code

<div class="item item-country" collection-repeat="country in countries | filter:{'name': search}"

I am trying something like this

      <div class="list list-inset">
        <label class="item item-input">
          <i class="icon ion-search placeholder-icon"></i>
          <input type="text" placeholder="Search" [(ngModel)]="search" maxlength="20"/>
        </label>
      </div>
      <ion-virtual-scroll [items]="countries">
        <ion-item *virtualItem="let country" *ngIf="country.name == search">
          <h2>{{country.name}}</h2>
          <p>+{{country.intlPrefix}}</p>
        </ion-item>
      </ion-virtual-scroll>

but apparently I can’t have both *virtualItem and *ngIf on the the same line as it complains that I can’t have multiple template bindings on the same element.

Looking for help from ionic-v4 experts to help solve this problem in the best way possible.

Thanks,
Sanjay.