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.
