 Now the next thing is I want to flow data from the child to the parent Okay, so right here We have city Coming from the parent this time. I want to pass some data from the child up to the parent And so do that you would use a output Type function and I'm gonna call this maybe a population Find to a new event emitter Okay, and there are two types here. You can see so you have to make sure you get the correct one and This one here will be I don't remember which one but one of these is not the right one Okay, let's see if it's the right one or not. Can you even emitter? I think this is the one Okay, must make sure it is from the core There's a different one as well That takes the other one And it's another type We'll see if it's the right one and then this is going to take a type of I did not specify string Cities is string see put string. I mean publishes number. So you put number here Just to make sure it must be number only and Are you invoke that constructor? Okay, there's a constructor every time you see the word new This is a constructor an instantiating object population object all type event emitter, okay, so now I'm going to Create a Function so I can pass this data To the parent and so we see an action so I'm gonna put here a function to say I Update Population I'm going to pass n to this function a and number collect n And I'm gonna say this dot population that emit that emit n to Always being passed to okay this n comes from the a function in the in the button somewhere or You know and a Or if you do data binding you can bind it to a Input right that screw is simple one so in my child component HTML over here, I'm going to create a button and This will be Update Child population So we know it's coming from the child in that one parent We're going to bind this one to a function click event It's going to bind to the update What do you call? Update population that pass this function just a number I put a thousand here, okay, and usually again you'll be from the form but Well, I guess if you put a form right here in the foot form and we'll bind this to a data call pop and Then the value will be equal to where it is. Well, you don't care about a value Okay, and you're going to pass in here population right From this variable to this function and you whatever you put here it will be passed to this function and then the function is going to Pass that to the population and it's going to emit that to as an output Somewhere to the parent component out here And so right here we're going to do something as well we put here at the bottom Let's put a HR so you can see it different here. This is the child be component. I mean added the child component for another Yeah, for another variable here to show the data coming from the child, okay So it's gonna put right here P tag population We'll put here we'll bind that to a variable call Population and this population is from the from the parent And this is just a regular binding for a parent. So I'm going to go to the parent add components Create a variable call population. I'm going to put here just you know 10 Okay, initially it's going to be just 10 right so 10 goes in here and displays 10 here And see if an action, let's see what it looks like Right, so I know it's kind of undo here, but you see that here's a polish in 10 so when I click Update child population it changes to Kenosha Because I have some errors. I mean city here, right Kenosha and then what update population it's going to change this to a thousand Because this one here is part of the child component. This is the parent, right? I show a different color here. You can see You will do that. So again, I put here style Of course some something here's a border One I should have kept that being and then also put here patting Maybe 20 px so you can see the difference between so here it is That's a margin to your margin 10 px All right, so there should be plenty of space So we go. So this is the child component as you can see I passing data from outside right from the parent to the child You can see here and now I'm going to pass data from the child out to the parent So if you put like a number here, whatever number it is If I click update child, it's going to pass this data out up to the parent and display it right here Okay, so we already kind of did that in the child component. Now is how do you receive it? So we pass an object called population and They're going to send that but admit to that as an event Okay, even admit as an event you pass this data to it So in the parent component out here, you're gonna receive and this child tag So we here we get the city we bind this to the variable in the city I'm going to add another event here. Let me put this in multi-line So you can see of course, yes, really you can do this. It does not need to be in the same line and then the next property here would be Event that binds to a variable called population as well. It's in the child It's a little confusing. So Maybe we should change this to something different So I'll put here As put here trial population, okay, I'm sorry changing a little bit here. Oh, it's different It's in a child population And make sure I did not put up here Yeah, so that's fine and so on the parent component. I'm going to call it Child population so this name here is the same in the child and it's going to be bound to a function call update Why if I don't if I don't If I don't call a function which I which I can I Must have a function to update this population Okay, if you don't do that then I believe you could just do it directly here You can say, you know population is equal to the event See if this comes through. Okay This event is what's coming from this object here So if I save that and We'll see if this works. There you go. I put eight All as an object. Yeah, I have to pass that to them to the variable but it does change the event here is an element but needs to be a data Okay, so let's let's change this to the function. I'm going to put here Update pop Just put that for now you pass the event to it and I'm going to copy this function and This function must exist in the parent so we here Put a function here update from parent We should I got passed to this function a variable called n That is changes population to the end Updated that to a new value. That's all I'm doing and to see if this works So if it put tall Yeah, something's not taking it. I'm probably not doing something. Yeah, it should be it should be the actual value It's doing it's getting the object Element. Oh, yeah, no, that's that's my fault because when I when I read the input I should have put the other one and the child component It should say pop that values right and you call that function No, I mean the actual value right Passing the value to it so you can get the value. Otherwise you get the HTML element Yeah, so get it from this input here you get the value And you can put a default value right by you just let's just say you put here 500 that's the default So now That's the default I click that as you can see it passes that to the parent and Apparently sees that I Changed it to whatever it is and there it is Okay, so that's going from the child to the parent Of course, I showed you a while ago that and the parent component. I didn't have to call this function I mean here, right? I could just say, you know population Equals even it should work because initially I forgot to change graph the actual value So that's all you do. I'm just changing the content of the variable and I'm not doing anything anything special to it This should also work. So I'm not going to call the function out Just, you know manipulate the variable directly and you can see it will just fine. Okay so data coming from the parent down to the child and They're from the child up to the parent. So this is the child component And of course you can put this in multiple places here I put it down here, right if I want to and I have two of them and it doesn't matter Right, I go here see it changes either here or up here doesn't matter Right because it's each of these is independent And they should the same just like an H1 tag, right a pair of the tag and so on But just to show you how the flow data can be Pass or communicate across components. Okay, so now notice I passed data over over here as a as a number Of course, you can pass data as a Boolean value as well All right, so now let's do this. I'm going to go and remove this child component And instead of this child component, let's let's say that I'm going to put here the the about page app dash about right below it Right, I'm below here So it looks like this is the below component. So I'm sort of saying update parent component city Population I'm going to put here another button to hide These contents to hide the about page From the child component Apparently we can do that easily right? We can put a button in the parent component and hide it. How do you do from the child? All right, so here example, let's do in the parent component here is easy. I could say here very simple Right, you can put it in here if it is show about Variable show about Yeah, that is true and it shows otherwise hides it, right? So as you can see here is this false if you run the browser you won't see it because it's nothing is not true It controls in the parent that means in my parent component if I have a variable call show about It's true And yeah Now I save it. It's true. So therefore it shows and there it is Okay, how we how do we hide it? Well, we did the last week by saying, okay, you could have a button here right to show and hide Hide the about this is in the parent. Okay, so here you can find that to a function call show about Or is it show hide About you call the function You bind that to a function you click event You bind to the function Invoke it. Okay, and Then when you call this function you're going to change this to its opposite So they show how you function will copy this put inside the rule component but right in here below it the function when I Click the button It's going to change this show high button about to its opposite, which is the show about And what the exclamation mark in front then not right if it's true the high high and so forth So now We added a toggle button To show our stuff so hide show you can see Okay from the parent Now how do you do this from the child? Okay, so you do the same thing except you put in the child and Then you would pass the data up to the parent and you change the show about variable value, that's all So the the child can manipulate its parents that data So let's go back in here. So notice again. I'm going to go to the child component over here And just blow some simplicity. I'm going to copy the same Button from the parent. So this button here. This is from the parent Copy that and Add it to the child component. Maybe somewhere right below here Put a VR so we have a space right in here. This is in the child component when I click this function show high about I'm going to call it differently, okay, so such as tile show hide so we not confusing Tile show high. Okay, so we can see that So I'm going to call this function show hide and sell the child component I have a function here and I'm going to create a variable just like this. It's going to go out to the thing. So This could be an output I'm going to copy this Exactly same. This is the show hide It's going to be new event of tight boolean Okay, it must be a true and false right to put boolean here Or you can put any doesn't matter, but it's going to boolean type and in here you're going to So what when you show this this data, you're going to pass them into it. So initially, I want to set it to a local variable I'll put it here show is Is We'll put it true by default. Okay, so when I click the button, I'm going to change this to false So we're going to pass that value true false to the show high property object Pass that over up to the parent So here we say this dot show hide You're going to emit just like down here Right admit what image show Which is this show here. It'll be it'll be this show. Okay, I Want to change the reverse of that. So again the knot, right? Initially, it's true and a clicker is going to say false and I'm going to pass false up the chain to the parent Bind it to a function called show hide event So the parent component up here. I'm still doing the same child component here Okay, I'm not adding a new one the same one here. So I'm going to bind again To another event called show hide This is the one in the parent and the child Here they show hide this output and It's going to bind that to this variable call show about Right, so show about It's equal to the event Because I'm just changing the state of this variable If it's true before if I click the child component is going to toggle this to false to false And because it's all reactive reactive if this changes it's going to affect this about tag Because it's been rendered here I'm not calling this function at all. I'm just affect the variable directly. Okay, so I say this now and Go back to the browser Okay, so this is again and so the green box is the parent. I mean the child and I'll set here is the parent so I can see that that's working beautifully and the parent I Refresh that again. That's in case so in the child. I'm going to hide it You can see Right, it works. It works very nicely Okay, and you see that I can I can show it because Once I hide it my code does not change to show and hide. Okay, it does not change show and hide here Because I did not update the show hide That's what here I could toggle because every time I change the function changes to value here. It just do one thing Because my code just says You know when I click this show hide button, it's going to change the value of this true to false. This is not a Permanent data, right? So usually you would do something like this. So you would say To make it correct. You will put this down here. I Would do this first this show Is now that I'm changing the state of this show hide and then now I can pass it to this show Function instead. So this part here is exactly same as in the parent right same thing But this time I'm passing that over to the parent Okay, so now I should be able to toggle as well through the child component So here we go Gannis is the parent. Well, just fine. There's a child Okay, so you can see it can show and hide my content Well, I hope that's uh, you know, that's clear But you can see how this is done Passing data out to the parent and the parent here has both of these tags I can bind three things here, right? This is from the parent down to the child This is from the child up to the parents you you receive data You must pass the data as an event to a local variable or function in your Parent component in order to use this data So I hope this will you know at least show you how you can complete the assignment So you can have a button on a component called show hide as a child component and you will render that here, right? So if I were to change my child component stuff, let's say if I don't have all these So you move all these here and I only do the show hide Who would look something like that, right? So in my parent component My parent say that I don't have these either I Right and I only have This is also the parent right looks like that, right? So here's my my parent page My content here And if I click this button from this is even though it looks just like on the same page It's from the child. I put the green you can see here, but it does affect the data and the parent So in your flight Right over here and put a button here. This button you will be Render from the child just like just like this button here in the child and When I click the button Show a hide based on the value then I'm going to change or display or show hide this entire table okay, and And in my example, you see that and the nose you'll see that it changes the color to green and blue Right, if you remember I showed you that in the example here has green and then when I show is blue Okay, so of course you can change that locally you could as well not in the parent here But what the button is the button is inside a child So I control the button color here. So the color could be changed based on that Okay So you put a NGF here, right? If it's true the green otherwise Blue so because the state state is inside here. You can change the status show here You show is true then show green and so so I can say something like this show that works Right here in the year NGF Oh, no, not NGF. I'm sorry you can find directly to the style To a style or to a class. How will you how do you want to do it? I guess the style Style about I'm buying to the style The nail the style if it's if it's if show is true Right if you show is true then it's gonna be I Wish we would call it color green, right? Else color Now we show is true the green you Alex colors blue Okay, so see this works. I'm not sure. Oh probably breaks it Yeah, it breaks it. Oh have to bind it to a variable. Yeah, you divide it to variable I'll put it here like for green Green otherwise, let's say blue and green and blue will be Value a variable inside your code like the child component. You put your green your style blue so if show is true then When you show is true then blue It shows true. Yeah, it'll be the reverse So if show is true then blue I mean, it's already shown if it's not shown you put green so you can toggle between those I guess Let's see So it is right. I'm showing it because it's not blue if I hide it is green. Okay So once I click on it the show is now true before put blue and then green