 So in the demo file, so we have this information here last time, which I don't have to route yet. And I'm going to go and create a template. Well, let's see. I see what it looks like on the home page. On the home page, we have the home page. OK. Yeah, I'm just going to display the home page, OK? So we can kind of see what happens on the home page. So that means I'm going to use the demo as the child component. And I'm going to pass that data to the demo page component and then display it here on the parent component, OK? So really confusing, but my demo component here. I'm going to delete all of these here. And I don't need these. So I'm going to go and modify my component here a little bit. You know what? Now let's create another one. Yeah, I don't want to mess this up. Let's create another component for practice purposes, OK? So I'm going to go to terminal here. And let's create another component. And we're just going to load that to the root component. So nggccomponent. And let's call this, what should we call it? Let's see, what do we use here? I can't think of it, so I'm just going to call it child, OK? Just call it child. I did demo child, child A, OK? So, well, yeah, never mind. Sorry. That's child. We're not going to do that two-way binding. I mean, in communication, you can watch my video for that. But in this class, we're just going to do this child. So again, no test and no stout sheet, OK? So a very simple component. So here we go. So let me close everything here, just selecting and close everything. It's too many files. I just want the child component, TS, and the HTML first, OK? So in the child component, we're going to pass some data from the parent to this component. So here in the variable, I'm going to create a variable down here, a variable called, let's call it place, OK? And this is, if you were just creating a local variable like this, it would just say place is equal to something, right? Or city, maybe called city, right? City is equal to we're seen. And that is a variable and the child template component. And you will pass that over to the child template. So here you have to pass it over to the template over here. And I'll call this put here the city, right? And you've seen this before. This is really just a classic example. You pass data from a variable to the city here. And that's how it works, right? And then to see this in action, this has already been added to our add module. As you can see here, there it is, child component. And then we just need to open the root component, which is app component. And I'm going to add it right, maybe right above the route here, OK? So we can see this, the app-child tag. It's going to show above the title of that page. And we'll see it doesn't look, we'll put below it. But I want to see if it's still there. So here it is, as we're seeing. Yeah, let's put below it. It looks ugly here. Let's move this down, so the alt and arrow move up and down. So right below the router outlet, so that the home page will load here, but then we have the child tag here. And the content will be rendered right below it, OK? So notice my, this is the child components content, OK? I'm not navigating to the child page, all right? That's not how it works. You load the child content through the root component. So you see the content here. And you access or you interact with the child component through its tag, right? Through the tag, because it renders right in here, OK? And this is the child component. So when you render this here, we know this is the child component. And we pass data to this tag, same idea how you pass data to this div tag. Here we're passing data to the div tag. We don't know behind the scene. It actually passing data to the div tag. So the div tag is like a component. It is a component, HTML component. And the technical term we use is called element. So this is like an HTML element. How do I pass data to it? Well, it has some built-in component in HTML called class and arrow outlet and so on. We put it here as well. You could say, style, let's see, style. We just put it in border. Let's see if it works. 1px solid green, right? If I do that to this app child, you will see that it works just like regular HTML. It affects that because it's treated like an HTML element, even though it's an Angular element. So everything that is in the DOM is also accessible to this tag, even though it's not an HTML, legal HTML tag, OK? Because we have total control of this component, we can pass our own data to it, OK? So for the same token, this way, we're going to pass data. Remember, this is the parent component. We're going to pass some data to the child component. And the child component has a variable call place, city. But in order for this city to receive the data from the parent, you must decorate this with the add symbol followed by the input function. And you have a red screen line here. It tells you you must import this class or component or module in this case. So again, quick fix, right? If you mouse over that. And the quick fix here is to import the Angular core input. And so there it is. It adds the input here. I mean, input here, just like the component, and so on. So now we decorated this city with that variable. It must be the immediate variable, OK? If you put another one here, A is 1, then this will only decorate this A and not the city, right? So make sure it's decorating the 1 immediately below it. And if this is not convenient, you can also put on the same line like you see in my example. And that's why if it's a short variable, you put right in front of it, it looks like this. And I'm not restricting my variable to anything. In this case, it'll be a type string. If you want to be string, then you can put right after the city colon input string. And now this must be a string only, right? It cannot be a number or a Boolean or object or other type, OK? If you don't care, it could be anything that you put any here, because maybe you want to be dynamic, OK? So first, we're going to ignore that, and just put the default here, which is whatever it is. It's going to be string in this case. So as you can see, if I put the input here, city is recined. My application still works normally, no problem, just like normal. OK, so now we're going to change this data from another component, from the parent component. So over here, I'm going to pass this child to a variable called city. I need to bind to that city. It's a property binding that must exist in the child component called app child, OK? If you bind to that city, then you need to send that city variable to another value. And the value needs to come from the parent component. So here in the app component TS, this is the parent component. Let's say that I'm going to have a variable here called my city is equal to Milwaukee, OK? So I'm going to pass Milwaukee, my city, to the child component through here. This is my city, all right? And this will happen instantly because as you run, everything changes instantly. You're not going to see, you're seeing, and then suddenly Milwaukee. When you run it, you're going to see just Milwaukee, OK? So here I'm passed data from the child, I mean, from the parent to the child, to a city variable and the child component. To make this a little bit more exciting, you could do something like this. You can say right down here, you put a button, right? And you bind this button to a click event. And this click event is going to change the city to a variable name. So you can have a function called update my city. You call that empty function. And it will update city. So it's update city, parent city, OK? So we can see I'm out in the parent city. And to this city, I'm going to pass in a, just a name. I'll put here Kenosha. Usually you read that from a form or something, but I'm going to change that to Kenosha. So when I update this function, update my city function, right in the parent component right here, update my city. It takes a parameter. I should call it city here. And then I'm going to update this my city with this city, which is called Kenosha. And then it changes Kenosha. And in Milwaukee, we change Kenosha. And it's going to reflect on the child component. So here we go. Initially, we're seeing, but we change it to Milwaukee. When I update this, I'm going to change to Kenosha. See, I might change it right there instantly. But the processes are what I showed you in the diagram. It goes through that route. OK, so I'm passing data from the parent to the child. So you can see it changes in the child component. And I render that in the route component. I'm not navigating to the child, OK? I'm just using that as a tag. So that's one way data flow from the parent to the child.