What is the correct, elegant way to call a child function from a parent?

Issue

I have three components:

MasterHeader (will always be the same) Content (this one will vary in content, specifically in the HTML) MasterFooter (will always be the same)

MasterHeader and MasterFooter have some buttons. They will always do the same thing, what will change is the content. MasterFooter has a Save button. I want to be able to take some form data in the Content component, and send it to the save method in the MasterFooter. The way that I am achieving that right now is:

In MasterFooter I have something like:

import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-master-footer',
  templateUrl: './master-footer.component.html',
  styleUrls: ['./master-footer.component.css']
})
export class MasterFooterComponent implements OnInit {

  @Output() save = new EventEmitter();

  constructor() { }

  ngOnInit(): void {
  }

  onSave() {
    this.save.emit()
  }

  actualSave(formDict: any, editing: boolean, id: number, masterTable: string) {
    //Actual saving code goes here
  }
}

And then in the Content component (remember this one will be different, there could be multiple components that are content but they will contain a form with data and they will always have a MasterHeader and MasterFooter) something like this:

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-physician',
  templateUrl: './physician.component.html',
  styleUrls: ['./physician.component.css']
})
export class PhysicianComponent implements OnInit {
  form: FormGroup;
  editing: boolean = false;
  id: number = 0;

  @ViewChild('footer') footer: any;

  constructor() {
    this.physicianForm = new FormGroup({
      //Define form controls here
    });
  }

  ngOnInit(): void {
  }

  onSave() {
    const formDict = this.form.getRawValue();
    this.footer.actualSave(formDict, this.editing, this.id, 'somename');
  }

}

As you can see, I emit from the MasterFooter to toggle the save from the Content (in this case it's PhysicianComponent). Then in the save that's toggled from the PhysicianComponent, I call the actualSave function inside the MasterFooter. I can't help but feel that this is an over complication of things, and that there should be a better, more elegant way of doing this. But as far as I've read I haven't found anything, or I just haven't been able to understand it. Any help to make this better will be appreciated.

EDIT: Before the bounty I want to say, if there is a better way to do this please let me know. This is the best that I could come up with, with my knowledge of Angular.

Solution

In this kind of complication i used to declare a service for each component that i'd like to access its properties and methods from other components.

In your case, you can create footer.service.ts and header.service.ts, then call them instance in the content component constructor like this :

constructor(
    private _header : HeaderService,
    private _footer : FooterService
){}

and then you can access them properties and methods whenever you want.

one more thing, if you have the same functions between header and footer you can optimize it and make one shared service that contains one single declaration of these functions,

so instead of having _header & _footer, we can just do

constructor(
    private _ui : UserInterface.service.ts 
){}

Answered By - Ala Mouhamed