How to pass parameter from one component to another

Question

I have some components, which together form my menu. I'm wanting to get a parameter in the topmost component, and use it in the lower components.

I want to pass the 'app-rest' value to my component.

angular.module('app').component('application', {
        controller: applicationController,
        template: `
        <cp-layout 
            config="$ctrl.config" 
            menu="$ctrl.menu" 
            clientId="$ctrl.clientId"
            logout="$ctrl.logout()">
            <div ui-view class="content-wrapper ng-scope ng-fadeInRight"></div>
        </cp-layout>
        `
    });

 applicationController.$inject = [ '$window', '$http', 'MensagemService', '$filter', 'Siseg' ];
    function applicationController($window, $http, MensagemService, $filter, Siseg) {
        const vm = this;

        vm.$onInit = function() {
          vm.clientId = 'app-rest';
}

this is cp-layout:

    (function() {
        'use strict';

        angular.module('cp.layout', ['cp.navbar', 'cp.sidebar'])

        .component('cpLayout', {
            bindings : {
                config: '<',
                logout: '&?',
                menu: '<?',
                menuFile: '<?',
                clientId: '@'
            },
            replace: true,
            transclude: true,
            template : `
            <div data-ng-class="{ 'layout-fixed' : $ctrl.config.layout.isFixed, 'aside-collapsed' : $ctrl.config.layout.isCollapsed, 'layout-boxed' : $ctrl.config.layout.isBoxed, 'layout-fs': $ctrl.config.layout.useFullLayout, 'layout-h': $ctrl.config.layout.horizontal, 'aside-float': $ctrl.config.layout.isFloat,'aside-toggled': $ctrl.config.layout.asideToggled}">

   <cp-navbar config="$ctrl.config" logout="$ctrl.logout()"></cp-navbar>

        {{$ctrl.clientId}} / Nothing is printed here.
                <cp-sidebar class="aside lateral-sidebar" config="$ctrl.config" menu="$ctrl.menu" menu-file="$ctrl.menuFile" clientId="$ctrl.clientId"></cp-sidebar>

                <div class="content-layer m-b-1">
                    <ng-transclude></ng-transclude>
                </div>
            </div>
            `
        });

    })();

Answer 1

Use kebab-case in the template:

angular.module('app').component('application', {
    controller: applicationController,
    template: `
    <cp-layout 
        config="$ctrl.config" 
        menu="$ctrl.menu" 
        ̶c̶l̶i̶e̶n̶t̶I̶d̶=̶"̶$̶c̶t̶r̶l̶.̶c̶l̶i̶e̶n̶t̶I̶d̶"̶
        client-id="$ctrl.clientId"
        logout="$ctrl.logout()">
        <div ui-view class="content-wrapper ng-scope ng-fadeInRight"></div>
    </cp-layout>
    `
});

And use one-way < binding in the component:

app.component('cpLayout', {
    bindings : {
        config: '<',
        logout: '&?',
        menu: '<?',
        menuFile: '<?',
        ̶c̶l̶i̶e̶n̶t̶I̶d̶:̶ ̶'̶@̶'̶
        clientId: '<'
    },

For more information, see AngularJS Developer Guide - Component-based application architecture.