How to Share Data between Components in Angular2

Question

In this Scenario I am having 3 component the namely component-1,component-2,component-3. Component-2 and Component-3 are hosted in Component-1 I want to send data after clicking button in component-2 to component-3. Thanks In Advance

Answer 1

You can implement this by using the @Input and @Output decorator methods available in Angular 2/4.

Those are very simple to use. Just keep the shared data at Component 1 and do the two way binding of that data with Component 2 and 3. Make sure to trigger the change event whenever there is change in data from any of Component 2 or 3.

//for example component 1
@Component({ ... })

export class Component1{
  private data: Data = "some data";
}

//component 2 and 3
@Component({ ... })

export class Component2{

  @Input() data: Data = "some data";
  @Output() dataChange: EventEmitter ...
  
  ngOnChanges(){
    this.dataChange.emit(this.data);
  }
}

<component1>
<component2 [(data)]="data"></component2>
<component3 [(data)]="data"></component3>
</component1>

Answer 2

Use a service to share data between components.

SERVICE

 export class MyService {
     public someVariable: string = ""
     // .....
 }

COMPONENT 1 (Typescript)

 import { MyService } from "./myService.service"
 // ......
 constructor(public ms: MyService) {}

 setValue(val){
     this.ms.someVariable = "Hello!" // Alter the variable in the service
 }

COMPONENT 2 (Typescript)

 import { MyService } from "./myService.service"
 // ......
 constructor(public ms: MyService) {}

COMPONENT 2 (HTML)

 <h1>{{ ms.someVariable }}</h1>  <---- Will print Hello! in your HTML markup