How can you communicate between sibling components in Angular?

Answer

There are a few approaches to facilitate communication between sibling components in Angular. Here's an example of using a shared service as a communication medium:

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

@Injectable()
export class DataService {
private dataSubject = new Subject<string>();
data$ = this.dataSubject.asObservable();

sendData(data: string) {
this.dataSubject.next(data);
}
}

In this example, we have a DataService which acts as a shared service between the sibling components. It utilizes a Subject from the RxJS library to create an observable stream of data (data$). The sendData() method is used to send data through the observable.

Now, let's see how sibling components can communicate using this shared service:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
selector: 'app-sibling-a',
template: `
<h1>Sibling A Component</h1>
<input type="text" [(ngModel)]="data" (ngModelChange)="sendData()">
`
})
export class SiblingAComponent {
data: string;

constructor(private dataService: DataService) { }

sendData() {
this.dataService.sendData(this.data);
}
}

//#####

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
selector: 'app-sibling-b',
template: `
<h1>Sibling B Component</h1>
<p>Data from Sibling A: {{ receivedData }}</p>
`
})
export class SiblingBComponent implements OnInit {
receivedData: string;

constructor(private dataService: DataService) { }

ngOnInit() {
this.dataService.data$.subscribe(data => {
this.receivedData = data;
});
}
}

In the example above, we have two sibling components, SiblingAComponent and SiblingBComponent.

SiblingAComponent has an input field that binds to the data property and triggers the sendData() method when its value changes. This method uses the dataService to send the data.

SiblingBComponent initializes the receivedData property and subscribes to the data$ observable from the dataService. Whenever new data is sent through the service, it updates the receivedData property, which is then displayed in the template.

By utilizing a shared service with an observable, the SiblingAComponent and SiblingBComponent can communicate by sending and receiving data. Changes in the input field of SiblingAComponent are reflected in SiblingBComponent.

This approach allows for decoupling sibling components and promotes a more modular and maintainable codebase. Other communication methods, such as @Input() and @Output() properties, can also be used depending on the specific requirements of the application.