How to pass input to a modal dialog in Angular?

Question

I have a main component UserProfileComponent with a list of items. Attached to this component is a HostListener for the navigation keys on my keyboard to navigate through the list.

While an item in this list is selected, I can open a modal dialog that displays more information about this entry.

THe HostListener from the main component still works while the modal dialog is open and I can navigate through the list in the background. Is there a way to pass the new elements to the already opened modal dialog?

Currently I just pass the items at the beginning, so there is no sync like it would be with a typical Input.

let dialogRef = dialog.open(UserProfileComponent, {
  item: item, <--- item might change after the modal dialog is open
});

Kunal Karmakar · Accepted Answer · 2021-11-04 05:21:06Z

0

Seems like a good scenario where you can use a BehaviorSubject. Initialize it first with some value:

item = new BehaviorSubject<string>('default string');

Now, while invoking the modal dialog:

let dialogRef = dialog.open(UserProfileComponent, {
    item: item.asObservable(), <--- subscribe to this in the dialog
});

Now, whenever you want a new value to be passed in your dialog:

item.next('new string');

Since the dialog component is subscribed to the observable, the new value will get passed.

answered Nov 4, 2021 at 5:21

Kunal Karmakar

5917 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass input to a modal dialog in Angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related