I would show you several way you can pass variables from one component to another in Angular. We would cover the following;<\/p>\n
<\/p>\n
<\/p>\n
First create a new Angular app. I call it variabledemo<\/em>. Remember to add routing<\/p>\n Create the parent component. Add the parent route<\/p>\n Create the child component. Add the child route<\/p>\n Remove all the content of the index<\/p>\n Embed the child component into the parent component using the <app-child><\/app-child> tag.<\/p>\n Test your app!<\/p>\n <\/p>\n In the parent component ts file, declare a string variable. I call it parentName. On the ngOnInit() method, I assign it a value “Kindson the Genius”.<\/p>\n So we want the child to use this variable. Somehow, we need to pass this variable to the child component. Then the child component would render the value of this variable to the page.<\/p>\n The child component would receive this variable and in a local variable annotated with @Input annotation.<\/p>\n So declare a local variable in the child component called receivedValue. Annotate it with the @Input annotation.<\/p>\n <\/p>\n Now to pass the parent’s parentName variable to the child’s receivedValue variable we add it as an attribute to the app-child markup using the format:<\/p>\n [childVariable] = “parentVariable”<\/p>\n At this point, the value of the parentVariable would then be available to the childVariable as well. So my markup looks like this: Let’s first create the variable to send. I call it valueToSend and initialize\u00a0 it to “The Tech Pro from Child”.<\/p>\n To pass a variable from child to parent, we need something called an emitter. This is what actually does the sending. It is simply a variable(function) of type EventEmitter and would be annotated with @Output.<\/p>\n This variable would be of type event emitter declared like this: To actually, send this variable we need to call the emit() method of the EventEmitter variable like so:<\/p>\n Then, in the parent component, we need a function (sort of a receiver) to actually capture what is sent by the child.<\/p>\n So in the parent component create a function receiver like so:<\/p>\n Then in the html markup, you can then connect the sender(from child) and the receiver(in parent) using this format:<\/p>\n <\/p>\n Let’s now see how to pass variables between sibling components on the same level.<\/p>\n <\/p>\n Let’s first create two more components: child1 and child2<\/p>\n Then we add routing for the two components as well<\/p>\n Then add navigation link to them as well from the parent component.<\/p>\n Now, this is all fine. But we’ll now adjust to be able to navigate using a router.<\/p>\n So add router services the the child components<\/p>\n Also add a button that has a click event and set up the click function. The this function would be like this:<\/p>\n Button Markup<\/strong><\/p>\n <\/p>\n Event Handler<\/strong><\/p>\n <\/p>\n Now we would pass the state variable as a second parameter to the navigate function, like so;<\/p>\n This means that we pass a state variable along with the route to child2<\/p>\n Now we would receive the variable in child2 using history.state.<\/em><\/strong><\/p>\n <\/p>\n In this method, the variable would show up in the url of the request. So let’s pass path parameter from Child to Child1. Let’s call the parameter msg.<\/p>\n First, open the app-routing component and adjust the route to child1 to allow for path parameter. Adjust like so:<\/p>\n <\/p>\n Next, in the routing code in Child component, adjust the goto function to add the msg value like so: <\/p>\n Finally in Child1 component, we retrieve this variable by two steps:<\/p>\n 1. inject an active route to the component like so:<\/p>\n 2. use route.snapshot.params to get the parameter like so:<\/p>\n <\/p>\n Finally, you may have to pass data using services. Although you may not need this often, but the benefit is that you now have your data preserved in a separate service. So you can already read the value from the service.<\/p>\n In this method, you simply create a service and wire it into the components.<\/p>\n First create a service using ng generate service. I call it proxy.<\/p>\n Here is the content of this service:<\/p>\n <\/p>\n2. Pass Variables from Parent to Child<\/strong><\/h4>\n
@Input<\/span>()<\/span> receivedValue:<\/span> String;<\/span>\r\n<\/pre>\n
\n<\/p>\n<<\/span>app-<\/span>child [<\/span>receivedValue]=<\/span>\"parentName\"<\/span>><\/<\/span>app-<\/span>child><\/span>\r\n<\/pre>\n<\/h4>\n
3. Pass Variable from Child to Parent<\/strong><\/h4>\n
\n<\/p>\n@Output<\/span>()<\/span> sender =<\/span> new<\/span> EventEmitter();<\/span>\r\n<\/pre>\nreceiver(<\/span>receivedFromChild:<\/span>any){<\/span>\r\n console.<\/span>log<\/span>(<\/span>receivedFromChild)<\/span>\r\n}<\/span>\r\n<\/pre>\n<<\/span>app-<\/span>child (<\/span>sender)=<\/span>\"receiver($event)\"<\/span>><\/<\/span>app-<\/span>child><\/span>\r\n<\/pre>\n4. Pass Variables Using State Variable<\/strong><\/h4>\n
<button<\/span> type=<\/span>\"button\"<\/span> (<\/span>click<\/span>)=\"<\/span>goto2<\/span>()\"<\/span>><\/span> Go to Child 2<\/button><\/span>\r\n<\/pre>\n goto2(){\r\n this<\/span>.router.navigate([\"\/child2\"<\/span>])\r\n }\r\n<\/pre>\n goto2(){\r\n this<\/span>.router.navigate([\"\/child2\"<\/span>], {state:<\/span> {data:<\/span>this<\/span>.Child1Msg}})\r\n }\r\n<\/pre>\n5. Pass Variables Using Path Parameter<\/strong><\/h4>\n
{<\/span> path:<\/span> \"child1\/:msg\"<\/span>,<\/span> component:<\/span> Child1Component},<\/span>\r\n<\/pre>\n
\n<\/p>\n goto1(){<\/span>\r\n this<\/span>.<\/span>router<\/span>.<\/span>navigate<\/span>([<\/span>\"\/child1\/\"<\/span> +<\/span> this<\/span>.<\/span>valueToSend<\/span>])<\/span>\r\n }<\/span>\r\n<\/pre>\nprivate<\/span> route:<\/span> ActivatedRoute<\/pre>\nthis<\/span>.<\/span>route<\/span>.<\/span>snapshot<\/span>.<\/span>params<\/span>.<\/span>msg<\/span>\r\n<\/pre>\n6. Pass Variables via a Service<\/strong><\/h4>\n
export<\/span> class<\/span> ProxyService {\r\n\r\n public<\/span> variable1:<\/span> String<\/span>; \/\/This is the variable<\/span>\r\n\r\n constructor() { }\r\n}\r\n<\/pre>\n