[AngularForm]ngModelandngModelChange

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

import { Passenger } from '../../models/passenger.interface';

@Component({
  selector: 'passenger-form',
  styleUrls: ['passenger-form.component.scss'],
  template: `
    "ngForm" novalidate>
      {{ detail | json }}
      

        Passenger name:
        <input
          type="text"
          name="fullname"
          [ngModel]="detail?.fullname">
      
      

        Passenger ID:
        <input
          type="number"
          name="id"
          [ngModel]="detail?.id">
      
      

        
          <input 
            type="radio"
            [value]="true"
            name="checkedIn"
            [ngModel]="detail?.checkedIn"
            (ngModelChange)="toggleCheckIn($event)">
          Yes
        
        
          <input 
            type="radio"
            [value]="false"
            name="checkedIn"
            [ngModel]="detail?.checkedIn"
            (ngModelChange)="toggleCheckIn($event)">
          No
        
      
      
"form.value.checkedIn">
        Check in date:
        <input 
          type="number"
          name="checkInDate"
          [ngModel]="detail?.checkInDate">
      

      {{ form.value | json }}
    
  `
})
export class PassengerFormComponent {
  @Input()
  detail: Passenger;
  toggleCheckIn(checkedIn: boolean) {
    if (checkedIn) {
      this.detail.checkInDate = Date.now();
    }
  }
}