passing data from same level components in AngularJS

Question

I have a question on how we can pass data from one component to another without $scope or $rootScope but something similar to Angular (2/4). Let's assume that I have three components:

rootComponent: Entry point of the application
phoneListComponent: Display list of phones
phoneDetailComponent: Display the details of the selected phone

rootComponent source code:

'use strict';

angular.module('phonecatApp').
component('appRoot', {
    templateUrl: 'app-root.template.html',
    controller: [
        function appRootController(){
            var self = this;
        }
    ]
});

phoneListComponent source code:

'use strict';

// Register `phoneList` component, along with its associated controller and template
angular.module('phoneList').component('phoneList', {
    //Note: the URL is relative to our 'index.html' file
    templateUrl: 'phone-list/phone-list.template.html',
    controller: [
        function PhoneListController() {
            var self = this;
            self.phones = [
                {
                    "name": "Huawei P9 lite",
                    "description": "This is one hell of a phone",
                    "price": "250€"
                },
                {
                    "name": "Samsung S8",
                    "description": "Great phone but really expensive",
                    "price": "700€"
                }
            ]

            self.select = function(phone){
                self.selected=phone;
            }

        }
    ]
});

phoneDetailComponent source code:

'use strict';

    angular.module('phoneDetail').
            component('phoneDetail', {
                templateUrl: 'phone-detail/phone-detail.template.html',
                bindings: {
                    selected: '<'
                },
                controller: [
                    function phoneDetailController(){
                        var self = this;
                    }
                ],
            });

You can see that each component is declared in its own module, and phoneList module and phoneDetail module are registered in phoneCatApp module.

Since components have their own isolated scopes, I can't pass the selected attribute from phoneList to phoneDetail. What are the possible solutions knowing that I seek loosely coupling and no $scope or $rootScope?

I already saw this answer here on StackOverflow but seems to me that my modules won't work if there's not a parent that orchestrate above them, which can be not always the case.

Thank you

You might want to define a service and inject it into both components. This way you can define common methods related to management of `phones` array. Alternatively, you could inject `$rootScope` and store `phones` as `$rootScope.phones`. — Jarek Kulikowski, Jul 30 '17 at 15:15

score 1 · Accepted Answer · answered Jul 30 '17 at 15:16

You could you use two strategies:

The first one is passing a callback to your child components (through bindings) from your root component so you will be aware when the value changed and then do what you need to do.
Another approach could be using an angular service which is a singleton so you can watch a specific value inside your controller and then do something when it changes.

In this case, I suggest the first one.

passing data from same level components in AngularJS

1 Answers1