Passing data between two components

Question

I have two components , component1 and component2

component1 contains following piece of code

export class CpOne{
   passedValue:number=null;

   setValue(x){
     this.passedValue = x;
   }
}

the component two contains following piece of code

import { CpOne }   from './component1'

export class CpTwo{
     constructor(private cp : CpOne){}
}

what I want to achieve , is somehow invoke setValue method of component1 in component2 , or basically send data from component2 to component1 and store them in passedValue variable.

Is such a thing possible in angular2 without using templates and passing value with it?

Have a look at https://angular.io/docs/ts/latest/cookbook/component-communication.html#!%23parent-to-child-local-var — Arpit Agarwal, Jul 20 '16 at 12:12
@ArpitAgarwal what if i have multiple componentes imported? How do i specify i want to send data so specific one — Darlyn, Jul 20 '16 at 12:22

score 0 · Answer 1 · answered Jul 20 '16 at 12:44

0

The data share does not work in that way. To share data between components you could use:

- @ViewChild/@ViewChildren
- Services
- @Input
- Observables

answered Jul 20 '16 at 12:44

Reginaldo Camargo Ribeiro

767
4
15

score 0 · Answer 2 · edited May 23 '17 at 12:09

The global answer is to leverage a shared service and use it to communicate between components.

Most of the time, you need to define your shared service when bootstrapping your application:

bootstrap(AppComponent, [ SharedService ]);

and not defining it again within the providers attribute of your components. This way you will have a single instance of the service for the whole application.

You can implement the shared service like that:

export class SharedService {
  valueUpdated:Subject<any> = new Subject();

  updateData(data:any) {
    this.valueUpdated.next(data);
  }
}

To be notified, simply subscribe to the subject

constructor(private service:SharedService) {
  this.service.valueUpdated.subscribe(data => {
    // do something
  });
}

One component is a sub component of your AppComponent one, simply remove the providers attribute like this:

@Component({
  selector : "other",
  // providers : [SharedService], <----
  template : `
    I'm the other component. The shared data is: {{data}}
  `,
})
export class OtherComponent implements OnInit{
  (...)
}

This way they will shared the same instance of the service for both components. OtherComponent will use the one from the parent component (AppComponent).

This is because of the "hierarchical injectors" feature of Angular2. For more details, see this question:

What's the best way to inject one service into another in angular 2 (Beta)?

By injecting the parent into the child, you need to be careful about cyclic dependency (use forwardRef - see https://angular.io/docs/ts/latest/api/core/index/forwardRef-function.html). But it's possible to have something like that:

@Component({
  template: `
    <div (click)="onClick()">Click</div>
  `,
  (...)
})
export class CpTwo{
  constructor(private cp : CpOne){}

  onClick() {
    this.cp.setValue({ value: 'some value' });
  }
}

score 0 · Answer 3 · answered Jul 20 '16 at 12:52

If you want to do that without using @intput/@output, I see two options:

Dependency Injection: If CpTwo is a child of CpOne, you can inject CpOne into CpTwo
Communicate via a service: CpTwo sets a service value, and CpOne access it. To do that you could use an observable.

Hope it helps.

Passing data between two components

3 Answers3