I am trying to use ng-template
and ng-container
, alongside primeng
to have dynamic cells in my table:
<tr *ngFor="let data of tableData">
<ng-container
[ngTemplateOutletContext]="{ $implicit: data.n0 }"
[ngTemplateOutlet]="isEditable ? editableCell : readOnlyCell"
></ng-container>
</tr>
<ng-template let-data #editableCell>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input
class="edit-field-input"
type="number"
[(ngModel)]="data"
/>
</ng-template>
</p-cellEditor>
</td>
</ng-template>
<ng-template let-data #readOnlyCell>
<td>
<p-cellEditor>
<ng-template pTemplate="output">
{{ data }}
</ng-template>
</p-cellEditor>
</td>
</ng-template>
But I get the error: Error Cannot assign value $event to template variable data. Template variables are read-only.
I believe this is related to my ngModel but I don't really know how to fix this.
The problem was on the way I was passing the data to the templates.
<tr *ngFor="let data of tableData">
<ng-container
[ngTemplateOutletContext]="{ row: data, name: 'n0' }"
[ngTemplateOutlet]="isEditable ? editableCell : readOnlyCell"
></ng-container>
</tr>
<ng-template let-row="row" let-name="name" #readOnlyCell>
<td class="degrees-cell">
{{ row[name] }}
</td>
</ng-template>
<ng-template let-row="row" let-name="name" #editableCell>
<td pEditableColumn class="degrees-cell">
<p-cellEditor>
<ng-template pTemplate="input">
<input
class="edit-field-input"
type="number"
[(ngModel)]="row[name]"
/>
</ng-template>
<ng-template pTemplate="output">
{{ row[name] }}
</ng-template>
</p-cellEditor>
</ng-template>