Use the async pipe to display async data in our template.
- [Narrator] In this lesson, we'll add some safety to our message subject by not exposing it as a public variable. Inside our web service, let's make messageSubject private. Then let's create a public messages variable. But first I'll need to rename our initial messages variable to messageStore. So now I can create a new public messages variable and set that to this.messageSubject.asObservable.
And that creates an observable out of the message subject. And so now components no longer can call .next on the subject since subject is no longer exposed. Now let's go back to our message component, and as you can see we can no longer subscribe to the message subject but we can to messages. Let's give this a try to make sure everything still working. And the refact worked. The final optimization we can do is introduce the AsyncPipe which will allow us to access our data directly in our HTML ngFor without having to create the subscribe in the component.
So first let's get rid of the subscribe entirely, so back in our message component, we'll get rid of our subscribe between line 25 and 27. Next inside the template let's look at our ngFor. Let's access our messages observable through web service. And next I'll add a vertical line which will indicate that I'll be using a pipe and I'll supply the async pipe if you're not familiar with Angular pipes, a pipe takes in data as input and transforms it to a desired output so we could use it to format money or time but in this case, we're using it for asynchronous code and to get our response data from the observable.
Now let's test our app as you can see the refactor worked and our component looks a lot cleaner since we no longer need to subscribe, we also don't need this message variable any longer so let's take that out. Finally, let's update our postMessage function in the web service and we'll do this so that it updates the messages observable as well. Let's scroll down to our postMessage inside our web service and we can simply call messageSubject.next.
So let's go below line 34 and we'll add this.messageSubject.next and we can pass in the messageStore and the messageStore will be updated in the previous line and so it will contain the new message. So now our postMessage will also broadcast that change or the new message it receives in the response.
And then our async pipe will automatically see that change and update the for loop. This actually isn't the required step for this specific situation since the value broadcast through the message subject at first is the array. Therefore it is pointing to that array and any changes to that array such as pushing or adding new messages to the message array will be shown in the view as a result. In other words, we're not actually broadcasting the new message but instead we're broadcasting the messageStore and in both cases it points to our messageStore inside our web service class.
So we're not using it to get a new value such as our new message but we are using it in order to get the postMessage event as its being broadcasted. But in the case where the value being broadcasted wasn't the memory address, it would be useful or on the case where second observers subscribes after the first value is broadcasted they would need to know of any new message posts, so we would have to call messageSubject.next as we are now. So let's give that a try and make sure everything still works.
So we're getting our messages, and let's try posting a new message. And it's still working. So we are able to create the new post with a name but it would be much better if we could get the username from some sort of account, so let's look into authentication next.
- Setting up the app infrastructure
- Creating and configuring the Angular 2 project
- Displaying data in Angular
- Refining the layout
- Creating the ASP.NET Core project
- Creating a controller with ASP.NET Core
- Creating a nav bar
- Registering users
- Authorizing resources
Skill Level Intermediate
Q: This course was updated on 10/18/2017. What changed?
A: The following topics were updated: setting up the app infrastructure, displaying data in Angular 2, getting data from ASP.NET Core, creating a controller with ASP.NET Core, and authorizing resources.