1

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

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

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

  • My content is large so you need to expand.
  • I contain a form and here is the data submitted via the form.
  • Etc.

IMPORTANT. The lightbox doesn't know in advance which type of component it will hold.

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

But is there another way? I am developing a UI component library and the service solution forces the users of the library to inject and manipulate a service in every component they display in the lightbox. I'd like to avoid that.

(Another idea that I had was for the lightbox to gain access to its child component and subscribe to a specific property on that component, but it's hard to do in a generic manner.)

Improve this question
3
  • angular.io/guide/component-interaction Commented Sep 2, 2017 at 14:51
  • @Jota.Toledo: I'm well aware of the documentation... It doesn't offer a generic solution, other than injecting a service like I mentioned. Commented Sep 2, 2017 at 14:53
  • I guess you could use ng-content + directives in someway so that you can "promise" through the directive some behavior from the component inside of lightbox, something like: github.com/Teradata/covalent/blob/develop/src/platform/core/… but I dont have experience in that sense :( Commented Sep 2, 2017 at 14:58

2 Answers 2

Reset to default
1

pass child to parent explicitly

One way would be to pass the child explicitly

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

Plunker example

provide a service on the parent

An alternative way is to provide a service on the parent, and inject it in the child component.

Plunker example

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

conclusion

In every way, there is some cooperation required, either from the developer who uses the parent component, or the developer who builds supported child components.

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

2 Comments

Thanks for clarifying. I believe those are the same techniques as listed here: angular.io/guide/component-interaction. I was hoping for something a bit more "magical" (from the user's point of view) but you're right, some explicit cooperation is needed.
That's because that's the docs about this topic ;-) I think the first approach isn't mentioned explicitly though. I'm also not sure if it is mentioned that a projected child can inject a service from the parent node (instead of the host component). I just wanted to highlight this options for this specific use case.
-1

Taking Forward Gunter's answer you can also look at NGRX.

It's one of the best ways to communicate between large components and both the components will acts like Dumb Components i:e will not have any idea of the type of data each will hold.

Keeping the data at a central location will also help you manage state of the application well which will lead to better flexibility and ability to add future enhancements.

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

Improve this answer

2 Comments

@Jota.Toledo but not using ngrx. Shared services and ngrx is different i guess.
Thanks Ryan thought off but i wanted Everything as angular bases so created a comment section 2 in Angular :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.