0

I have Observable with information about entity statuses. And I need to display information into the dialog window (angular material mat-dialog). The source for data is a web socket and I am not sure that all data is retrieved before the user opens the dialog window. In another word, I should update dialog window content based on observable.

So I need to way how to pass Observable value as an input parameter into mat dialog (i.e. as an async pipe for normal components inputs).

I know that is possible to do using dialogRef and manually updating data object, but it's a bit weird into reactive anguar world

RQman
  • 431
  • 1
  • 5
  • 20
  • 1
    What don't you use a service? – Vikas Jan 24 '22 at 10:19
  • @Vikas you mean completely do not inject `MAT_DIALOG_DATA` and use data service instead of it? – RQman Jan 24 '22 at 10:57
  • Yes, You can use leverage `ReplaySubject` https://www.learnrxjs.io/learn-rxjs/subjects/replaysubject see this too https://stackoverflow.com/questions/49387889/passing-data-with-subjects-and-proxies/49388249#49388249 – Vikas Jan 24 '22 at 11:48

1 Answers1

1

I created a very simple example for you where poller.service will recieve and store the data and then dialog component can subscribe to that data.

@Component({
  selector: 'confirmation-dialog',
  templateUrl: 'confirmation-dialog.html',
})
export class ConfirmationDialog {
  message: string = "Are you sure?"
  confirmButtonText = "Yes"
  cancelButtonText = "Cancel"
  dataSub: any;

  constructor(
    @Inject(MAT_DIALOG_DATA) private data: any,
    private pollerService: PollerService,
    private dialogRef: MatDialogRef<ConfirmationDialog>
  ) {

    this.dataSub = this.pollerService.data.subscribe((data: any) => this.message = data)


    if(data) {
      this.message = data.message || this.message;

      if (data.buttonText) {
        this.confirmButtonText = data.buttonText.ok || this.confirmButtonText;
        this.cancelButtonText = data.buttonText.cancel || this.cancelButtonText;
      }
    }
  }

  onConfirmClick(): void {
    this.dialogRef.close(true);
  }

}

@Injectable()
export class PollerService {

  data: BehaviorSubject<string> = new BehaviorSubject('123');
  array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
  constructor() { 

 
    for(var i = 0; i < this.array.length; i++) {
      this.delay(i)
    }
  }


  delay(i: number) {
    setTimeout(() => {
      console.log(this.array[i])
      this.data.next('I am some data changing ' + i)
    }, 1000 * i);
  }

}

https://stackblitz.com/edit/mat-dialog-example-yta2ir?file=app%2Fconfirmation-dialog.component.ts

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • first of all thank you for the nice example. So, the provided example is not matching requirements, as in case some new data will be sent from the back-end after the dialog was opened, they won't be displayed. See changed example: https://stackblitz.com/edit/mat-dialog-example-w6yr73 – RQman Jan 24 '22 at 11:29
  • 1
    Is this what you mean? https://stackblitz.com/edit/mat-dialog-example-yta2ir?file=app%2Fconfirmation-dialog.component.ts – Joosep Parts Jan 24 '22 at 14:51
  • yes, that exactly wanted behavior. – RQman Jan 24 '22 at 15:20