Updated to Angular rc.4: When attempting to pass data between sibling components in Angular 2, the current simplest method (Angular rc.4) involves utilizing Angular 2's hierarchal dependency injection and implementing a shared service.

Here is an example of the shared service:

import {Injectable} from '@angular/core';

@Injectable()
export class SharedService {
    dataArray: string[] = [];

    insertData(data: string){
        this.dataArray.unshift(data);
    }
}

Next, here is the PARENT component:

import {Component} from '@angular/core';
import {SharedService} from './shared.service';
import {ChildComponent} from './child.component';
import {ChildSiblingComponent} from './child-sibling.component';
@Component({
    selector: 'parent-component',
    template: `
        <h1>Parent</h1>
        <div>
            <child-component></child-component>
            <child-sibling-component></child-sibling-component>
        </div>
    `,
    providers: [SharedService],
    directives: [ChildComponent, ChildSiblingComponent]
})
export class parentComponent{

} 

and its two children components:

Child Component 1:

import {Component, OnInit} from '@angular/core';
import {SharedService} from './shared.service'

@Component({
    selector: 'child-component',
    template: `
        <h1>I am a child</h1>
        <div>
            <ul *ngFor="#data in data">
                <li>{{data}}</li>
            </ul>
        </div>
    `
})
export class ChildComponent implements OnInit{
    data: string[] = [];
    constructor(
        private _sharedService: SharedService) { }
    ngOnInit():any {
        this.data = this._sharedService.dataArray;
    }
}

Child Component 2 (Sibling):

import {Component} from 'angular2/core';
import {SharedService} from './shared.service'

@Component({
    selector: 'child-sibling-component',
    template: `
        <h1>I am a child</h1>
        <input type="text" [(ngModel)]="data"/>
        <button (click)="addData()"></button>
    `
})
export class ChildSiblingComponent{
    data: string = 'Testing data';
    constructor(
        private _sharedService: SharedService){}
    addData(){
        this._sharedService.insertData(this.data);
        this.data = '';
    }
}

Things to remember when using this approach:

1. Only include the service provider for the shared service in the PARENT component, not the children.
2. Make sure to include constructors and import the service in the children components as needed.
3. This answer was initially provided for an early Angular 2 beta version. The only necessary updates are the import statements.

If you have 2 separate components (not nested, like parent, child, grandchild), I recommend the following approach:

MissionService:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()

export class MissionService {
  // Observable string sources
  private missionAnnouncedSource = new Subject<string>();
  private missionConfirmedSource = new Subject<string>();
  // Observable string streams
  missionAnnounced$ = this.missionAnnouncedSource.asObservable();
  missionConfirmed$ = this.missionConfirmedSource.asObservable();
  // Service message commands
  announceMission(mission: string) {
    this.missionAnnouncedSource.next(mission);
  }
  confirmMission(astronaut: string) {
    this.missionConfirmedSource.next(astronaut);
  }

}

AstronautComponent:

import { Component, Input, OnDestroy } from '@angular/core';
import { MissionService } from './mission.service';
import { Subscription }   from 'rxjs/Subscription';
@Component({
  selector: 'my-astronaut',
  template: `
    <p>
      {{astronaut}}: <strong>{{mission}}</strong>
      <button
        (click)="confirm()"
        [disabled]="!announced || confirmed">
        Confirm
      </button>
    </p>
  `
})
export class AstronautComponent implements OnDestroy {
  @Input() astronaut: string;
  mission = '<no mission announced>';
  confirmed = false;
  announced = false;
  subscription: Subscription;
  constructor(private missionService: MissionService) {
    this.subscription = missionService.missionAnnounced$.subscribe(
      mission => {
        this.mission = mission;
        this.announced = true;
        this.confirmed = false;
    });
  }
  confirm() {
    this.confirmed = true;
    this.missionService.confirmMission(this.astronaut);
  }
  ngOnDestroy() {
    // prevent memory leak when component destroyed
    this.subscription.unsubscribe();
  }
}

Source: Parent and children communicate via a service

If you're looking for a way to easily share data between two siblings in Angular 5, there's a simple solution that doesn't involve using a shared service.

Here's how you can implement it:

In the parent component template:

<!-- Assign "AppSibling1Component" instance to variable "data" -->
<app-sibling1 #data></app-sibling1>
<!-- Pass the variable "data" to the AppSibling2Component instance -->
<app-sibling2 [data]="data"></app-sibling2>

app-sibling2.component.ts

import { AppSibling1Component } from '../app-sibling1/app-sibling1.component';
...

export class AppSibling2Component {
   ...
   @Input() data: AppSibling1Component;
   ...
}

There's a lively discussion happening over here.

Check it out on Github

Alex J's solution was top-notch, but unfortunately, it doesn't work with the latest Angular 4 as of July 2017.

If you're interested in learning how to communicate between sibling components using a shared service and observable, take a look at this Plunker link below:

Plunker Demo Link

Utilizing a directive can be advantageous in specific scenarios to establish a 'connection' between components. Interestingly, the components being linked together do not necessarily have to be complete components; sometimes, it is more efficient and straightforward if they are not.

For instance, I have developed a Youtube Player component (which encapsulates the Youtube API) and desired some controller buttons for it. The only reason these buttons are not integrated into my main component is because of their placement elsewhere in the DOM.

In this particular scenario, it essentially serves as an 'extension' component that will exclusively complement the 'parent' component. Although referred to as 'parent,' in terms of the DOM structure, it functions as a sibling - interpretation may vary.

As aforementioned, it does not need to function as a full-fledged component; in my circumstance, it simply involves a <button> (although it could potentially be a component).

@Directive({
    selector: '[ytPlayerPlayButton]'
})
export class YoutubePlayerPlayButtonDirective {

    _player: YoutubePlayerComponent; 

    @Input('ytPlayerVideo')
    private set player(value: YoutubePlayerComponent) {
       this._player = value;    
    }

    @HostListener('click') click() {
        this._player.play();
    }

   constructor(private elementRef: ElementRef) {
       // initialization of the button
   }
}

In the HTML code for ProductPage.component, where youtube-player signifies my component wrapping the Youtube API.

<youtube-player #technologyVideo videoId='NuU74nesR5A'></youtube-player>

... additional DOM content ...

<button class="play-button"        
        ytPlayerPlayButton
        [ytPlayerVideo]="technologyVideo">Play</button>

The directive effectively links everything together without requiring me to explicitly declare the (click) event in the HTML markup.

Hence, the directive seamlessly establishes a connection with the video player, eliminating the necessity for ProductPage to serve as an intermediary.

This marks my first experience implementing such functionality, therefore, the scalability for more intricate scenarios remains uncertain. Nevertheless, for this current setup, I am content with how it simplifies my HTML structure and delineates responsibilities clearly.

Utilizing a shared service can effectively address this issue. To also store activity information, consider adding the Shared Service to the provider list in your main modules (app.module).

@NgModule({
    imports: [
        ...
    ],
    bootstrap: [
        AppComponent
    ],
    declarations: [
        AppComponent,
    ],
    providers: [
        SharedService,
        ...
    ]
});

This allows you to easily provide it to your components,

constructor(private sharedService: SharedService)
 

The Shared Service enables you to use functions or create a Subject to update multiple areas simultaneously.

@Injectable()
export class SharedService {
    public clickedItemInformation: Subject<string> = new Subject(); 
}

In your list component, you can broadcast clicked item information,

this.sharedService.clikedItemInformation.next("something");

Subsequently, you can retrieve this information in your detail component:

this.sharedService.clikedItemInformation.subscribe((information) => {
    // do something
});

The data shared by the list component can vary. Hopefully, this explanation proves helpful.

To establish the parent-child relationship between your components, it is essential to follow a specific approach. Injecting child components directly into the constructor of the parent component and storing them in local variables may lead to issues. Instead, you should declare the child components within the parent component using the @ViewChild property decorator. Here is an example of how your parent component structure should be:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ListComponent } from './list.component';
import { DetailComponent } from './detail.component';

@Component({
  selector: 'app-component',
  template: '<list-component></list-component><detail-component></detail-component>',
  directives: [ListComponent, DetailComponent]
})
class AppComponent implements AfterViewInit {
  @ViewChild(ListComponent) listComponent:ListComponent;
  @ViewChild(DetailComponent) detailComponent: DetailComponent;

  ngAfterViewInit() {
    // At this point, the children are initialized, allowing for their use
    this.detailComponent.doSomething();
  }
}

https://angular.io/docs/ts/latest/api/core/index/ViewChild-var.html

https://angular.io/docs/ts/latest/cookbook/component-communication.html#parent-to-view-child

Keep in mind that the child component will not be accessible in the constructor of the parent component until after the ngAfterViewInit lifecycle hook is triggered. To handle this hook, simply implement the AfterViewInit interface in your parent class similar to how you would with OnInit.

Additionally, there are alternative property decorators explained in this blog post:

For a straightforward explanation, you can check out this link

In call.service.ts

import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class CallService {
 private subject = new Subject<any>();

 sendClickCall(message: string) {
    this.subject.next({ text: message });
 }

 getClickCall(): Observable<any> {
    return this.subject.asObservable();
 }
}

To notify another component when a button is clicked, use the following code:

import { CallService } from "../../../services/call.service";
 
export class MarketplaceComponent implements OnInit, OnDestroy {
  constructor(public Util: CallService) {
 
  }
 
  buttonClickedToCallObservable() {
   this.Util.sendClickCall('Sending message to another comp that button is clicked');
  }
}

This code snippet demonstrates how to trigger an action in response to a button click in a different component:

import { Subscription } from 'rxjs/Subscription';
import { CallService } from "../../../services/call.service";


ngOnInit() {

 this.subscription = this.Util.getClickCall().subscribe(message => {

 this.message = message;

 console.log('---button clicked at another component---');

 //execute your desired action on button click in this component

 });

}

import { Subscription } from 'rxjs/Subscription';
import { CallService } from "../../../services/call.service";
 
 
ngOnInit() {
 
 this.subscription = this.Util.getClickCall().subscribe(message => {
 
 this.message = message;
 
 console.log('---button clicked at another component---');
 
 //execute your desired action on button click in this component
 
});
 
}

Understanding components communication has become clearer after reading through this resource:

Here's a helpful resource that may not be exactly what you're looking for, but can still assist you

It's surprising that there isn't more information readily available on component communication <=> Check out this tutorial by angular2

When it comes to sibling components communication, using sharedService is recommended. However, there are other options to explore as well.

import {Component,bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {NameService} from 'src/nameService';


import {TheContent} from 'src/content';
import {Navbar} from 'src/nav';


@Component({
  selector: 'app',
  directives: [TheContent,Navbar],
  providers: [NameService],
  template: '<navbar></navbar><thecontent></thecontent>'
})


export class App {
  constructor() {
    console.log('App started');
  }
}

bootstrap(App,[]);

For additional code samples, please refer to the link provided above.

Edit: This demo is just a small example. If you've already tried using sharedService, I recommend checking out this tutorial by angular2 for more in-depth guidance.

Exploring behavior subjects. I recently shared some thoughts on this topic in a blog post.

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
private numberId = new BehaviorSubject<number>(0); 
defaultId = this.numberId.asObservable();

updateId(newId) {
 this.numberId.next(newId); 
 }

In the above example, I am defining a behavior subject called numberId of type number, which is also an observable. Changes can be made to it using the updateId function when "something happens."

In the scenario of sibling components, one component triggers a change by calling the function, and the other component reacts accordingly. This interaction allows for seamless communication between the two.

For instance, I extract an ID from the URL and use it to update the numberId within the behavior subject.

public fetchId () {
  const id = +this.route.snapshot.paramMap.get('id'); 
  return id; 
}

ngOnInit(): void { 
 const id = +this.fetchId ();
 this.taskService.updateId(id) 
}

On the flip side, I can check if the received ID meets certain criteria and take action based on that condition. For example, if I intend to delete a task and that task corresponds to the current URL, I redirect to the homepage:

delete(task: Task): void { 
  // Storing the current ID before deletion
  const previousId = task.id; 
  this.taskService.deleteTask(task) 
      .subscribe(task => { // Calling the defaultId function from task.service.
        this.taskService.defaultId // Subscribing to urlId, which provides the ID from the displayed task
                 .subscribe(urlId => {
            this.urlId = urlId ;
                  if (previousId == urlId ) { 
                // Location.call('/home'); 
                this.router.navigate(['/home']); 
              } 
          }) 
    }) 
}

There is a clever method for siblings to communicate with each other using the @Output decorator in one sibling and a template reference variable in the other, allowing the parent to invoke methods of the second sibling. This approach closely resembles the use of @Output for parent-child communication.

By employing

this.emitSomething.emit(something);

sibling-1.component.ts

onEmitSomething(event: any): void {
  // do something
}

sibling-2.component.ts

@Output() emitSomething: EventEmitter<any> = new EventEmitter<any>();

parent.component.html

<sibling-1 #sibling1></sibling-1>
<sibling-2 (emitSomething)="sibling1.onEmitSomething($event)"></sibling-2>

You can explore the two different methods of component interaction in this resource Angular - Component Interaction

One interesting approach I've been using is passing down setter methods from a parent component to one of its children via a binding. This allows me to call the method with data from the child, causing the parent to update and subsequently update another child component with the new data. It's worth noting that this process does require either binding 'this' or using an arrow function.

The advantage of this method is that it reduces coupling between the children components since they don't rely on a specific shared service.

While I find this approach useful, I'm not entirely certain if it aligns with best practices. I'd love to hear what others think about this technique.

My preferred method of communication between two siblings is through a parent component using input and output properties. This approach handles OnPush change notification more effectively than relying on a common service. Alternatively, NgRx Store can also be used.

Here is an example:

@Component({
    selector: 'parent',
    template: `<div><notes-grid 
            [Notes]="(NotesList$ | async)"
            (selectedNote)="ReceiveSelectedNote($event)"
        </notes-grid>
        <note-edit 
            [gridSelectedNote]="(SelectedNote$ | async)"
        </note-edit></div>`,
    styleUrls: ['./parent.component.scss']
})
export class ParentComponent {

    NotesList$: Observable<Note[]> = of<Note[]>([]);
    SelectedNote$: Observable<Note> = of<Note>();

    ReceiveSelectedNote(selectedNote: Note) {
    if (selectedNote !== null) {
        this.SelectedNote$ = of<Note>(selectedNote);
    }
    }

    onNextData(n: Note[]): void {
    this.NotesList$ = of<Note[]>(n.NoteList);  
    }
}

@Component({
  selector: 'note-edit',
  templateUrl: './note-edit.component.html',
  styleUrls: ['./note-edit.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NoteEditComponent implements OnChanges {
  @Input() gridSelectedNote: Note;

    constructor() {
    }

ngOnChanges(changes: SimpleChanges) {
     if (changes.gridSelectedNote && changes.gridSelectedNote.currentValue !== null) {      
      this.noteText = changes.gridSelectedNote.currentValue.noteText;
      this.noteCreateDtm = changes.gridSelectedNote.currentValue.noteCreateDtm;
      this.noteAuthorName = changes.gridSelectedNote.currentValue.noteAuthorName;
      }
  }

}

@Component({
    selector: 'notes-grid',
    templateUrl: './notes-grid.component.html',
    styleUrls: ['./notes-grid.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class NotesGridComponent {

    CurrentSelectedNoteData: Note;

    @Input() Notes: Note[];

    @Output() readonly selectedNote: EventEmitter<Note> = new EventEmitter<Note>();

    constructor() {
    }

    EmitSelectedNote(){
    this.selectedNote.emit(this.CurrentSelectedNoteData);
    }

}

export interface Note {
    noteText: string;
    noteCreateDtm: string;
    noteAuthorName: string;
}