Calling method from grandchild component in angular 7

Question

I have an angular 7 application and trying to call method of Parent from its grandchild component. I have Modal Component which is the grand child component. I am trying to call the method from there. I am calling the same method from its immediate parent by using output event which works but how do I call from the grandchild.

I have declared Event

@Output() termDetailsEvent = new EventEmitter<string>();

And call the parent method this way: this.termDetailsEvent.next('getTermsDetails');

Parent Component

    import { Component, OnInit, Input, ViewChild } from '@angular/core';
    import { TermsService } from '../services/terms.service';
    import { FundClassesComponent } from './fundClasses/fundClasses.component';


    @Component({
        selector: 'mgr-terms',
        templateUrl: 'terms.component.html'
    })


    export class TermsComponent implements OnInit {

        private Error: string;
        public TermDetails: any;
        private _ManagerStrategyId: number;
        FilteredClasses: any;
        OriginalList: any;
        Funds: any;
        FundClassType: any;
        FirmFunds: any;
        public get ManagerStrategyId(): number {
            return this._ManagerStrategyId;
        }

        @ViewChild(FundClassesComponent)
        fundClassesComponent: FundClassesComponent;

        @Input()
        public set ManagerStrategyId(value: number) {
            this._ManagerStrategyId = value;
        }
        FundClasses: any;
        LegalFundClasses: any;
        originalFundClasses: any;
        constructor(private termsService: TermsService) { }

        ngOnInit() {
            this.init();
        }

        init() {
            this.getTermsDetails();
        }


        public getTermsDetails() {
            if (this.ManagerStrategyId != null) {
                this.termsService.getTermsDetails(this.ManagerStrategyId).subscribe((data: any) => {
                    this.TermDetails = data;
                    this.OriginalList = JSON.parse(JSON.stringify(data));
                    this.FundClasses = this.TermDetails.FundClassViewModel;
                    this.LegalFundClasses = this.TermDetails.LegalFundClassViewModel;
                    this.Funds = this.TermDetails.LegalFundClassViewModel.Funds;
                    this.FundClassType = this.TermDetails.LegalFundClassViewModel.FundClassType;
                    this.FirmFunds = this.TermDetails.LegalFundClassViewModel.FirmFunds;

                    this.TermDetails.FundClassViewModel.FundDetailsViewModel.forEach(funDetail=> {
                        funDetail.FundClassDetailsViewModel = funDetail.FundClassDetailsViewModel
                            .reduce((prev, next) => prev = prev.concat(next), [])
                            .filter(obj => obj.InvestedAmount !== null);
                    });


                });
            }
        }
    }

Parent component html

<mgr-fund-classes (termDetailsEvent)="getFundInvestedDetails($event)" [FundClasses]="FundClasses" ></mgr-fund-classes>
<br/>
<br/>
<mgr-legal-fund-classes  (termDetailsEvent)="getTermsDetails()" [Funds] = "Funds" [FundClassType] = "FundClassType" [LegalFundClasses]="LegalFundClasses" [FirmFunds] ="FirmFunds" ></mgr-legal-fund-classes>

Child component

    import { Component, OnInit, Input, ViewChild, Output, EventEmitter } from '@angular/core';
    import { TermsService } from '../../services/terms.service';
    import { NotifyService } from '../../utilities/notify.service';
    import { number } from '@amcharts/amcharts4/core';
    import { IReview } from '../terms.interface';
    import { AddLegalFundClassComponent } from './addLegalFundClass.component';
    import { AddSideLetterComponent } from './addSideLetter.component';
    import { CloneLegalFundClassComponent } from './cloneLegalFundClass.component';


    @Component({
        selector: 'mgr-legal-fund-classes',
        templateUrl: './legalFundClasses.component.html'
    })



    export class LegalFundClassesComponent implements OnInit {

        private _legalFundClasses: any;
        LegalFundClass: any;

        @Output() termDetailsEvent = new EventEmitter<string>();


        public get LegalFundClasses(): any {
            return this._legalFundClasses;
        }
        @Input()
        public set LegalFundClasses(value: any) {
            this._legalFundClasses = value;
        }



        public defaultItem: { Name: string, Id: number } = { Name: "Select item...", Id: null };

        constructor(private termsService: TermsService, private notify: NotifyService) { }

        ngOnInit() {
            this.init();
        }


        public value: any = [{ Id: null, Name: "" }];



        Update(id) {
            this.LegalFundClass = this.LegalFundClasses.LegalFundClassDetailsViewModel
                  .find(obj => obj.Id === id);

            this.termsService.updateLegalFundClasses(this.LegalFundClass).then((result) => {
                if (result) {
                    this.notify.success('Legal Fund Class Details Successfully Updated');
                    this.EditMode[id] = !this.EditMode[id];
                    this.termDetailsEvent.next('getTermsDetails');
                }
            }).catch(err => {
                this.notify.error('An Error Has Occured While Updating Legal Fund Class Details');
            });
        }

        Delete(id) {

            this.termsService.deleteLegalFundClasses(id).then((result) => {
                if (result) {
                    this.notify.success('Legal Fund Class Successfully Deleted');
                    this.EditMode = !this.EditMode[id];
                    this.termDetailsEvent.next('getTermsDetails');
                }
            }).catch(err => {
                this.notify.error('An Error Has Occured While Deleting Fund Class Details');
            });
        }

Child component html

<shared-modal [modalSize]="1" class="survey-edit" [open]="cloneLegalFundClassWindowOpened">
    <div style="width: 100%;" header>
        <h4 class="modal-title">
            <div style="text-align: right"><button aria-label="Dismiss" class="close" style="margin-top: -10px"
                    type="button" (click)="dismissCloneModal()">X</button>
            </div>
        </h4>
    </div>
    <div body>
        <app-clone-legalclass  (termDetailsEvent)="getTermsDetails()" [FirmFunds]="FirmFunds"></app-clone-legalclass>

    </div>
    <div footer>
    </div>
</shared-modal>

Grand child component

    export class CloneLegalFundClassComponent implements OnInit {

        private Error: string;
        public ManagerDetails: any;
        public EditorConfig: string;
        public CloneLegalFundClass: ICloneLegalFundClass;

        @Input() FirmFunds: any;
        @Output() termDetailsEvent = new EventEmitter<string>();

        constructor(private termsService: TermsService, private notify: NotifyService) {
        }

        ngOnInit() {

            this.CloneLegalFundClass = { Description: '', Id: null, FundId: null };
        }


        cloneLegalFundClass() {
            this.CloneLegalFundClass.FundId = this.FirmFunds.find(x => x.Id === this.CloneLegalFundClass.Id).FundId;
            this.termsService.cloneLegalFundClasses(this.CloneLegalFundClass).then((result) => {
                if (result) {
                    this.notify.success('Legal Fund Class Cloned Successfully');
                    this.termDetailsEvent.next('getTermsDetails');
                }
            }).catch(err => {
                this.notify.error('An Error Has Occured While cloning Legal Fund Class');
            });
        }

        closeLegalFundClass() {

        }
    }

Answer 1

I created a simple Stackblitz showing how to do it. You just continue emitting further out: https://stackblitz.com/edit/angular-ad4kf3

Grandchild ts:

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


@Component({
  selector: 'app-grandchild',
  templateUrl: './grandchild.component.html',
  styleUrls: ['./grandchild.component.css']
})
export class GrandchildComponent implements OnInit {
  @Output() emitToChild: EventEmitter<void> = new EventEmitter();
  constructor() { }

  ngOnInit() {
    // emitting to child every two seconds, check console
    this.emit();
  }

  emit() {
    this.emitToChild.emit();
    timer(2000).subscribe(() => this.emit());
  }
}

Grandchild HTML:

<p>I'm grandchild.</p>

Child TS:

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Output() emitToParent: EventEmitter<void> = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }

}

Child HTML:

<p>I'm child.</p>
<app-grandchild (emitToChild)="emitToParent.emit()"></app-grandchild>

Parent TS:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  doSomething() {
    console.log('hello');
  }
}

Parent HTML:

<p>I'm Parent</p>

<app-child (emitToParent)="doSomething()"></app-child>