template ionicSelectableItemTemplate not working in ionic 7
Hello. I am using ionic 7 and version 5.0.3 of ionic-selectable but ionicSelectableItemTemplate has stopped working and the listing only displays the field indicated in itemTextField. <ng-template ionicSelectableItemTemplate let-crop="item"> {{ crop.description }} - {{ crop.cropEsyrce }}
my package "@angular/animations": "^17.0.2", "@angular/common": "^17.0.2", "@angular/compiler": "^17.0.2", "@angular/core": "^17.0.2", "@angular/forms": "^17.0.2", "@angular/platform-browser": "^17.0.2", "@angular/platform-browser-dynamic": "^17.0.2", "@angular/router": "^17.0.2", "@aws-sdk/client-s3": "3.621.0", "@capacitor-community/camera-preview": "^4.0.0", "@capacitor-community/sqlite": "5.7.3-3", "@capacitor/android": "5.7.4", "@capacitor/app": "5.0.7", "@capacitor/background-runner": "^1.1.0", "@capacitor/browser": "^5.2.0", "@capacitor/core": "5.7.4", "@capacitor/device": "^5.0.7", "@capacitor/filesystem": "^5.2.1", "@capacitor/geolocation": "^5.0.7", "@capacitor/haptics": "5.0.7", "@capacitor/ios": "^5.7.4", "@capacitor/keyboard": "5.0.8", "@capacitor/motion": "^5.0.7", "@capacitor/network": "^5.0.7", "@capacitor/preferences": "^5.0.7", "@capacitor/screen-orientation": "^5.0.7", "@capacitor/splash-screen": "^5.0.7", "@capacitor/status-bar": "5.0.7", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", "animate.css": "^4.1.1", "crypto-browserify": "^3.12.1", "crypto-js": "^4.2.0", "ionic-selectable": "^5.0.3", "ionicons": "^7.0.0", "jsts": "2.7.1", "jszip": "^3.10.1", "ngx-logger": "^4.3.3", "ol": "7.1.0", "ol-ext": "4.0.4", "proj4": "^2.8.1", "rxjs": "~7.8.0", "swiper": "^11.0.7", "tslib": "^2.3.0", "zone.js": "~0.14.2"
@hugodaniel75 you need to import IonicSelectableItemTemplateDirective on your component to make it works
well, I've imported
IonicSelectableComponent,
IonicSelectableItemTemplateDirective,
IonicSelectableValueTemplateDirective,
IonicSelectableCloseButtonTemplateDirective,
then
<ionic-selectable #clienteComponent [(ngModel)]="cliente" [items]="clienti" itemValueField="id" itemTextField="name"
[canSearch]="true" [hasInfiniteScroll]="true" (onChange)="clienteChange($event)"
(onSearch)="searchClientiWithTimeout($event)" (onInfiniteScroll)="getMoreClienti($event)">
<!-- Template per l’elemento selezionato -->
<ng-template ionicSelectableValueTemplate let-value>
1 {{ value === undefined ? 'undefined' : 'ok' }}
</ng-template>
<!-- Template per ciascun item della lista -->
<ng-template ionicSelectableItemTemplate let-item>
2 {{ item === undefined ? 'undefined' : 'ok' }}
</ng-template>
<!-- Template per pulsante chiudi -->
<ng-template ionicSelectableCloseButtonTemplate>
<ion-icon name="close-circle" style="font-size:18px;"></ion-icon>
</ng-template>
</ionic-selectable>
It returns to a series of "2 undefined" for item lists, a "1 undefined" when an element is selected. Template seems to work, but variables aren't recognized at all... does someone get this working properly?