import { Component } from '@angular/core';

export class Hero{
  id:number;
  name:string;
}
@Component({
  selector: 'my-app',
  template:`
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div>
    <label>name: </label>
    <input value = "{{hero.name}}"placeholder = "name">
  <div>
  `
})
export class AppComponent {

  title = 'Tour of heroes';
  hero: Hero = {
    id: 1,
    name:'Spiderman' };
 }

import { Component } from '@angular/core';

export class Hero{
  id:number;
  name:string;
}
@Component({
  selector: 'my-app',
  template:`
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)] = "hero.name"placeholder = "name">
  <div>
  `
})
export class AppComponent {

  title = 'Tour of heroes';
  hero: Hero = {
    id: 1,
    name:'Spiderman' };
 }

Add ngModel - inbuilt for Two way data binding
Add ngModel - inbuilt for Two way data binding
