Understanding Data Sharing Between Angular Components using BehaviorSubject

In the realm of complex Angular applications, one of the prevalent challenges that developers encounter is the efficient sharing of data among distinct components. Angular offers a potent tool to address this predicament: the 'BehaviorSubject'. This article delves into the practical utilization of 'BehaviorSubject' to facilitate data sharing across components within an Angular application.

What is BehaviorSubject?

In straightforward terms, a 'BehaviorSubject' is a variant of RxJS subject that retains a current value and transmits it to newly subscribing entities. It resembles a conventional 'Subject', but with a pivotal distinction – it constantly holds a value, even when no subscribers are present. When fresh components subscribe to the 'BehaviorSubject', they promptly receive the prevailing value. This characteristic renders it an optimal solution for data sharing that necessitates accessibility and updates across diverse parts of an application.

Establishing the BehaviorSubject

The initial step involves creating an Angular service called 'SharedDataService' to accommodate the shared data and the 'BehaviorSubject'.

// shared-data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class SharedDataService {
  private dataSubject: BehaviorSubject<string> = new BehaviorSubject<string>('Initial Value');

  public data$ = this.dataSubject.asObservable();

  public updateData(newValue: string): void {
    this.dataSubject.next(newValue);
  }
}

Subscribing to the BehaviorSubject

With the 'SharedDataService' set up, any component requiring access to the shared data can utilize it. Let's illustrate this with two example components: 'ComponentOneComponent' and 'ComponentTwoComponent'.

// component-one.component.ts
import { Component } from '@angular/core';
import { SharedDataService } from 'path-to-your-shared-data.service';

@Component({
  selector: 'app-component-one',
  template: '
    <div>
      <h3>Component One</h3>
      <p>{{ sharedData }}</p>
    </div>
  ',
})
export class ComponentOneComponent {
  sharedData: string;

  constructor(private sharedDataService: SharedDataService) {
    this.sharedDataService.data$.subscribe((data) => {
      this.sharedData = data;
    });
  }
}

// component-two.component.ts

import { Component } from '@angular/core';
import { SharedDataService } from 'path-to-your-shared-data.service';

@Component({
  selector: 'app-component-two',
  template: '
    <div>
      <h3>Component Two</h3>
      <input type="text" [(ngModel)]="newData" />
      <button (click)="updateData()">Update Data</button>
    </div>
  ',
})
export class ComponentTwoComponent {
  newData: string;

  constructor(private sharedDataService: SharedDataService) {}

  updateData() {
    this.sharedDataService.updateData(this.newData);
  }
}

Integrating Components in AppModule

To incorporate these components into the application, they should be included in the 'AppModule' declarations.

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ComponentOneComponent } from './component-one.component';
import { ComponentTwoComponent } from './component-two.component';

@NgModule({
  declarations: [AppComponent, ComponentOneComponent, ComponentTwoComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Conclusion

This article has explored the application of 'BehaviorSubject' for the purpose of data sharing among diverse components within an Angular application. By employing the 'SharedDataService' with a 'BehaviorSubject', changes can be efficiently disseminated to all subscribing components. This robust mechanism streamlines the management of shared data and enhances the overall maintainability of Angular projects. Armed with this knowledge, you can confidently construct sophisticated applications with seamless data exchange between components.

Happy learning!! 😊