CODEWITHSUNDEEP
htmlangularjsdata-bindingangular-components
alexdriedger
alexdriedger

Reputation: 3034

AngularJS - Pass Value to Component

I am trying to pass a value from one component into another component.

Location List

<div uib-accordion-group class="panel-default" heading="{{location.name}}" ng-repeat="location in $ctrl.locations">
  <p>This is from location list: {{location.id}}</p>
  <bike-list locationId="{{location.id}}"></bike-list>
</div>

Output:

This is from location list: 1

Location id is:

Bike List

bike-list.component.js

angular
.module('bikeList')
.component('bikeList', {
    templateUrl: 'bike-list/bike-list.template.html',
    controller: ['$rootScope', function ($rootScope) {
        var self = this;
        self.bikes = $rootScope.currentBikes;

    }],
    bindings: {
        locationId: '<'
    }
});

bike-list.template.html

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>Location id is : {{$ctrl.locationId}}</p>
</body>

Output:

Location id is:

Question

Upvotes: 8

Views: 15598

Answers (2)

alexdriedger
alexdriedger

Reputation: 3034

I changed <bike-list locationId="{{location.id}}"></bike-list> to

<bike-list location-id="location.id"></bike-list>

Which solved my problem!

Output:

This is from location list: 1

Location id is: 1

Upvotes: 6

fernando
fernando

Reputation: 717

Instead <bike-list locationId="{{location.id}}"></bike-list> change it to 

<bike-list location-id="$ctrl.location.id"></bike-list>

angular normalize attrs and you can read more about it in here

working example can be found in here

Upvotes: 1

Related Questions