What is the difference between let-item="item" and let-item$="item$"?

Question

I am using the following code snippet to use multiselect feature of ng-select:

 <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}"
                                                                       [ngModel]="item.selected"
                                                                       id="item-{{index}}"
                                                                       type="checkbox" />
                                                                {{item.name | uppercase}}
                                                            </ng-template>
                                                        </ng-select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row" style="padding: 10px 5px 0px 5px">
                                                <div class="col-sm-6">
                                                    <button class="btn btn-light"
                                                            style="padding: 10px 35px; margin: 4px 0px 0px 15px;"
                                                            title="Press to clear all"
                                                            (click)="onClearAll()">
                                                        Clear All
                                                    </button>
                                                </div>
                                                <div class="col-sm-6 btn-group-" role="group" style="height: 100%; vertical-align: bottom; padding: 5px 0px">
                                                    <div class="text-center nav-justified" style="height: 100%">
                                                        <button #calculateButton
                                                                type="submit"
                                                                class="btn btn-fetch active"
                                                                (click)="calculateButtonClick()"
                                                                accesskey="c">
                                                            Fetch
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>

When I using:

<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>

then I am getting output:

Checkbox checked and items selected.

But when I use:

    <ng-template ng-option-tmp let-item="item" let-index="index">
                        <input [ngModelOptions]="{standalone: true}" [ngModel]="item.selected" id="item-{{index}}" type="checkbox"/> {{item.name | uppercase}}
        </ng-template>

Output is:

As I am using Angular 5.2.11. So let-item$ is not working there but when I am removing this then checkbox not working. For more information you can check sample here

Answer 1

I found the solution for this, the item$ template variable was released in v2.3.0 of ng-select.