Pass resolve parameter to angular1 component in UI Router

Question

I am trying to pass my resolve parameters to angular one component using ui router. My UIRouter configuration is as below :-

.state(memberConstants.memberMVLicense, {
            url: "/mvlicense",
            template: '<member-mvlicense member-id="$resolve.memberId" members="$resolve.members"></member-mvlicense>',
            resolve: {
                memberId: ["$stateParams", function ($stateParams) {
                    return $stateParams.memberId;
                }],
                members: ["$stateParams", "$q", "factory.membersMVLicenses",
                    function ($stateParams: ng.ui.IStateParamsService, $q: ng.IQService,
                        membersMVLicensesService: data.member.IMembersMVLicensesService) {
                        var deferred = $q.defer();
                        membersMVLicensesService.getByMemberId($stateParams["memberId"]).then((response) => {
                            // response is not null and I got some data for sure
                            deferred.resolve(response);
                         });
                        return deferred.promise;
                }]
            }
  })

In my component i can see memberId while doing console log but members is always undefined when doing console.log. I am pretty sure that in my route resolve I am not passing it properly but I can't seems to get it work. I an image below as you can see one console.log stamement priniting the number and one console.log printing undefined. Any help will be really appreciated

module app.member {

    class MemberMvlicenseGrid implements ng.IComponentOptions {
        public controller: any;
        public template: string;
        public templateUrl: string;
        public transclude: boolean;
        public controllerAs: string;
        public bindings: { [boundProperty: string]: string };
        constructor() {

            this.controller = MemberMVLicenseGridController;
            this.templateUrl = "app/member/member-mvlicense-grid.html";
            this.transclude = false;
            this.controllerAs = "vm";
            this.bindings = {
                "memberId": "<",
                "members": "<"
            };
        }
    }

 class MemberMVLicenseGridController implements ng.IController {

        public memberId: string;
        public members: model.member.IMembersMVLicensesResult[];

        public $onInit(): void {
           console.log(this.memberId);;
           console.log(this.members);
        }
 }
  angular.module("app.member").component("memberMvlicenseGrid", new                  MemberMvlicenseGrid());
}

Answer 1

As far as I can see from your devtools screenshot, component memberMvlicenseGrid is not passed any members attribute, only memberId passed:

<member-mvlicense-grid member-id="vm.memberId" class="...">

As you log this.members in its controller, it's expected you get undefined.

Most likely you want to adjust template for memberMvlicense component to be

<member-mvlicense-grid member-id="vm.memberId" members="vm.members">