3 Ways to Pass Async Data to Angular + Child Components

Jecelyn Yeen
Jan 6, 2017 · 3 min read

For Angularjs or Angular 1.x posts, it will be stated 1.x explicitly, else it’s always the latest version of Angular.

Use Case

Let’ say 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:

blogger component

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.

However, because the data is coming from server, when the blogger component passes the 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? Please read further in my Scotch post.

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!

HackerNoon.com

how hackers start their afternoons.

Jecelyn Yeen

Written by

Coder. Diver. Speak English, Mandarin, Javascript, C# and more.

HackerNoon.com

how hackers start their afternoons.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade