Angular2 eventEmitter, parent wont catch it

Question

Have used quite some time now, trying to find out why the parent does not receive the event and call the function.

Have a parent app (called AppComponent) and the child component (called HomeComponent)

HomeComponent.ts

@Component({
selector: 'home-component',
providers: [],
moduleId: module.id,
encapsulation: ViewEncapsulation.None,
templateUrl: 'home.component.html',
styleUrls: ['home.component.css'],
directives: [BannerComponent],
})

export class HomeComponent {

    @Output() selected = new EventEmitter<boolean>();

    products: Array<Product> = [];

    isProductSelected: boolean = false;

    constructor(public productService: ProductService) {


    }

    addProductToBasket(product: Product) {

        // Add product to basket.
        this.productService.addProduct(product);
        this.isProductSelected = true;

        if (this.isProductSelected) {
            console.log("Event has been emittet");
            this.selected.emit(this.isProductSelected);

            //Sets to default
            this.isProductSelected = false;
        }   

    }

}

I want to notify the parent component, when a product has been added to the basket. Have checked console, and can see that the line console.log("Event has been emittet"); is being called, so it should send the event.

AppComponent.html

<aside class="aside" [ngClass]="{'aside-active': isClassVisible }">
     <div class="basket_products" *ngFor="#product of products">


    </div>
</aside>

<router-outlet (selected)="selected($event)"></router-outlet>

Here I'm using the ngFor, after I have tried to use the (selected)="selected($event)" which should call the method in the AppComponent.ts

AppComponent.ts

 selected(selected: boolean) 
 {
    console.log("Event catches");

    if (selected) {

        // Get new data
        this.totalProducts = this.productService.getTotalProducts();
        this.totalprice = this.productService.getTotalProductPrice();
        this.shippingPrice = this.productService.getShippingPrice();
    }
}

Problem is that the method is never called.

Have tried to follow the step "Parent listens for child event" you see here Angluar2 interactions:

Does anyone here, sees what I have done wrong?

score 0 · Answer 1 · answered Jul 22 '16 at 16:50

0

This code doesn't really make sense

@Injectable()
export class HomeComponent {

    @Output() selected = new EventEmitter<boolean>();

Either it is a component, then it needs a @Component(...) decorator instead of the @Injectable() decorator.

If it is a service then it can't have an @Output()

If it actually is a component then you only can listen on this component

<home-component (selected)="selected($event)"></home-component>

not on an arbitrary element. This doesn't listen to the @Output() selected ...

 <div class="basket_products" *ngFor="#product of products" (selected)="selected($event)">

except when HomeComponent has a selector like selector: '.basket_products'

answered Jul 22 '16 at 16:50

Günter Zöchbauer

623,577
216
2,003
1,567

Its a component.. sorry for the confuse. – Mikkel Jul 22 '16 at 17:42
please remove the `@Injectable()` from the component. You only need it for services but not when other decorators like `@Component()`, `@Directive()`, `@Pipe()` are already there. These decorators include `@Injectable()` – Günter Zöchbauer Jul 22 '16 at 17:44
Okay, done that. I'm not really following what you are trying to tell me. Right now I'm using routes, and loading the home component like: – Mikkel Jul 22 '16 at 17:47
I try to tell you to fix issues with your code. It doesb't mean that thos definitely solves your problem but I don't want to waste my enetgy looking for subtle issues before the obvoous ones are fixed ;-) – Günter Zöchbauer Jul 22 '16 at 17:51
Have added and updated my code. As you see, I'm using the router-outlet, but the parent appComponent still can't catch the event. – Mikkel Jul 22 '16 at 17:53
You can only listen to the `(select)` from your `@Output() select ...` on ``. Events from outputs don't bubble. – Günter Zöchbauer Jul 22 '16 at 17:53
1

You also can't listen on ``. You need a shared service to communicate with components added by the router. – Günter Zöchbauer Jul 22 '16 at 17:55

Angular2 eventEmitter, parent wont catch it

1 Answers1