Pass data between component in Angular

Question

I have this page structure

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

I load all data in app.component.ts file using shared service

import { Component,HostListener } from '@angular/core';
import { Router } from '@angular/router';
import { TokenService } from './shared/token.service';
import { AuthStateService } from './shared/auth-state.service';
import { SharedData,SharedService } from './shared/shared-service.service';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  baseUrl = environment.baseUrl;
  homePageTitle:any;
  title:any;
  ...
  data: SharedData;


  constructor(
    private auth: AuthStateService,
    public router: Router,
    public token: TokenService,
    private http: HttpClient, private domSanitizer: DomSanitizer,
    private sharedService: SharedService
  ) {
  }

  ngOnInit() {

    this.http.get(this.baseUrl+'api/content').subscribe(result  => {
      this.title=result['response'].title;
      ... 
      ...
     this.setData();
    });
    
  }

  setData(): void {
 this.sharedService.setData({title: this.title,....});
      this.sharedService.sharedData.subscribe(result => this.data = result);
  }
}

shared-service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { BehaviorSubject } from 'rxjs';

export interface SharedData {
  title: any;
  ...

}

@Injectable({
  providedIn: 'root'
})

export class SharedService  {

  private sharedData$ = new BehaviorSubject<SharedData>({title: '',...other fields});
  sharedData = this.sharedData$.asObservable();

  baseUrl = environment.baseUrl;
  constructor(private http: HttpClient) { }

  setData(data: SharedData): void {
    this.sharedData$.next(data);
  }
}

when i subscribe to this service in footer,header and home component i get blank data in all the fields.

this.sharedService.sharedData.subscribe(result => this.data = result);

Answer 1

You can pass data between components that have a parent-child relationship by using @Input decorator.

1. Go into footer.component.ts and add

@Input() 
data: {title: string, logo: string};

2. Save the data inside home.component.ts into a single object:

 ngOnInit(): void {
      this.http.get(this.baseUrl+'api/content').subscribe(result  => {
        this.footerData = {title: result.title, logo: result.logo};
      });
  }

3. Make sure you pass in the input. In home.component.html

<app-footer [data]="footerData"></app-footer>

Alternatively you can declare multiple @Input members in footer, one for each property.