title: Calling method from grandchild component in angular 7
body: <p>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.</p>
  
  <p>I have declared Event </p>
  
  <pre class="lang-js prettyprint-override"><code>@Output() termDetailsEvent = new EventEmitter&lt;string&gt;();
  </code></pre>
  
  <p>And call the parent method this way: <code>this.termDetailsEvent.next('getTermsDetails');</code> </p>
  
  <p>Parent Component</p>
  
  <pre class="lang-js prettyprint-override"><code>    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) =&gt; {
                      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=&gt; {
                          funDetail.FundClassDetailsViewModel = funDetail.FundClassDetailsViewModel
                              .reduce((prev, next) =&gt; prev = prev.concat(next), [])
                              .filter(obj =&gt; obj.InvestedAmount !== null);
                      });
  
  
                  });
              }
          }
      }
  </code></pre>
  
  <p>Parent component html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mgr-fund-classes (termDetailsEvent)="getFundInvestedDetails($event)" [FundClasses]="FundClasses" &gt;&lt;/mgr-fund-classes&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;mgr-legal-fund-classes  (termDetailsEvent)="getTermsDetails()" [Funds] = "Funds" [FundClassType] = "FundClassType" [LegalFundClasses]="LegalFundClasses" [FirmFunds] ="FirmFunds" &gt;&lt;/mgr-legal-fund-classes&gt;
  </code></pre>
  
  <p>Child component</p>
  
  <pre class="lang-js prettyprint-override"><code>    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&lt;string&gt;();
  
  
          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 =&gt; obj.Id === id);
  
              this.termsService.updateLegalFundClasses(this.LegalFundClass).then((result) =&gt; {
                  if (result) {
                      this.notify.success('Legal Fund Class Details Successfully Updated');
                      this.EditMode[id] = !this.EditMode[id];
                      this.termDetailsEvent.next('getTermsDetails');
                  }
              }).catch(err =&gt; {
                  this.notify.error('An Error Has Occured While Updating Legal Fund Class Details');
              });
          }
  
          Delete(id) {
  
              this.termsService.deleteLegalFundClasses(id).then((result) =&gt; {
                  if (result) {
                      this.notify.success('Legal Fund Class Successfully Deleted');
                      this.EditMode = !this.EditMode[id];
                      this.termDetailsEvent.next('getTermsDetails');
                  }
              }).catch(err =&gt; {
                  this.notify.error('An Error Has Occured While Deleting Fund Class Details');
              });
          }
  </code></pre>
  
  <p>Child component html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;shared-modal [modalSize]="1" class="survey-edit" [open]="cloneLegalFundClassWindowOpened"&gt;
      &lt;div style="width: 100%;" header&gt;
          &lt;h4 class="modal-title"&gt;
              &lt;div style="text-align: right"&gt;&lt;button aria-label="Dismiss" class="close" style="margin-top: -10px"
                      type="button" (click)="dismissCloneModal()"&gt;X&lt;/button&gt;
              &lt;/div&gt;
          &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div body&gt;
          &lt;app-clone-legalclass  (termDetailsEvent)="getTermsDetails()" [FirmFunds]="FirmFunds"&gt;&lt;/app-clone-legalclass&gt;
  
      &lt;/div&gt;
      &lt;div footer&gt;
      &lt;/div&gt;
  &lt;/shared-modal&gt;
  </code></pre>
  
  <p>Grand child component</p>
  
  <pre class="lang-js prettyprint-override"><code>    export class CloneLegalFundClassComponent implements OnInit {
  
          private Error: string;
          public ManagerDetails: any;
          public EditorConfig: string;
          public CloneLegalFundClass: ICloneLegalFundClass;
  
          @Input() FirmFunds: any;
          @Output() termDetailsEvent = new EventEmitter&lt;string&gt;();
  
          constructor(private termsService: TermsService, private notify: NotifyService) {
          }
  
          ngOnInit() {
  
              this.CloneLegalFundClass = { Description: '', Id: null, FundId: null };
          }
  
  
          cloneLegalFundClass() {
              this.CloneLegalFundClass.FundId = this.FirmFunds.find(x =&gt; x.Id === this.CloneLegalFundClass.Id).FundId;
              this.termsService.cloneLegalFundClasses(this.CloneLegalFundClass).then((result) =&gt; {
                  if (result) {
                      this.notify.success('Legal Fund Class Cloned Successfully');
                      this.termDetailsEvent.next('getTermsDetails');
                  }
              }).catch(err =&gt; {
                  this.notify.error('An Error Has Occured While cloning Legal Fund Class');
              });
          }
  
          closeLegalFundClass() {
  
          }
      }
  </code></pre>