I came across wanting to create a component in angular 2 that should display an edit section underneath a table row.

But because *ngFor only supports creating one element I hit a wall.

After some digging I found that by destructuring *ngFor into it’s standalone attributes I could use them on a <template> and be able to create what I wanted.

import { Component, Input, Output, ChangeDetectionStrategy, EventEmitter } from '@angular/core';

interface Asset {
  id: number;
  name: string;
  price: number;
  change?: string;

  selector: 'assets',
  template: `

        <template ngFor let-asset [ngForOf]="assets" [ngForTrackBy]="assetTrackBy">
              <button type="button" (click)="showEdit(asset)" *ngIf="enableEdit && !asset.isEditing">Edit</button>
              <button type="button" (click)="cancelEdit(asset)" *ngIf="asset.isEditing">Cancel</button>
          <tr *ngIf="asset.isEditing">
            <td colspan="4">
              <div class="bg-gray p-a-2">
                <textarea [(ngModel)]="asset.change"></textarea>
                <button type="button" (click)="change(asset)">Save</button>
export class AssetsComponent {

  @Input() assets: Asset[];
  @Input() enableEdit: boolean = false;

  @Output() save: EventEmitter<Asset> = new EventEmitter();

  showEdit(asset) {
    asset.isEditing = true;

  cancelEdit(asset) {
    asset.isEditing = false;
    asset.change = undefined;

  change(asset) {
    asset.isEditing = false;

  assetsTrackBy(index: number, asset: Asset) {
    return asset.id;