<sky-inline-form
  [config]="inlineFormConfig"
  [showForm]="showForm"
  [template]="inlineFormTemplate"
  (close)="onInlineFormClose($event)"
>
  <table>
    <tr>
      <th>First name:</th>
      <td>
        {{ firstName }}
      </td>
      <td>
        <button
          aria-label="Edit"
          class="sky-btn sky-btn-icon-borderless"
          type="button"
          (click)="onInlineFormOpen()"
        >
          <sky-icon icon="edit" />
        </button>
      </td>
    </tr>
  </table>
</sky-inline-form>

<ng-template #inlineFormTemplate>
  <form [formGroup]="formGroup">
    <sky-input-box labelText="First name">
      <input formControlName="firstName" type="text" />
    </sky-input-box>
  </form>
</ng-template>
