Bind async requests in your Angular template with the async pipe and the "as" keyword

[00:00] I have here a person component which I called here person detail. Here we have a person JSON file with some data in it. That very same JSON file gets exposed by a web server on this URL which we will use later to fetch that person.

[00:17] The goal is basically to show that person inside that component. As a first stop, what we obviously need to do is to import the HTTP provider from the add Angular HTTP package. We also need to register the HTTP module which I did however already, so we can avoid that.

[00:36] Next, we also need our RXJ operator, specifically the map operator. Great. Whenever a component loads, I want to fetch the data. Here we need to inject first the HTTP provider again, so that we have it here available in our component.

[00:55] Then within the NG on init, we can do something like this.HTTP and then let's issue here a get request. Let's quickly copy that URL out here, and place it inside here. Next, we need to map the response basically to JSON. Great.

[01:17] The next step, what we could do is to directly subscribe to that observable here to get the data and to do something like this.person=data, and then bind a personal template. But in Angular there is a more elegant way of doing it.

[01:35] What we should do here, let's create a diff. We could use direct async pipe for doing that. Here I register a variable which I will use to store my own observable. Therefore, also the dollar suffix here, to observe basically that it comes from my HTTP service.

[01:56] I can directly assign here the result to that local variable and now use the async pipe to bind it in my template. Let's try that. Use the async pipe as said again, and then we pipe it through to the JSON pipe to see some data being printed out on our site.

[02:15] Notice we cannot directly mine this to the JSON pipe here, because this is an observable and there has to be a result first. Therefore, we need something like the async pipe that does the subscription for us. Only once the result comes back from the server, it pipes it through to the JSON pipe.

[02:34] Now, the more real example that we would probably want to do, is to print out a different kind of data. We would like to print out, for instance, the person. What we have to do then is to use the async pipe, and use here the person name.

[02:48] Now, since this isn't resolved initially, we also need to add here an operator that only continues to do invoked name once that person observable results. Otherwise, we would get here another reference exception, because this initially will return null.

[03:04] Similarly, we could do that also for trigger handle, for instance, which is simply copy and paste here. Let's add some BR here. Let's cut this out. Now as you can see, the data gets recognized on our website.

[03:22] There is one drawback, however. If you take a look here, what we do is actually we use two types of async pipe which will result in two subscriptions to that observable. In fact, if we open up the narrow panel here, we can see if we refresh and filter for the person request, we see two requests are being made to the back end.

[03:45] This obviously isn't the format at all, and should be avoided. There are different kinds of strategies for avoiding that, so we could share this observable such that it gets shared among these subscriptions. Or, what we could do is to use the as keyword which has been introduced in Angular 4.

[04:03] Let's add for instance here, an NGF and take our observable here. We'll solve it direct in that NGF. We basically tell here, only once that is resolved open up that diff and enter in here, and render it.

[04:23] We also need to store the results somehow in a variable. We can do that with that as keyword. Let's store it in a variable called person. Now below here, we can basically remove this suffix here because it's no more an observable but simply a local template variable inside here. Let's save it again.

[04:46] Now you can see also in the network panel we only get one request that is being issued to the server.