Best practice for triggering a grandparent event in Angular 2?

So, I see conflicting information on how to handle a relatively simple scenario. Say I have a component that is a list of store products, where each product is its own component (ts / scss / html).

In each individual product there is a “Change Details” button that launches a modal pop-up window unique to this type of product.

When the user finishes editing the product details, I want the modal function to be closed, and then manually update the entire list.

The two options I've seen for this are

  • Repeat the event twice, from the modal (child) to the product (parent), then from the product to the list manager (grandparent); which seems really bad in design

  • Share the service between your grandparents, as well as the modal and list manager.

And although I am more inclined towards option # 2, this is the “Angular way”, it just seems ... strange that I have to include the functionality of the list manager in a modal dialog that does not work Don't worry about the list. Is this really the best way to handle this?

+4
source share

Source: https://habr.com/ru/post/1686838/