Эмиттер событий не работает после использования подписки

Question

У меня есть диалоговое окно, в котором есть кнопка, при нажатии которой я должен отправить данные родителю, а оттуда - родителю родителя. Я получаю данные в родительском элементе, но не могу передать их компоненту верхнего уровня.

мой компонент диалога ts:

onClickOfButton(){
    this.buttonClicked.emit(this.data)
    }

мой родительский компонент ts:

@Output() dataPreviewReceived = new EventEmitter<any>();
    
this.dialogRef = this.openDialog(dataOptions);

this.dialogRef.componentInstance.buttonClicked.subscribe((value)=>{
            this.dataPreviewReceived.emit(value)
        })

мой компонент верхнего уровня html:

<app-parent (dataPreviewReceived)="onDataReception($event)">
    </app-parent>

мой компонент верхнего уровня ts:

onDataReception(data){
    console.log("received data",data)
}

Но я не могу отправить на верхний уровень из внутри функции .subscribe. Если я использую тот же эмиттер снаружи через какую-то другую функцию, он испускается. Что я делаю не так? Это правильный способ сделать это? Заранее спасибо!