How to get length of array in template syntax

Question

I am trying to evaluate the below in template syntax which is an array:

FAIL  {{ cols.length }} 

I get the below error.

platform-browser.umd.js:1900 ORIGINAL EXCEPTION: TypeError: Cannot read property 'length' of undefined 

But I do iterate so I know that portion works:

      SUCCESS      <th *ngFor="let h of cols">          {{h}}       </th> 

Answer 1

Use

{{ cols?.length }} 

Or

<div *ngIf="cols">{{ cols.length }}</div> 

If you want to print 0 for empty array, use

{{ cols?.length || '0' }} 

Reason: cols is not initiated when Angular2 load the template. And we want to wait until it's ready to access its members.

Answer 2

Try defining the cols variable as an object list on .ts archive cols: object[];

If you want to print 0 for an empty array use the ternary operator:

{{ cols ? cols.length : '0' }}