Best practice for triggering grandparent event in Angular 2?

Viewed 77

So I'm seeing conflicting information on how to handle a relatively straightforward scenario. Let's say I have a component that is a list of store products - where each product is its own component (ts/scss/html).

On each individual product is a "Edit Details" button that triggers a modal pop-up that is unique to that specific type of product.

When the user finishes editing the product details, I want the modal to close and then manually refresh the entire list.

The two options I've seen to accomplish this is to

  1. Bubble up the event twice, from modal (child) to product (parent) then from product to list manager (grandparent); which seems really poor in design

  2. Share a service between the child/grandparent aka the modal and the list manager.

And while I'm more inclined to option #2, it being the "Angular way", it just seems...weird that I should have the functionality of a list manager be included with a modal dialogue that doesn't care at all about the list. Is this really the "best" way to handle it?

0 Answers
Related