Hi Nguyen,

Thank you for posting to Infragistics Community!

It appears that the sample you have shared is not runnable and is using a very outdated version of both Angular and Ignite UI for Angular. The currently supported versions are 14.2.x and 15.1.x, with 16.x to be released very soon. Moreover, the error from the screenshot does not seem to reference the Ignite UI library code.

Although, from the template code in the shared sample I can see that it demonstrates displaying a dynamic collections of columns with the help of the *ngFor directive as well as conditional cell templates.

So, I can recommend checking out the following topics from our documentation on the subject:

• Angular Grid Column Configuration
• Cell Template
• Cell Editing Template

Additionally, here is a functioning sample against version 15 demonstrating the same. You can use it for reference in implementing the target features in the grid, such as cell editing.

If the sample and the provided resources are not an accurate demonstration of what you are trying to achieve, please, fork and modify the StackBlitz demo with only the relevant code and send it back to me along with more details, so I can assist you further.

Best regards,
Bozhidara Pachilova
Associate Software Developer

Could you please elaborate on the configuration of your app? For example, can you please provide the described column’s template code, as well as its “dynamic” equivalent? Are these inputs part of the cell editing template? This information will be highly appreciated, so that I can have more context about your question and will be able to assist you.

What I can currently say is that the ng-relfect-*property* attributes are added for debugging purposes and show the input bindings that a component/directive has declared in its class. Having this in mind, is it possible that this binding is missing in the “dynamic” configuration?

Ideally, please, fork and modify the previously referenced sample with only the relevant code and send it back to me along with more details, to demonstrate your point.

Best regards,
Bozhidara Pachilova

cond.zip

The file above contains the code I'm using.

<igx-grid [hideRowSelectors]="true" #grid1 [data]="rowData" [height]="null" primaryKey="title" displayDensity="compact" [clipboardOptions]="copyOptions" paste-handler
          (onDataProcessed)="dataPasted($event, grid1, 1)"
          (cellEditExit)="cellEditExit($event, 1)"
          (gridKeydown)="customKeydown($event, grid1)"
          (keydown)="handleKeyDownBoardEvent($event, grid1)"
          (keyup)="handleKeyUpBoardEvent($event, grid1)"
          (cellEditEnter)="cellEditEnter($event, rowData)"
          (cellClick)="checkClickFluidType($event)"
          (selected)="setCellSelection($event, grid1, 'onSelection')"
          (rangeSelected)="setCellSelection($event, grid1, 'onRangeSelection')"
          (activeNodeChange)="onActiveNodeChange($event, grid1)"
>
  <igx-column field="title" header="項目名" [width]="widthTitle" [pinned]="true" [headerClasses]="'text-center'" [cellClasses]="cellCls2">
  </igx-column>
  <igx-column *ngFor="let c of columns" [field]="'no'+c" [header]="'No.'+c" [width]="'130px'" [editable]="true" [headerClasses]="'text-center pd0'" [cellClasses]="cellClsDirtyCheck"></igx-column>
</igx-grid>

  addTab() {
    this.columns.push(this.columns.length + 1);
    this.rowData.map(row => {
      if (row.field === 'WITH_FIN_A' || row.field === 'WITH_FIN_B') {
        return row['no'+this.columns.length] = true;
      } else {
        return row['no'+this.columns.length] = '';
      }
    };
  }

related html and ts files.

First I have column number from no1->no16.

When I click "追加" button (add column) it generates no17.

Here I click to edit the data of column no17, I am getting the above error.

Note: Column no17 is being generated by the library after I push to add an element to the columns array.