ionic-selectable icon indicating copy to clipboard operation
ionic-selectable copied to clipboard

template ionicSelectableItemTemplate not working in ionic 7

Open hugodaniel75 opened this issue 1 year ago • 2 comments

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 avatar Jan 13 '25 15:01 hugodaniel75

@hugodaniel75 you need to import IonicSelectableItemTemplateDirective on your component to make it works

w-mazed avatar Apr 27 '25 11:04 w-mazed

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?

m1lksh4ke-80 avatar Oct 28 '25 15:10 m1lksh4ke-80