Привязать данные одного компонента к другому компоненту без родительских и дочерних отношений в angular 8

Question

У меня есть служба Home, которая вызывает API данных пользователя с помощью httpClient, а затем я импортировала эту службу в мой компонент Home и подписалась на эту службу в моем компоненте Home, которая предоставляет мне информацию об этом пользователе, т.е. firstname. и я сохранил это имя в переменной 'firstname'

Теперь у меня есть еще один компонент header.component.html Я хочу отобразить этот firstname из домашнего компонента в этот компонент заголовка

Домашний компонент принадлежит модулю панели мониторинга, а компонент заголовка находится в модуле приложения, и между этими компонентами нет прямых или родительских дочерних отношений

Помогите мне, как я могу связать firstname домашнего компонента с заголовкомкомпонент

Ниже приведен код моего home.component.ts, где я сохранил значение firstname в переменной для привязки к компоненту заголовка

import { Component, OnInit } from '@angular/core';
import { HomeService } from '../../_service/home.service'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  users : []
  firstname ;  
   lastname ;
  constructor(private homeservice: HomeService) { }


  ngOnInit() {
    this.homeservice.getuser()
    .subscribe(
      res =>{
        this.users= res.userDetails;
        this.firstname = this.users['first_name'];
        this.lastname = this.users['last_name'];
        console.log(this.users);
        console.log(this.firstname)
      }
    )
  }

}