airplane-makes-edit.component.html

<form clrForm (ngSubmit)="onSubmit()" #airplaneMakeForm="ngForm">
  <clr-input-container>
    <label for="manufacturer">
      Manufacturer:
    </label>
    <input clrInput [(ngModel)]="model.manufacturer" type="text" name="manufacturer">
  </clr-input-container>
  <clr-input-container>
    <label for="make">
      Model:
    </label>
      <input clrInput [(ngModel)]="model.make" type="text" name="make">
  </clr-input-container>
  <clr-input-container>
    <label for="speed">Speed (km/h):</label>
    <input clrInput [(ngModel)]="model.speedInKmH" type="number" name="speed">
  </clr-input-container>

  <clr-input-container>
    <label for="range">Range (km): </label>
    <input clrInput [(ngModel)]="model.rangeInKm" type="number" name="range">
  </clr-input-container>

  <br>

  <button type="submit" class="btn btn-primary">Confirm</button>
</form>

airplane-makes.component.html

<div class="clr-row">

  <div class="clr-col">
    <app-selectable-list title="Whatever" [rows]="airplaneMakes" (select)="onSelect($event)">
      <ng-template let-manufacturer="manufacturer" let-model="model">
        <span>{{ manufacturer }} {{ model }}</span>
      </ng-template>
    </app-selectable-list>
  </div>

  <div class="clr-col">

    <div *ngIf="selected">
      <div *ngIf="editing; else details">
        <app-airplane-make-edit
          [initialValue]="selected"
          (someRandomName)="onSubmit($event)"
        ></app-airplane-make-edit>
      </div><form clrForm (ngSubmit)="onSubmit()" #airplaneMakeForm="ngForm">
  <clr-input-container>
    <label for="manufacturer">
      Manufacturer:
    </label>
    <input clrInput [(ngModel)]="model.manufacturer" type="text" name="manufacturer">
  </clr-input-container>
  <clr-input-container>
    <label for="make">
      Model:
    </label>
      <input clrInput [(ngModel)]="model.make" type="text" name="make">
  </clr-input-container>
  <clr-input-container>
    <label for="speed">Speed (km/h):</label>
    <input clrInput [(ngModel)]="model.speedInKmH" type="number" name="speed">
  </clr-input-container>

  <clr-input-container>
    <label for="range">Range (km): </label>
    <input clrInput [(ngModel)]="model.rangeInKm" type="number" name="range">
  </clr-input-container>

  <br>

  <button type="submit" class="btn btn-primary">Confirm</button>
</form>

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { AirplaneMake } from '@common/models/airplane-make.model';

@Component({
  selector: 'app-airplane-make-edit',
  templateUrl: './airplane-makes-edit.component.html'
})
export class AirplaneMakesEditComponent implements OnInit {

  @Input() initialValue: AirplaneMake;
  @Output() someRandomName = new EventEmitter<AirplaneMake>();

  model: AirplaneMake;

  ngOnInit() {
    this.model = {...this.initialValue};
  }

  onSubmit() {
    this.someRandomName.emit(this.model);
  }
}


      <ng-template #details>
          <p>Manufacturer: {{ selected.manufacturer }}</p>
          <p>Model: {{ selected.make }}</p>
          <p>Tiers: </p>
          <p>Range: {{ selected.rangeInKm }} km</p>
          <p>Speed: {{ selected.speedInKmH }} km/h</p>
          <button class="btn btn-sm btn-primary" (click)="editing = true">Edit</button>
      </ng-template>
    </div>
  </div>
</div>

airplane-makes.component.ts

import { Component, OnInit } from '@angular/core';
import { AirplaneMake } from '@models/airplane-make.model';
import { AirplaneMakeService } from '@common/services/airplane-make.service';

@Component({
  selector: 'app-airplane-makes',
  templateUrl: './airplane-makes.component.html',
})
export class AirplaneMakesComponent implements OnInit {

  airplaneMakes: AirplaneMake[] = [];
  selected: AirplaneMake;
  editing = false;

  constructor(
    private airplaneMakeService: AirplaneMakeService,
  ) { }

  ngOnInit() {
    this.airplaneMakeService.getAll().subscribe(
      airplaneMakes => {
        this.airplaneMakes = airplaneMakes;
      }
    );
  }

  onSelect(index: number) {
    console.log('Selected index:', index);
    this.editing = false;
    this.selected = this.airplaneMakes[index];
  }

  onSubmit(make: AirplaneMake) {
    console.log(make);
    if (this.editing) {
      this.airplaneMakeService.put(make.id.toString(), make);
    } else {
      this.airplaneMakeService.post(make);
    }
  }
}

airplane-makes.edit.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { AirplaneMake } from '@common/models/airplane-make.model';

@Component({
  selector: 'app-airplane-make-edit',
  templateUrl: './airplane-makes-edit.component.html'
})
export class AirplaneMakesEditComponent implements OnInit {

  @Input() initialValue: AirplaneMake;
  @Output() someRandomName = new EventEmitter<AirplaneMake>();

  model: AirplaneMake;

  ngOnInit() {
    this.model = {...this.initialValue};
  }

  onSubmit() {
    this.someRandomName.emit(this.model);
  }
}