How To Pass Data Between Sibling Components In Angular

The Code Points August 22, 2022 0

In this article, we will learn about how to pass data between sibling components in the angular application. In this article, we are using SubjectBehaviour to pass data between sibling components.

What is a Behavior Subject?

The Behavior Subject is a special type of Observable in the RxJs Library with the help of that we can send our data to other components or services. A Behavior Subject is like an Observable but it is multicast to many observers which means the Behavior Subject is at the same time an Observable and an Observer.

So let's start with the implementation,

First, we need to create a new application using the following command.

ng new behavior-subject-example

Now, we are creating 3 new components at the same level using the following command, components namely ComponentA, ComponentB, and ComponentC.

ng g c ComponentA

ng g c ComponentB

ng g c ComponentC

Now, Open the app.component.html fil and add the child component using the following code.

<div class="row mt-5">
    <div class="col-md-4">
        <app-componentA></app-componentA>
    </div>
    <div class="col-md-4">
        <app-componentB></app-componentB>
    </div>
    <div class="col-md-4">
        <app-componentC></app-componentC>
    </div>
</div>

Now create a new service for data pass namely as dataService.ts with the help of the following command.

ng g service dataService

Now, Add the following code under the dataService.ts for passing data between components.

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

@Injectable({
  providedIn: 'root'
})
export class DataServiceService {
 // SharingData = new Subject();
 SharingData = new BehaviorSubject('default');
 constructor() { }

  changeDataSubject(data: any) {
    this.SharingData.next(data.value);
  }
}

Now, Add the following code under the componentA.ts file.

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

@Component({
  selector: 'app-componentA',
  templateUrl: './componentA.component.html',
  styleUrls: ['./componentA.component.css']
})
export class ComponentAComponent implements OnInit {
  ComponentAData: any = '';
  constructor(private DataSharing: DataServiceService) {
    DataSharing.SharingData.subscribe((res: any) => {
      this.ComponentAData = res;
    })
  }

  ngOnInit(): void {
  }
  onSubmit(data: any) {
    this.DataSharing.changeDataSubject(data);
  }
}

Now, Add the following code under the componentA.html file.

<div style="background-color: aliceblue;" class="card">
    <div class="card-body">
        <h5 class="card-title">Component A</h5>
        <input name="compA" #compA type="text" />
        <button (click)="onSubmit(compA)">Submit</button>
        <p class="card-text">{{ComponentAData}}</p>
    </div>
</div>

Now, Add the following code under the componentB.ts file.

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

@Component({
  selector: 'app-componentB',
  templateUrl: './componentB.component.html',
  styleUrls: ['./componentB.component.css']
})
export class ComponentBComponent implements OnInit {
  ComponentBData: any = '';
  constructor(private DataSharing: DataServiceService) {
    DataSharing.SharingData.subscribe((res: any) => {  
      this.ComponentBData = res;
    })
  }

  ngOnInit(): void {
  }
  onSubmit(data: any) {
    this.DataSharing.changeDataSubject(data);
  }
}

Now, Add the following code under the componentB.html file.

<div style="background-color: aliceblue;" class="card">
    <div class="card-body">
        <h5 class="card-title">Component B</h5>
        <input name="compB" #compB type="text" />
        <button (click)="onSubmit(compB)">Submit</button>
        <p class="card-text">{{ComponentBData}}</p>
    </div>
</div>

Now, Add the following code under the componentC.ts file.

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

@Component({
  selector: 'app-componentC',
  templateUrl: './componentC.component.html',
  styleUrls: ['./componentC.component.css']
})
export class ComponentCComponent implements OnInit {
  ComponentCData: any = '';
  constructor(private DataSharing: DataServiceService) {
    DataSharing.SharingData.subscribe((res: any) => {
      this.ComponentCData = res;
    })
  }

  ngOnInit(): void {
  }
  onSubmit(data: any) {
    this.DataSharing.changeDataSubject(data);
  }
}

Now, Add the following code under the componentC.html file.

<div style="background-color: aliceblue;" class="card">
    <div class="card-body">
        <h5 class="card-title">Component C</h5>
        <input name="compC" #compC type="text" />
        <button (click)="onSubmit(compC)">Submit</button>
        <p class="card-text">{{ComponentCData}}</p>
    </div>
</div>

Now, Run the application using ng serve command and see the browser screen, we are able to pass data between sibling components.

Conclusion

In this article, we learned how to pass data between sibling components in the angular application using the help of a behavior subject.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.