title: Not able to pass emitted event from child to parent component
body: <p>I am trying to show a pop-up (modal) if user enters any text in textboxes and click on a subheader showing him a confirmation modal.</p>
  <p>I have done the modal part like on click of subheader. But wanted to show it only when user enters some text and click in that subheader.</p>
  <p>For that I am using (keyup) in the html to pass it as the values as a eventEmitter.</p>
  <p>Below is my <strong>search.component.html</strong> this is <strong>child component</strong></p>
  <pre><code>&lt;div&gt;
    &lt;form [formGroup]=&quot;form&quot;&gt;
      &lt;div *ngFor=&quot;let field of searchFields&quot; class=&quot;column&quot;&gt;
        &lt;app-form-field [field]=&quot;field&quot; [form]=&quot;form&quot; (keyup)=&quot;sendToParent(this.form.value)&quot;&gt;&lt;/app-form-field&gt;
      &lt;/div&gt;
      &lt;div class=&quot;button-container&quot;&gt;
        &lt;app-button [type]=&quot;this.button.RESET&quot;&gt;&lt;/app-button&gt;
        &lt;app-button [type]=&quot;this.button.SEARCH&quot;&gt;&lt;/app-button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This is my <strong>search.component.ts</strong>  code</p>
  <pre><code>import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
  import { ButtonType } from '../../shared/button/button-type';
  import {FormBuilder, FormGroup, Validators} from '@angular/forms';
  
  import { FormBase } from '../../shared/form/models/form-base';
  import { FormService } from '../../services/form.service';
  
  
  @Component({
    selector: 'app-landing-form',
    templateUrl: './search.component.html',
    styleUrls: ['../landing.component.scss'],
    providers: [FormService]
  })
  
  export class SearchComponent implements OnInit {
  
    @Input() searchFields:FormBase&lt;string&gt;[] | null = [];
    @Output() outputToParent = new EventEmitter&lt;string&gt;();
    form:FormGroup;
    value:string=&quot;Apples&quot;;
  
    public get button():typeof ButtonType {
      return ButtonType;
    };
  
    constructor(private formService:FormService) {
    }
  
    ngOnInit() {
      this.form = this.formService.toFormGroup(this.searchFields as FormBase&lt;string&gt;[]);
    }
  
    sendToParent(value: any) {
      console.log(&quot;Emmitted event from search+++&quot;, value);
      this.outputToParent.emit(value);
    }
  }
  
  </code></pre>
  <p>On the console I can see if I enter any text in the textboxes it is being printed. So I am thinking it is able to emit the values that I entered.</p>
  <p>But in the parent component I am trying to get the emitted values but the <strong>emitted event method</strong> is not getting called.</p>
  <p>this is my <strong>nav.component.ts</strong> code which I am treating it as my <strong>parent</strong> component.</p>
  <pre><code>import {Component, Input, OnInit} from '@angular/core';
  import { Router } from '@angular/router';
  import {ModalComponent} from &quot;../components/modal/modal.component&quot;;
  import {MatDialog, MatDialogConfig} from &quot;@angular/material/dialog&quot;;
  
  
  @Component({
    selector: 'app-nav',
    templateUrl: './nav.component.html',
    styleUrls: ['./nav.component.scss']
  })
  
  export class NavComponent implements OnInit {
    recievedFromChild:string=&quot;empty&quot;;
  
    constructor(private router:Router,
                public matDialog: MatDialog) {
    }
    // $event: any;
    ngOnInit():void {
      this.router.routeReuseStrategy.shouldReuseRoute = () =&gt; false;
    }
  
    openLogoutModal() {
      const dialogConfig = new MatDialogConfig();
      dialogConfig.disableClose = true;
      dialogConfig.id = 'modal-component';
      dialogConfig.data = {
        name: 'Ok',
        title: 'Do you want to reload/refresh the screen. Entered Search data or Results would be Lost&quot; and an OK &amp; CANCEL button',
        actionButtonText: 'Ok'
      };
      const modalDialog = this.matDialog.open(ModalComponent, dialogConfig);
    }
  
    GetOutputVal($event: any) {
      console.log(&quot;Parent++++&quot;, this.recievedFromChild);
      this.recievedFromChild = $event;
    }
  
  }
  
  </code></pre>
  <p>html code for <strong>nav.component.html</strong></p>
  <pre><code>&lt;div class=&quot;navigation-container&quot;&gt;
    &lt;div class=&quot;center-top flex-container&quot;&gt;
      &lt;a id=&quot;nav-system-parameters&quot; class=&quot;left navigation&quot; routerLink=&quot;/search&quot; (click)=&quot;openLogoutModal()&quot;&gt;System Parameters&lt;/a&gt;
      &lt;a id=&quot;nav-search&quot; class=&quot;right navigation&quot; routerLink=&quot;/search&quot;&gt;Search&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;app-landing-form (outputToParent)=&quot;GetOutputVal($event)&quot;&gt;&lt;/app-landing-form&gt;
  
  </code></pre>
  <p>My expectation is to get call to <strong>GetOutputVal</strong> method once the event is emitted from child component. But it is not getting called.</p>
  <p>this is my <strong>app.component.html</strong> code</p>
  <pre><code>&lt;div class=&quot;title-container&quot;&gt;
    &lt;div class=&quot;app-title flex-container&quot;&gt;
      &lt;h1 id=&quot;main-title&quot; class=&quot;center-top&quot;&gt;Main title&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;hr class=&quot;line&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;app-nav&gt;&lt;/app-nav&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  
  </code></pre>
  <p>I have also tried the exact same way as mentioned in</p>
  <pre><code>https://stackblitz.com/edit/angular-t8app2?file=src%2Fapp%2FParent%2Fparent.component.html
  </code></pre>
  <p>but i am not success, not sure what else is going wrong. Any leads on the exact issue?</p>
  <p>Thanks.</p>