ng-template Cannot read property 'selected' of undefined on checkbox

Question

In my code I am facing issue.

My HTML snippet is:

<form [formGroup]="personalForm">
   <div style="background-color: gainsboro">
      <div formArrayName="other"
         *ngFor="let other of personalForm.get('other').controls; let i = index"
         class="form-group">
         <div [formGroup]="other">
            <span for="filterName">{{other.controls.filterName.value}}</span>
            <ng-select #ngSelect
            formControlName="searchCreteria"
            [items]="other.value.data"
            [multiple]="true"
            [virtualScroll]="true"
            bindLabel="name"
            [closeOnSelect]="false"
            [clearSearchOnAdd]="true"
            bindValue="name"
            (paste)="onPaste($event,other,i)"
            (clear)="removeCompletePanel(i)"
            [selectOnTab]="true"
            [(ngModel)]="selectedSearchCreteria[i]">
            <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
               <input [ngModelOptions]="{standalone: true}" [ngModel]="item$.selected" id="item-{{index}}" type="checkbox" /> {{item.name | uppercase}}
            </ng-template>
            <!--<ng-template ng-option-tmp let-item="item" let-index="index">
               <input style="visibility:visible;" [ngModelOptions]="{standalone: true}"  (ngModelChange)=onChange() [(ngModel)]="item.selected" id="item-{{index}}" type="checkbox" /> {{item.name | uppercase}}
               </ng-template>-->
            </ng-select>
         </div>
      </div>
   </div>
   </div>
</form>

On ng-template I am getting the following error and I am not able to select the item using click on checkbox label:

Cannot read property 'selected' of undefined

Please suggest me how I can handle this error.

UPDATE:

After getting suggestion from @Poul, I successfully upgrade angular and ng-select. Now I am not getting error, but still checkbox is not selected while I am clicking on checkbox label.

But tag is created successfully:

Package.json:

"dependencies": {
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/http": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@angular/upgrade": "~7.1.0",
    "angular-in-memory-web-api": "^0.7.0",
    "bootstrap": "3.3.7",
    "core-js": "^2.5.4",
    "reflect-metadata": "0.1.10",
    "es6-shim": "^0.35.1",
    "fancybox": "3.0.0",
    "jquery": "3.1.1",
    "jquery-validation": "1.15.1",
    "jquery-validation-unobtrusive": "3.2.6",
    "natives": "^1.1.4",
    "rxjs": "^6.6.0",
    "rxjs-tslint": "0.1.5",
    "rxjs-compat": "^6.6.0",
    "systemjs": "0.19.40",
    "zone.js": "~0.8.26",
    "jszip": "^3.2.1",
    "typings": "^1.3.2",
    "wijmo": "5.20191.605",
    "@ng-select/ng-select": "2.4.0",
    "@ng-select/ng-option-highlight": "0.0.5"
  },

Answer 1

You are using a (very) old version of ng-select and angular. To fix the issue you are having, you have to upgrade to a newer version. At least angular 6 to resolve it, because the item$ template variable was released in v2.3.0 of ng-select.

However, if you want the latest bug/security fixes and features, you are way better off upgrading to the latest versions.