How to send a value from one component to another?

Question

I create a component element in which I have one input field and a button. When I click the button, I duplicate the second component. I want to send data from one component to another component?

how will I send data from one component to another. I need to send an input value (whatever type of user I enter in the input field) I need to show on the next component or on the next page. On the button, click "How to send data"? here is my plunker http://plnkr.co/edit/IINX8Zq8J2LUTIyf4DYD?p=preview

import {Component,View} from 'angular2/core'; import {Router} from 'angular2/router'; @Component({ templateUrl: 'home/home.html' }) export class AppComponent { toDoModel; constructor(private _router:Router) { } onclck(inputValue){ alert(inputValue) this._router.navigate(['Second']); } } 

Answer 1

ABOUT!! maybe I'm too late to answer the question! But it doesn’t matter. This can help you or another exchange data between components using the Router, Shared-Service, and Shared-object shared with the common service. Hope this helps.

Respond

Boot.ts

 import {Component,bind} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router'; import {SharedService} from 'src/sharedService'; import {ComponentFirst} from 'src/cone'; import {ComponentTwo} from 'src/ctwo'; @Component({ selector: 'my-app', directives: [ROUTER_DIRECTIVES], template: ` <h1> Home </h1> <router-outlet></router-outlet> `, }) @RouteConfig([ {path:'/component-first', name: 'ComponentFirst', component: ComponentFirst} {path:'/component-two', name: 'ComponentTwo', component: ComponentTwo} ]) export class AppComponent implements OnInit { constructor(router:Router) { this.router=router; } ngOnInit() { console.log('ngOnInit'); this.router.navigate(['/ComponentFirst']); } } bootstrap(AppComponent, [SharedService, ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname) ]); 

Firstcompponent

 import {Component,View,bind} from 'angular2/core'; import {SharedService} from 'src/sharedService'; import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router'; @Component({ //selector: 'f', template: ` <div><input #myVal type="text" > <button (click)="send(myVal.value)">Send</button> `, }) export class ComponentFirst { constructor(service:SharedService,router:Router){ this.service=service; this.router=router; } send(str){ console.log(str); this.service.saveData(str); console.log('str'); this.router.navigate(['/ComponentTwo']); } } 

SecondComponent

 import {Component,View,bind} from 'angular2/core'; import {SharedService} from 'src/sharedService'; import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router'; @Component({ //selector: 'f', template: ` <h1>{{myName}}</h1> <button (click)="back()">Back<button> `, }) export class ComponentTwo { constructor(router:Router,service:SharedService) { this.router=router; this.service=service; console.log('cone called'); this.myName=service.getData(); } back() { console.log('Back called'); this.router.navigate(['/ComponentFirst']); } } 

SharedService and Shared Object

 import {Component, Injectable,Input,Output,EventEmitter} from 'angular2/core' // Name Service export interface myData { name:string; } @Injectable() export class SharedService { sharingData: myData={name:"nyks"}; saveData(str){ console.log('save data function called' + str + this.sharingData.name); this.sharingData.name=str; } getData:string() { console.log('get data function called'); return this.sharingData.name; } } 

Answer 2

All you need to do is make a service, insert it into both components, assign an input value to the service and access it in another component. Sorry, but I don’t know how to create a plunker. Here is the code:

EDIT:

First run this data service:

 export class DataService{ dataFromService;} 

Then enter this in your first component:

 import {Component,View} from 'angular2/core'; import {Router} from 'angular2/router'; import {DataService} from 'path/to/dataservice'; @Component({ templateUrl: 'home/home.html' }) export class AppComponent { toDoModel; constructor(private _router:Router, public dataService : DataService) { } onclck(inputValue){ alert(inputValue) this.dataService.dataFromService = inputValue; this._router.navigate(['Second']); } } 

Then enter another component and access the value:

 import {Component,View} from 'angular2/core'; import {DataService} from 'path/to/dataservice'; export secondComponent{ constructor(public dataService : DataService){ console.log(this.dataService.dataFromService); } 

Answer 3

it is always better to have a backend and a service that calls the backend to receive data. first you need to publish the input for maintenance and get that data from some database via nodejs or database. This would be the best way to get this based on some primary data key, at least how enterprise applications actually work