I want to use the new @for syntax together with @empty to either show the user a table or some text telling there is no data.

With ngFor I usually checked the length of the data array. If not empty:

1. Add the table header
2. ngFor the data
3. Add the table footer

With the newer syntax I hoped to be able to combine those 3 steps above into the @for itself like this:

@for(order of licenseOverview.orders; track order.id; let firstRow = $first; let lastRow = $last) {
   @if(firstRow) {
       <table ...
   }

   <tr>
       <td>{{ order.reference }}</td>
       <td>{{ ... }}</td>
   </tr>

   @if(lastRow) {
       ... </table>
   }
}
@empty { <p>No data for you!</p> }

I expected this to just compile and render the table, but it seems like Angular can’t handle this. Is there a way to get this to work?