htmlangulartypescriptangular-ngmodelchange

(ngModelChange) / (change) is not working in angular input tag


I have to get the event data from (ngModelChange) or (change) of checkbox in input tag. I don't know why both are not working. I'm triggering this event inside the multiple modals. And i think that may be the cause.(Assumption only). Or is there any other way to achieve this in Typscript?.

<div class="col-md-6 resclass3">
    <ng-select class="custom" [items]="valve_manual_on" bindLabel="name" bindValue="id" [multiple]="true" 
        [closeOnSelect]="false" placeholder="Select Valve" [(ngModel)]="selectedManualValves">
            
        <ng-template ng-multi-label-tmp>
            <div class="ng-value">
                <span class="ng-value-label" *ngIf="selectedManualValves.length===1">
                    {{finder(selectedManualValves)}}</span>
                <span class="ng-value-label" *ngIf="selectedManualValves.length>1">
                    {{selectedManualValves.length}} Selected </span>
            </div>
        </ng-template>

        <ng-template ng-option-tmp let-item="item" let-index="index" let-item$="item$">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" (ngModelChange)="onChange($event)" [ngModel]="item$.selected" class="custom-control-input" />
                <label class="form-check-label ml-2 custom-control-label">
                    &nbsp;&nbsp;{{item.name}}</label>
            </div>
        </ng-template>

    </ng-select>
</div>

Solution

  • I have cleared a issue, Just used change event inside the ng-select tag and it is working for me.

    <ng-select class="custom" [items]="valve_manual_on" bindLabel="name" bindValue="id" [multiple]="true" **(change)="onChange($event)"**
        [closeOnSelect]="false" placeholder="Select Valve" [(ngModel)]="selectedManualValves">
            
        ..//
    
    </ng-select>