Angular 2+ ngOnChanges conflicts with eventEmitter

Question

I have 2 components in the same parents. When I click a button onSubmit() in component 1, it will emit an event submittedPayment to parents who store the event into processingPayment then component 2 will receive this event via parents. However, component 2 has a function of ngOnChanges which conflicts with received event emitting. When I click onSubmit() the console shows error "Cannot read property 'currentValue' of undefined" in ngOnChanges function. If I remove this event emitting directive [disabledCancelBtn]="processingPayment", code works fine but component 2 receives no event from that click action.

Here is my code:

Component 1:

export class Component1 implements OnInit {

  @Input() openTransaction = <Transaction>{};
  @Output() submittedPayment = new EventEmitter<boolean>();

  submitted: boolean = false;
  disabledSubmitButton: boolean = false;  

  constructor() {}  

  onSubmit(formValues: any) {
    this.submitted = true;
    this.disabledSubmitButton = true;
    this.submittedPayment.emit(true);
    console.log(formValues);
  }

  ngOnInit() {}
} 

Component 2:

export class Component2 implements OnInit, OnChanges {

  @Input() openTransaction = <Models.Transaction>{};
  @Input() disabledCancelBtn: boolean = false;
  @Output() onUpdateTransaction = new EventEmitter<Models.Transaction>();
  editableBtc: any;
  editableUsd: any;
  editingBtc: boolean = false;
  editingUsd: boolean = false;
  cancelling: boolean = false;

  constructor(
    public timerService: RateTimerService,
    @Inject(PLATFORM_ID) private platformId: Object
  ) { }

  ngOnInit() { }

  ngOnChanges(changes: SimpleChanges) {
    if (isPlatformBrowser(this.platformId)) {
      if (changes.openTransaction.currentValue !== undefined) { // ERROR HERE 
        this.editableBtc = this.openTransaction.btcAmount;
        this.editableUsd = this.openTransaction.total;

        const timeLeft = moment.utc(this.openTransaction.validUntil).diff(moment.utc(Date.now()), 'seconds');
        this.timerService.startRestart(timeLeft);
      }
    }
  }
}

Parents component:

export class ParentsComponent implements OnInit {

  openTransaction: Models.Transaction;

  processingPayment: boolean = false;

  constructor(private apiService: ApiService,
    @Inject(PLATFORM_ID) private platformId: Object) {
  }

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.apiService.openTransactions()
        .subscribe(
        (pending: Models.Transaction[]) => {
          this.openTransaction = pending[0];
        },
        (err) => console.log('Error fetching Pending transactions: ', err));
    }
  }
}

Parents view:

<div class="col-sm-12 col-md-6 payment-section">
      <app-component1  [openTransaction]="openTransaction"
                            (submittedPayment)="processingPayment = $event">
      </app-component1>
    </div>

    <div class="col-sm-12 col-md-6 summary-section">
      <app-component2 [disabledCancelBtn]="processingPayment"
                      [openTransaction]="openTransaction">
      </app-component2>
    </div>

Answer 1

The changes parameter contains the changed properties. So when only processingPayment property changes you can't expect changes.openTransaction to be defined.