Angular Component Bindings Undefined

Question

I'm trying to put together my first angular component with ngRoute and so far I'm unable to get data to resolve. config:

.when('/myfirstcomponent', {
    template: '<myfirstcomponent claimKeys="$resolve.claimKeys"></myfirstcomponent>',
    resolve: {
        claimKeys: ['$http', function($http) {
            $http.get('server/claimkeys.json').then((response) => {
                var claimKeys = response.data.DATASET.TABLE;
                return claimKeys;
            });
        }]
    }
})

Component:

    .component('myfirstcomponent', {
        bindings: {
            'claimKeys': '@'
        },
        templateUrl: 'components/component.html',
        controller: [function() {
            this.$onInit = function() {
                var vm = this;
                console.log(vm.claimKeys);
            };


        }]

The html for the component simply has a p element with some random text that's all.

I can see when debugging that I am retrieving data but I cannot access it on the component controller...

EDIT: Thanks to the accepted answer below I have fixed my issue. It didn't have anything to do with an issue with asynchronous calls but with how I had defined my route and the component. See below code for fix. Thanks again.

Answer 1

some issues:

• as you said claimKeys within directive should be claim-keys
• its binding should be '<' (one way binding) or '=' (two way binding), but not '@' which just passes to directive a string found between quotes
• in your directive's controller var vm = this; should be above $onInit function and not inside it (the scopes are different)
• resolve.claimkeys should return $http's promise and not just call it
• claimKeys should be received by router's controller as injection and passed to its template

• controllerAs: '$resolve' should be used by router

  app.component('myfirstcomponent', {
    bindings: {
      'claimKeys': '='
    },
    template: 'components/component.html',
    controller: function() {
      var vm = this;
      this.$onInit = function() {            
        console.log(vm.claimKeys);
      };
    }
  });
  
  app.config(function ($stateProvider) {
    $stateProvider.state('myfirstcomponent', {
      url: '/myfirstcomponent',
      template: '<myfirstcomponent claim-keys="$resolve.claimKeys"></myfirstcomponent>',
      resolve: {
        claimKeys: ['$http', function($http) {
          return $http.get('claimkeys.json').then((response) => {
            return response.data.DATASET.TABLE;
          });
        }]
      },
      controller: function (claimKeys) {
        this.claimKeys = claimKeys;
      },
      controllerAs: '$resolve'
    })
  });
  

plunker: http://plnkr.co/edit/Nam4D9zGpHvdWaTCYHSL?p=preview, I used here .state and not .when for routing.