Ravi Ravi - 1 month ago 20
TypeScript Question

Event not reaching the parent component from child component - Angular 2

I am trying to build a very simple app and using data/event binding to transfer information between the component - I am following udemy course to learn angular and a part of that course is implementing the following :

recipe-item ----child of-----> recipe-list -----child of -----> recipes


  • recipe-item captures the click event which is bound to OnSelected() in recipe-list .

  • recipe-list emits a custom event recipeSelected but is not caught i.e a function SetSelectedRecipe in recipes-component which is bound to the event is not getting called.



recipes-component.html

<div class="row">
<div class="col-md-5">
<rb-recipe-list (recipeSelected) = "SetSelectedRecipe($event)"></rb-recipe-list>
</div>
<div class="col-md-7">
<rb-recipe-detail [selectedRecipe]="selectedRecipe" ></rb-recipe-detail>
</div>




recipes-component.ts

import { Component, OnInit , Input, OnChanges } from '@angular/core';
import { Recipe } from './recipe'

@Component({
selector: 'rb-recipes',
templateUrl: './recipes.component.html'
})
export class RecipesComponent implements OnInit, OnChanges{
@Input() selectedRecipe: Recipe;
constructor() { }

ngOnInit() {
}

ngOnChanges() {
}

SetSelectedRecipe(recipe : Recipe)
{
alert("The event binding is working") // not seeing this alert
this.selectedRecipe = recipe;
}

}


recipe-list-component.html

<div class="row">
<div class="col-xs-12">
<a class="btn btn-success">New Recipe</a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<ul class="list-group">
<rb-recipe-item [recipe] ="recipe" (click)="OnSelected(recipe)"></rb-recipe-item>
</ul>
</div>
</div>


recipe-list-component.ts

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

@Component({
selector: 'rb-recipe-list',
templateUrl: './recipe-list.component.html'
})
export class RecipeListComponent implements OnInit {

recipes: Recipe[] = []
recipe = new Recipe('Test Recipe', 'This description is extremely deceptive ', 'http://www.goodtherapy.org/admin/includes/ckfinder/userfiles/images/empty-seaside-bench.jpg')

@Output() recipeSelected : EventEmitter<Recipe> = new EventEmitter<Recipe>()

constructor() { }

ngOnInit() {

}

OnSelected(recipe: Recipe) {
console.log("recipe clicked" + this.recipe.name) // seeing this log
this.recipeSelected.emit(recipe);

}
}


I am seeing the log for event click on recipe-item i.e OnSelected(recipe: Recipe) is getting called in recipe-list-component

I am not seeing the alert in recipes-component.

Any ideas?? LEt me know if you have any questions about my question?

Thanks

EDIT : I figured out the problem :

There was an issue with app.module.ts I added components to bootstrap which i shouldn't have.
So I changed the file from

@NgModule({
declarations: [
AppComponent,
HeaderComponent,
RecipesComponent,
RecipeDetailComponent,
RecipeListComponent,
RecipeItemComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent,
HeaderComponent,
RecipesComponent,
RecipeDetailComponent,
RecipeListComponent,
RecipeItemComponent]
})
export class AppModule { }


to

@NgModule({
declarations: [
AppComponent,
HeaderComponent,
RecipesComponent,
RecipeDetailComponent,
RecipeListComponent,
RecipeItemComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


and the events are getting propagated. However I do not know why this change solves the problem.

Answer

That took a minute to setup and run, but without your full code, I can't find your issue.

No Code to proved, see sample

I re-created a Plnkr from what you provided here, and you can see it working there: https://plnkr.co/edit/5LzQQqRWCtMNf6eupO9X?p=preview.

Comments