2

since I use several similar mat-inputs inside a template form, I define an ng-template for these mat-inputs and refer to it via *ngTemplateOutlet and also pass related data to the template as bellow:

<ng-template #formFieldInput let-hintMsg="hintMsg" let-lable="lable" let-        dataBinding="dataBinding">
  <mat-form-field appearance="outline" class="fa">
    <mat-label>{{lable}}</mat-label>
    <input matInput type="text"  name="nationalCode"
        [(ngModel)]="dataBinding" [disabled]="!personalInfoEdit"/>
    <mat-hint *ngIf="personalInfoEdit">{{hintMsg}}</mat-hint>
  </mat-form-field>
</ng-template>

// ... 

<ng-container *ngTemplateOutlet="formFieldInput; context:{hintMsg: 'Enter National Code', lable: 'National Code', dataBinding: profileDetails.nationalCode} ">
</ng-container>

but I got this error:

 [webpack-dev-middleware] Error: Cannot assign value "$event" to template variable "dataBinding". Template variables are read-only.

how can fix this problem? best regards

R. Nourmandi
  • 157
  • 12

0 Answers0