hero-detail.component.html

<div *ngIf="hero">
  <h2>{{ hero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{ hero.id }}</div>
  <div>
    <label>name: <input [(ngModel)]="hero.name" placeholder="name" /> </label>
  </div>
  <button (click)="goBackClicked()">go back</button>
  <button (click)="saveClicked()">save</button>
</div>

hero-detail.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Hero }         from '../hero';

@Component({
  selector: 'app-hero-detail-ui',
  templateUrl: './hero-detail.component.html',
  styleUrls: [ './hero-detail.component.css' ]
})
export class HeroDetailComponent {
  @Input() hero: Hero;
  @Output() goBack= new EventEmitter();
  @Output() save= new EventEmitter<Hero>();

  goBackClicked(): void {
    this.goBack.emit();
  }

 saveClicked(): void {
   this.save.emit(this.hero);
  }
}