title: How to share data between components in Angular 8
body: <p>I am trying to share data from one component to another component like body component to header component using service but not working. After I click the change header details button I want to change the header data details like id and name.</p>
  
  <p>body.component.ts:</p>
  
  <pre><code>  change(){ 
    this.details = {
      id:"45673",
      name:"Micheal"
    } 
    this.data.changeMessage(this.details);  
    }
  </code></pre>
  
  <p>common.service.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  @Injectable()
  export class CommonService {
  
   details={
     id:'12345',
     name:'Victor'
   }
  
    private messageSource = new BehaviorSubject(this.details);
    currentMessage = this.messageSource.asObservable();
  
    constructor() { }
  
    changeMessage(message: any) {
      this.messageSource.next(message);
    }
  
  }
  </code></pre>
  
  <p>Demo: <a href="https://stackblitz.com/edit/angular-ep7tes?file=src%2Fapp%2Fbody%2Fbody.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ep7tes?file=src%2Fapp%2Fbody%2Fbody.component.ts</a></p>