3 Ways to Pass Async Data to Angular 2+ Child Components

  • If someone change the posts: Post[] property in the blogger component to posts: Post[] = [] , that means our grouping logic will be triggered once with empty array.
  • Instead of writing the logic of displaying the posts in the blogger component, you want to reuse the posts component that is created by your teammate, what you need to do is pass it the posts data.
  • Because the posts data is coming from server, when the blogger component passes the posts data to posts component, the posts component ngOnInit is already fired before the data get updated.
  • You might think that we should run the post grouping logic during ngOnInit of the posts component.
  • We will bind the post component only if the posts variable has a value .

Let’s start with a common use case. You have some data you get from external source (e.g. by calling API). You want to display…

@mattpodwysocki: Great post by @JecelynYeen on passing async data to @angularjs and child components. Nice use of BehaviorSubject too

Let’s start with a common use case. You have some data you get from external source (e.g. by calling API). You want to display it on screen.

However, instead of displaying it on the same component, you would like to pass the data to a child component to display.

The child component might has some logic to pre-process the data before showing on screen.

For example, you have a blogger component that will display blogger details and her posts. Blogger component will gets the list of posts from API.

Instead of writing the logic of displaying the posts in the blogger component, you want to reuse the posts component that is created by your teammate, what you need to do is pass it the posts data.

The posts component will then group the posts by category and display accordingly, like this:

Isn’t That Easy?

It might look easy at the first glance. Most of the time we will initiate all the process during our component initialization time – during ngOnInit life cycle hook (refer here for more details on component life cycle hook).

In our case, you might think that we should run the post grouping logic during ngOnInit of the posts component.

data to posts component, the posts component ngOnInit is already fired before the data get updated. Your post grouping logic will not be fired.

How can we solve this? Let’s code!

Let’s start with interfaces.

Let’s take a look at our blogger component.

to posts component in our view template.

Please take note that, usually we will perform HTTP call in service. However, since it’s not the focus of this tutorial (to shorten the tutorial), we will do that it in the same component.

Next, let’s code out posts component.

which will receive the posts data from parent component. In our case, blogger component will provide that.

just yet.

function is our core logic to group the posts by category. After the grouping, we will loop the result and display the grouped posts in our template.

Save and run it. You will see a pretty empty page with the blogger name only. That’s because we have not code our solution yet.

Our blogger component:

Our posts component.

A few things to note:

is a lifecycle hook that run whenever it detects changes to input properties. That means it’s guaranteed that everytime data input value changed, our grouping logic will be triggered if we put our code here.

Please revert all the changes in previous solution

anymore.

, you may want to make sure that the logic run only when the target data changed, because you might have a few inputs.

to something else, we need to remember to change this as well.

Of course we can defined another interface for that, but that’s too much work.

to detect the changes. I suggest you take a look at the unit test of the official document here before we continue.

abilities, plus an extra feature; you can subscribe to it. So whenever there are changes on the property, we will be notified, and we can act on that. In our case, it would be triggering the grouping logic.

Please revert all the changes in previous solution

There are no changes in our blogger component:

to hold the latest value.

, as simple as that.

, listen to the changes, and call our grouping logic whenever changes happens.

to unsubscribe itself once it meet certain criteria.

has value. We can add this line in our subscription to achieve that.

, but that’s beyond this topic.

, we get strong typing, get to control and listen to changes. The only downside would be you need to write more code.

The famous question comes with the famous answer: It depends.

if you want to listen to changes continuously or you want guarantee.

That’s it. Happy Coding!

3 Ways to Pass Async Data to Angular 2+ Child Components