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

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s