Angular "let-col" is not passing all the properties

Question

I'm trying to pass extra fields to help with the processing. This how I define the columns array:

this.columns = [
        {field: 'vin', header: 'Vin', isMultiRowColumn: true },
        {field: 'year', header: 'Year', isMultiRowColumn: false},
        {field: 'brand', header: 'Brand', isMultiRowColumn: false},
        {field: 'color', header: 'Color', isMultiRowColumn: false}
    ];

Now, when I run the below code:

<p-dataTable [value]="testData">
  <p-column *ngFor="let col of columns" [field]="col.field" [header]="col.header">
    <ng-template let-col let-dt="rowData" pTemplate="body">
     <span>{{dt[col.field] + '-' + col.isMultiRowColumn }}</span>
    </ng-template>
  </p-column>
</p-dataTable>

I'm getting this:

dsad231ff-undefined 2012-undefined  VW-undefined    Orange-undefined

Is there any reason isMultiRowColumn is not being passed?

Thanks for helping

Answer 1

With let-col the context property $implicit is made available as col within the template for bindings. and you chose the col var in ngfor same as let-col,when you define let-col it makes a new var that references the table col that has a field property and it doesn't references your col variable that is defined in ngFor, it has field property but not isMultiRowColumn property, so try to change your ngfor variable from col to something else like column:

also check: What is let-* in Angular 2 templates?

<p-dataTable [value]="testData">
  <p-column *ngFor="let column of columns" [field]="column.field" [header]="column.header">
    <ng-template let-col let-dt="rowData" pTemplate="body">
     <span>{{dt[column.field] + '-' + column.isMultiRowColumn }}</span>
    </ng-template>
  </p-column>
</p-dataTable>

see DEMO and click button and check the log in your browser to see what the col really is.