angularprimengngmodelng-templateng-container

Trying to use ngModel inside of ng-template


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.


Solution

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