Pass data between components in Angular. Call functions on a parent component from a child component, and access class members on a child component from a parent component.
- [Instructor] Let's begin by updating our web service in Angular to include a post function. So let's open up our web.service.ts file and let's add a new function below our get Messages called postMessage, and it will take in a message object. Inside our new function, let's copy and paste the http get from the get Messages function above.
We'll first need to change it to post instead of .get, and we'll need to pass in our object as a second parameter. Notice that we have nearly duplicate values in our URLs. Let's consolidate those into a base URL variable, and we'll update both calls accordingly. So above the constructor, I'll create a new variable called BASE_URL, all in uppercase, and I'll set it to our base URL, which I'll copy from one of the URLs we have in either getMessage or postMessage.
So I'll take out the portion that I copied from both URLs, and then I'll append BASE_URL to the front of both http.get and http.post calls, and then I'll combine both strings to give us our final URL. Now we can call our web service post function in our new message component's post function. So let's open up that new message component.
And since we already have reference to web service, we can replace our console log with this.webService.postMessage. So let's pass that message object in to the post message parameter. And let's give that a try. Let's populate our new message post, and then let's hit Post. Inside our network tab, we can see that the message did go through, with a status code of 200, Okay.
So now, if we refresh our page, we should see the new message. And so it seems to be working, but wouldn't it be nice if it would show up without us having to refresh the page? This could be done by using an event to let our message component form know that the new message component just posted a message. Let's take a look at some other options inside Visual Studio code. We could also expose the messages array from our messages component into the parent component, and have the parent component listen for a new message event in the new message component.
So if we open up our app component, which is the parent component, since it has both new message and messages as two child components, it could listen for a new post event from new messages and then update the array inside messages with that change. Let's look at how to do that now, by working with Angular outputs, and something called ViewChild. We will need to import output and event emitter from Angular core.
So let's go over to our new message components and import those. Next, let's create an output property called onPosted. We'll do that above the constructor inside our new message component. And we'll set it to a new EventEmitter.
Next, in the parent component, which would be app component, let's create our onPosted function that will take the message. And this would be the new message that was just posted in the new message event. As a test, let's just console.log the message and we'll need to get it in as a parameter, as well. Then let's bind our new function to the event handler inside the template.
Similar to how we used Click with our button. And we will pass in the event payload, which is $event. Now we just have to call the event when a new message is posted inside our new message component. So in our post function, below our web service call, let's call this.onPosted.emit, to emit the event, and we'll pass in the message.
If we test this out now, we should see the message in the console. And there it is. So we know our new post message event is working. Now, let us use a ViewChild decorator to push our data from the parent component to the messages component message array. And so that it will then show up inside our messages component. Let's go to our app component and import ViewChild from Angular core.
And then let's create a new property with the ViewChild decorator. So I'll do that in the app component class at the top. Then, we will just need to be specifying the component we will be accessing as a parameter in the decorator, which in this case, will be our messages component. Now we can access the messages list through the component reference, and push our new message.
So inside our new onPosted function, I'll use this.messages, and in order to get some intellisense, I can specify the type here and we'll access the messages array, and we'll push the new message. Let's test it out. As you can see, the new message is now showing up instantly in our message list.
This is just one way to achieve this behavior. A better way would be through our service, so let's look at how to do that next.
- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.