Definitions and illustration

In angular, sharing data between components may cause headache for many of developers, specially in case you need to handle large scale application. In this post, I will introduce the different ways of handling shared data between components. Angular Share Data Between Components is topic that may focus angular developers daily, so in this post, I will illustrate the different ways to share the data in angular components.

The following are the most easy way, I use in my projects to share data between components in angular

1- From parent to child

In the child component Inside the component and before component constructor , add the following input paramter:

    @Input() childId;

In the same child component, import the input tag

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

In the parent html component, add the child tag as following

    <app-child [childId]="childId"></app-child>

In the parent ts component before constructor, define the childId paramter and pass the value you need, as the following

childId: number;

2- Using BehaviorSubject

Create a service class

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

    class ChildDto{
        childId: number;
    }

    @Injectable({
        providedIn: 'root'
    })
    export class ChildDataService {

        constructor() { }

        private childSource = new BehaviorSubject([]);
        currentChild = this.childSource.asObservable();
        changeChild(childDto: ChildDto[]) {
            this.childSource.next(childDto)
        }

    }

For a good and clean code, you can move, the class ChildDto to a new file
In the parent component, call/inject the ChildDataService in the constructor

    import { ChildDataService } from 'service-location';

    constructor(
        private readonly childDataService: ChildDataService,
    )

    changeChild(){
      childDto: ChildDto[]=[]; // add your data
      this.childDataService.changeChild(childDto);
    }

In the child component, call/inject the ChildDataService in the constructor

    import { ChildDataService } from 'service-location';

    constructor(
        private readonly childDataService: ChildDataService,
    )

    callChild(){

      this.childDataService.currentChild.subscribe(result => {
       // do what you need with the results which changed in the parent.
      });
        
    }

Enjoy…!!!

We can help you to build such as software tools/snipts, you contact us from here