Share data between components – Angular7

In Angular2+, share data between components is very important.
Components could have parent/child relation or two components in the same level.
Here I tried to give you the code simple and useful, so three different types is mentioned here, but don’t forget that these are all ways to share the variable between components.

Parent ⇒ Child

parent.html

<p>{{parentVarData.name}}</p>
<app-child [dataToChild]="parentVarData"></app-child>

parent.ts

parentVarData: {} = {name:'This is parent data to share'};

child.html

<p>{{dataToChild.name}}</p>

child.ts

import { Input } from '@angular/core';
@Input() dataToChild: {};

Child ⇒ Parent

parent.html

<p>{{dataSentFromChild.name }}</p>
<app-child (dataToSendEvent)="receiveData($event)"></app-child>

parent.ts

dataSentFromChild: {};
receiveData($event){
     this.dataSentFromChild = $event;
}

child.html

<p>{{dataToSend | json}}</p>
<button (click)="sendData()">SEND</button>

child.ts

import { Output, EventEmitter } from '@angular/core';
dataToSend = {name:'a variable from child'};
@Output() dataToSendEvent= new EventEmitter<{}>();
sendData(){ this.dataToSendEvent.emit(this.dataToSend); }

Any ⇒ Any

parent.html

<p>{{parentComponent_dataToShare.name}}></p>
<p>{{parentComponent_dataToShare.no}}></p>
<button (click)="changeData()">change to 2</button>
<app-child></app-child>

parent.ts

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

export class ParentComponent implements OnInit {
  parentComponent_dataToShare: {};
  constructor(private data: ShareDataService) { }
  ngOnInit() {
    this.data.sharedData.subscribe(
        data => this.parentComponent_dataToShare = data);
  }
  changeData() { this.data.changeData({name:"two",no:2}); }
}

child.html

{{childComponent_dataToShare.name}} - {{childComponent_dataToShare.no}}
<button (click)="changeData()">change to 3</button>

child.ts

import { Component } from '@angular/core';
import { ShareDataService } from './../../share-data.service';

export class ChildComponent {
  childComponent_dataToShare: {};
  constructor(private data: ShareDataService) { }
  ngOnInit() {
    this.data.sharedData.subscribe(
         data => this.childComponent_dataToShare = data);
  }
  changeData() { this.data.changeData({name:"Three",no:3}); }
}

Another-parent.html

{{anothrComponent_dataToShare.name}} - {{anothrComponent_dataToShare.no}}
<button (click)="newMessage()">change to 1</button>

another-parent.ts

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

export class AnotherParentComponent implements OnInit {
  anothrComponent_dataToShare: {};
  constructor(private data: ShareDataService) { }
  ngOnInit() {
    this.data.sharedData.subscribe(data => this.anothrComponent_dataToShare = data);
  }
  newMessage() {
    this.data.changeData({name:"One",no:1});
  }
}

Share-data.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class theData{ name:string; no:number; }
export class ShareDataService {
  defaultData:theData = {name:'zero',no:0}
  private dataToShare = new BehaviorSubject(this.defaultData);
  sharedData = this.dataToShare.asObservable();
  constructor() { }
  changeData(receivedData: theData) {
    this.dataToShare.next(receivedData);
  }
}

Leave a Reply

Your email address will not be published.