The relationship between the lightbox component and its child component?

Question

I have the following markup to display any component in a lightbox:

<lightbox> <some-comp></some-comp> </lightbox> 

I am trying to find a more general and Angular way for the interaction of both components (I read https://angular.io/guide/component-interaction ). For example, a child component might say lightbox:

• My content is great, so you need to expand it.
• I contain the form, and here is the data submitted through the form.
• Etc.

IMPORTANT. A lightbox does not know in advance what type of component it will hold.

I can make it work by introducing the service in both components, and the service contains a Subject , which serves as a communication bus between the two components (this solution is described in the documents ).

But is there any other way? I am developing a library of user interface components, and the solution for the service forces library users to implement and manage services in each component that they display in the lightbox. I would like to avoid this.

(Another idea I got is for a lightbox to access its child component and subscribe to a specific property of that component, but this is difficult to do in general.)

Answer 1

pass child to parent kernel explicitly

One way is to explicitly pass the child

  <parent [child]="child"> <child #child></child> </parent> 

Plunger example

provide service to parent

An alternative way is to provide the service to the parent and enter it into the child component.

Plunger example

It is better to use observables ( BehaviorSubject , ...) for communication instead of the simple field approach used in Plunker.

Conclusion

In any case, some kind of collaboration is required, be it a developer who uses a parent component, or a developer who creates supported child components.

Answer 2

Answering Gunter's answer, you can also watch NGRX .

This is one of the best ways to communicate between large components and both components, it will act like Dumb Components i: e will not have an idea of ​​what type of data will be stored.

Storing data in a central location will also help you manage the state of the application well, which will lead to greater flexibility and the possibility of adding future improvements.

I have a full ngrx (v4) page, hope it helps link