1

How can I pass asynchronous data from a parent controller to a child component? I am using angular 1.5.0 in order to create a child component that I would like to reuse in other views/controllers. I want to make the server calls in a parent controller/component and use the returned data in the child component, maybe modify it using a function. If I want my component to be truly reusable, then I don't want to have to put any code into my parent controller to direct the data.

In theory, I should be able to instantiate the component in the parent controller view, pass in the asynchronous data, and be able to use it in a function in the component when the data is returned.

I encountered this exact same problem with Angular 2. Am I not supposed to pass asynchronous data to components? If I want to do something with asynchronous data, do I always have to call for it in the component? This seems to be a huge flaw if someone needs to view the data in multiple ways and wants to use it in multiple components... This has been bugging me for days, and years if you count the Angular 2 issues. Any explanation or reasoning would be appreciated. Thank you in advance.

Tom
  • 21
  • 3
  • Use services as these are singletons. You can store the returned data or, better yet, the created promise from each operation. First controller to call some method on the service method creates the promise and subsequent calls subscribe to the same promise. – Igor Mar 09 '18 at 22:02
  • 1
    Possible duplicate of [Share data between AngularJS controllers](https://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers) – Igor Mar 09 '18 at 22:04
  • 1
    Thank you, I guess that is what I'm going to have to do. I inherited this application, so they wrote everything in very large controllers that make service calls and do all the functionality. I wanted to break that up with components so that the controller could get the data, and then if I wanted to I can add a component that could display the data in a certain way just by passing it. Therefore, I'd write the component once and then the only connection I would have to make is through the controller's template HTML. If I can't do that, is it even worth me trying to compartmentalize things? – Tom Mar 11 '18 at 14:01
  • 1
    You can do that, you can also pass data from a parent to a child component directly (*no services necessary*). See the [component documentation](https://docs.angularjs.org/guide/component) for more details. It is usually worth it to break apart massive code entities into more manageable smaller ones unless you are 100% certain that the code will never be touched again in the future (so no bug fixes and added functionality), in that case there is no need to touch it. – Igor Mar 12 '18 at 11:39
  • 1
    See that's What I was trying to do, but it only works for scoped objects because the place a $watch automatically. I found this article https://www.bersling.com/2016/09/10/wait-for-the-bindings-of-a-directive-in-angular/ which I think is what I was looking for, I have implemented it and it looks to be working the way I want it. I agree with the author when he cannot understand why this wasn't part of the build in the first place, almost everything we do is asynchronous, and we should be able to pass bindings asynchronously...Thank you for the assistance! – Tom Mar 14 '18 at 16:55

1 Answers1

1

Here is an article which instructs to embed a component within a component so that you can start watching a binding. It is a very round about way of doing things, but it seems to do the job. It just seems ludicrous this functionality was not already anticipated when they created components, most data used in general is asynchronous, and it would be nice to have components that only deal with taking in the data, massaging it, and displaying it; without having to make it's own service calls. What if you have a few components that display the same data and you wish to embed them all in a controller's view that does the work of getting and updating the data and then passing it to those components? This seems like a likely scenario, and one I often encounter. So here is the article:

https://www.bersling.com/2016/09/10/wait-for-the-bindings-of-a-directive-in-angular/

It functions even though the code is not as pretty as wished, and I don't know the repercussions of this particular implementation, but it works. If I am overlooking an unforeseen issue, or if there is a better way, I am open to suggestions. Thank you.

Tom
  • 21
  • 3
  • "_I want to make the server calls in a parent controller/component and use the returned data in the child component, maybe modify it using a function._ " This is what I want to do, make ONE api call and be able to use the response in the child so that I don't have to make a separate call in the child. Being new to using angularjs, I'm not finding a specific answer to this from google. I have read several articles, but my child element is a material ui modal. – Chris22 Oct 04 '19 at 16:54