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?

Answer 1

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'