How to restrict ngModel changes effect to other inside ng-template in angular7?

Question

This is my code

 <ng-template #rowDetailsTmpl let-row="row"> <div class="row" style="padding: 10px 30px;"> <div class="col-sm-5 form-group"> <label> Add Operator </label> <input type="string" id={{row.DeskId}} name={{row.DeskId}} (ngModelChange)="onChangeOperator($event)" class="form-control" placeholder="Search Operator" [(ngModel)]="selectedOperatorEmail"> </div> @ViewChild('rowDetailsTmpl', { static: true }) rowDetailsTmpl: TemplateRef<any>; this._dataTableService.rowDetailsTemplate = this.rowDetailsTmpl;

In my code input text field using inside ng-template , i set id and name dynamically , but when i change value in textbox it automatically reflect to other input fields. so how to solve this problem in angular7.

Answer 1

in component define the model like array:

selectedOperatorEmail: Array<any> = [];

in html define ngModel define like this:

[(ngModel)]="selectedOperatorEmail[row.DeskId]"