Issue with data communication between a modal child component and a parent component using Output in Angular - Stack Overflow

admin管理员组

文章数量:1399995

I'm having trouble managing data communication between a parent component and a modal child component in an Angular application. The parent component opens a modal (child component), and after an event (such as scanning a barcode), I need to send the data (the barcode) back to the parent component.

I'm using an EventEmitter to emit this data from the child component to the parent.

However, when I try to emit the data, the parent doesn't receive the expected data. Instead, I get undefined.

• The parent component calls this.dialogService.showModal() to display the modal.
• The child modal component processes the barcode scan and emits the data using EventEmitter.
• The parent component listens for this emitted event, but the result is always undefined.

Function on parent component:

public async startScan(): Promise<void> {
  const modal = await this.dialogService.showModal({
    component: ScannerComponent,
    cssClass: 'barcode-scanning-modal',
    showBackdrop: false,
    componentProps: {
      pushData: new EventEmitter<Barcode>()
    },
  });
}

child component:

pushData = output<Barcode>();

private processDetectedBarcode(barcode: Barcode): void {
  this.playBeepSound();
  this.pushData.emit(barcode);
}

I'm having trouble managing data communication between a parent component and a modal child component in an Angular application. The parent component opens a modal (child component), and after an event (such as scanning a barcode), I need to send the data (the barcode) back to the parent component.

I'm using an EventEmitter to emit this data from the child component to the parent.

However, when I try to emit the data, the parent doesn't receive the expected data. Instead, I get undefined.

• The parent component calls this.dialogService.showModal() to display the modal.
• The child modal component processes the barcode scan and emits the data using EventEmitter.
• The parent component listens for this emitted event, but the result is always undefined.

Function on parent component:

public async startScan(): Promise<void> {
  const modal = await this.dialogService.showModal({
    component: ScannerComponent,
    cssClass: 'barcode-scanning-modal',
    showBackdrop: false,
    componentProps: {
      pushData: new EventEmitter<Barcode>()
    },
  });
}

child component:

pushData = output<Barcode>();

private processDetectedBarcode(barcode: Barcode): void {
  this.playBeepSound();
  this.pushData.emit(barcode);
}

• angular
• modal-dialog
• parent-child
• eventemitter
• data-communication

Share Improve this question Follow edited 2 days ago Chait 1,36122 gold badges2222 silver badges3737 bronze badges asked Mar 26 at 16:49 Hardy RakotoHardy Rakoto 1122 bronze badges 1

• what ui library are you using please share more code, like imports and the dialog TS code – Naren Murali Commented Mar 26 at 16:54

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Pass an eventEmitter as an property of componentProps inside the object(2nd parameter) of open method.

  emitter: EventEmitter<Barcode> = new EventEmitter<Barcode>();

  public async startScan(): Promise<void> {
    const modal = await this.dialogService.showModal({
      component: ScannerComponent,
      cssClass: 'barcode-scanning-modal',
      showBackdrop: false,
      componentProps: {
        pushData: this.emitter
      },
    });
  }

Then we can read this on the child using @Input or input.

pushData = input<EventEmitter<Barcode>>();
private processDetectedBarcode(barcode: Barcode): void {
  this.playBeepSound();
  this.pushData().emit(barcode);
}

本文标签：