如何从子组件检查dxTextBox是否为空？

<app-child></app-child>

<dx-text-box [(value)]="textBoxValue"></dx-text-box>

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

@Component({
  selector: 'app-child',
  template: `
    <dx-text-box [(value)]="textBoxValue"></dx-text-box>
    <button (click)="checkTextBoxValue()">Check</button>
  `
})
export class ChildComponent {
  textBoxValue: string;
  @Output() textBoxValueChanged = new EventEmitter<string>();

  checkTextBoxValue() {
    this.textBoxValueChanged.emit(this.textBoxValue);
  }
}

<app-child (textBoxValueChanged)="handleTextBoxValueChanged($event)"></app-child>

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child (textBoxValueChanged)="handleTextBoxValueChanged($event)"></app-child>
  `
})
export class ParentComponent {
  handleTextBoxValueChanged(value: string) {
    if (value === '') {
      console.log('dxTextBox is empty');
    } else {
      console.log('dxTextBox is not empty');
    }
  }
}