Search code examples
angularjsangularjs-components

child components communications in angularjs 1.5.x

I have an angularjs component with 2 child components. I want to call a function in product-list component when on-added output triggers in new-product component.

<h1>{{vm.store.title}}</h1>
<product-list store-id="vm.storeId"></product-list>
<new-product store-id="vm.store.id" on-added="$ctrl.productAdded()"></new-product>

The productAdded method is in product-list component and re-initiate the product list.

Any help will be appreciated.

Solution

  • In this case I think would be better using a common parent component and make the product-list a dumb component which receive a list and display it only. So that the parent take care of this management this list and the product-list take care of rendering the list. This, allows you to handle the state from a parent component, as new-product is dumb as well, it'll emmit changes to the parent and propagate the new list state to the child (a.k.a. product-list).

    For example, consider using something similar to this raw tree of components:

    <product-manager store-id="$ctrl.storeId">
    <h1>{{vm.store.title}}</h1>
    <product-list products="vm.store.products"></product-list>
    <new-product on-added="vm.productAdded(product)"></new-product>
</product-manager>

    Or perhaps:

    <products-page store="$ctrl.store">
    <h1>{{ $ctrl.store.title }}</h1>
    <product-list products="$ctrl.store.products"></product-list>
    <product-form on-save="$ctrl.productAdded(product)"></product-form>
</products-page>

    The previous examples are raw representation of a component tree and its templates, in a real situation you'd have <products-page store="$ctrl.store"></products-page> because it's internal nodes would be defined by its template on the component definition.