How to send a value from one component to another?

Question

I make a componenet in which I have one input field and button.On click of button I am diplaying the second component.I want to send data from one component to another component ?

how I will send data from one component to another ..I need to send input value (what ever user type in input field ) I need to show on next component or next page .On 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']);
  }

}

Solution 1

Oh!! may be I' m too late to answer the question! But never mind.This might help you or other to share data between components using Router,Shared-Service and Shared-object used withing shared-service. I hope this will surely help.

Answer

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)
    ]);

FirstComponent

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;
  }
} 

Solution 2

All you have to do is make a service, inject it in both the components, assign the input value to the service veriable and access it in the other component. Sorry bro but don't know to create plunker. Here is the code :

EDIT :

First make this data service :

export class DataService{
     dataFromService;}

Then inject 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 inject in 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);
}