title: Unable to call a parent method using the child method trigger
body: <p><strong>I am unable to execute the method using the child trigger in one case of the angular app.</strong> 
  I have placed a console log both in the parent and the child method, <strong>only the child method is being called at all.</strong> The parent has a paramater of a type object so I have tried to remove the paramater just to see if the function can be called at all the <strong>problem seems to me to be located in</strong> <code>(myChildMethod)="myParentMethod()"</code> yet I do not know why in another instance of the app I have managed to do this so I tried to copy it and check for any differences yet I the ones I saw such as spacing seem irrelevent. 
  <strong>I have marked the parts of the code that I believe are relevent to the issue as "Important"</strong> but I have posted the entire components in case the issue lies somewhere where I didn't know I should look.</p>
  
  <p><strong>The child shopping-edit-component HTML is :</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
          &lt;form &gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-5 form-group"&gt;
                      &lt;label for="name"&gt;Name&lt;/label&gt; 
                      &lt;input type="text" 
                      id="name" 
                      class="form-control"
                      #nameInput
                      &gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-2 form-group"&gt;
                      &lt;label for="amount"&gt;amount&lt;/label&gt;
                      &lt;input type="number" 
                      id="amount" 
                      class="form-control"
                      #amountInput&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-12"&gt;
                      &lt;!-- IMPORTANT --&gt;
                      &lt;button class="btn btn-success"
                          type="button"
                          (click)="addNew()"&gt;Add&lt;/button&gt;
                      &lt;button class="btn btn-danger" 
                      type="button"&gt;Delete&lt;/button&gt;
                      &lt;button class="btn btn-primary" type="button"&gt;Clear&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The child shopping-edit-component TS is :</strong> </p>
  
  <pre><code>import { Component, OnInit, Output, EventEmitter } from '@angular/core';
  
  import { Component, OnInit, ElementRef, Output, EventEmitter, ViewChild } from '@angular/core';
  import { Ingredient } from "../../shared/ingredient.model"
  
  @Component({
    selector: 'app-shopping-edit',
    templateUrl: './shopping-edit.component.html',
    styleUrls: ['./shopping-edit.component.css']
  })  
  export class ShoppingEditComponent implements OnInit {
  
    @ViewChild('nameInput', {static: false}) nameInputRef: ElementRef;
    @ViewChild('amountInput', {static: false}) amountInputRef: ElementRef;
  
    @Output() emitIngredient = new EventEmitter&lt;Ingredient&gt;(); 
    // IMPORTANT 
    addNew(nameEl: ElementRef, amountEl:  ElementRef){
      console.log("addNew");
      const newIngredient = new Ingredient(
         this.nameInputRef.nativeElement.value,
         this.amountInputRef.nativeElement.value
      );
  
          this.emitIngredient.emit(newIngredient);
    }
  
    constructor() { 
    }
  
    ngOnInit() {
  
    }
  
  }
  </code></pre>
  
  <p><strong>The parent shopping-list-component html is :</strong> </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-10"&gt;
          &lt;!-- IMPORTANT --&gt;
          &lt;app-shopping-edit  (addNew)= "addNewIngredient($event)"&gt;&lt;/app-shopping-edit&gt;
          &lt;hr&gt;
          &lt;ul class="list-group"&gt;
              &lt;a class="list-group-item" 
              style="cursor: pointer"
              *ngFor="let ingredient of ingredients"&gt;
              {{ ingredient.name }} , {{ ingredient.amount}}  
          &lt;/a&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>And the parent shopping-list-component ts is :</strong> </p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { Ingredient } from '../shared/ingredient.model';
  @Component({
    selector: 'app-shopping-list',
    templateUrl: './shopping-list.component.html',
    styleUrls: ['./shopping-list.component.css']
  })
  export class ShoppingListComponent implements OnInit {
  
    ingredients: Ingredient[] = [
      new Ingredient('Apples', 5),
      new Ingredient('Potato', 3)
  
    ];
    // IMPORTANT
    addNewIngredient(newIngredient: Ingredient){
      console.log("addNewIngredient");
      this.ingredients.push(newIngredient);
    }
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>I have succeed in one case to pass data between a child and the parent. 
  Child Header Component Html. All the code bellow works to the working example of the app. </p>
  
  <pre><code>    &lt;div class="navbar-default"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li (click)="onRecipeSelected('recipe')"&gt;&lt;a href="#"&gt;Recipes&lt;/a&gt;&lt;/li&gt;
                  &lt;li (click)="onListSelected('list')"&gt;&lt;a href="#"&gt;Shopping List&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt; 
  &lt;/div&gt;
  
  Child Header Component Ts 
  </code></pre>
  
  <p>import { Component, EventEmitter, Output } from '@angular/core';</p>
  
  <p>@Component({
      selector: 'app-header',
      templateUrl: "./header.component.html"
  })
  export class HeaderComponent {</p>
  
  <pre><code>    @Output() featureSelected = new EventEmitter&lt;string&gt;();
  
      onRecipeSelected(feature: string){
  
          this.featureSelected.emit(feature);
      }
  
      onListSelected(feature: string){
          this.featureSelected.emit(feature)
      }
  
  }
  </code></pre>
  
  <p>Parent App Component HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;div class="col-mid-12"&gt;
            &lt;app-recipes 
            *ngIf="loadedFeature === 'recipe'"&gt;&lt;/app-recipes&gt;
            &lt;app-shopping-list 
            *ngIf="loadedFeature === 'list'"&gt;&lt;/app-shopping-list&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Parent App Component Ts</p>
  
  <pre><code>    import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'RecipeApp';
    value = 10;
  
  
  
     loadedFeature = "recipe";
  
     onNavigate(feature: string){
  
       this.loadedFeature = feature;
     }
   }
  </code></pre>
  
  <p>This works fine. The parent component is being called the value being passed.</p>
  
  <p><strong>The app-module file is :</strong> </p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { HeaderComponent } from './header/header.component';
  import { RecipesComponent } from './recipes/recipes.component';
  import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
  import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
  import { ShoppingListComponent } from './shopping-list/shopping-list.component';
  import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';
  import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
  import { HighlighterDirective } from './highlighter/highlighter.directive';
  import { UnlessDirective } from './highlighter/unless.directive';
  import { DropdownDirective } from './shared/dropdown.directive';
  import { FormsModule } from '@angular/forms';  
  
  @NgModule({
    declarations: [
      AppComponent,
      HeaderComponent,
      RecipesComponent,
      RecipeListComponent,
      RecipeItemComponent,
      ShoppingListComponent,
      ShoppingEditComponent,
      RecipeDetailComponent,
      HighlighterDirective,
      UnlessDirective,
      DropdownDirective
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>