title: How is possible to get the bindings value in component controller with Angular 1.5 and Typescript?
body: <p>I would like to create a left hand menu component which displays different menu structure depending on the string it gets via binding.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;left-hand-menu-component module='abc'&gt;&lt;/left-hand-menu-component&gt;
  </code></pre>
  
  <p>Then it shows only the abc module's menu structure. In order to achieve that the component controller must be able to work with the data comes trough bindings and make the necessary service calls.</p>
  
  <p>I have been googling around for a while how to achieve this and I have find <a href="https://medium.com/@acomitevski/how-to-write-angular-1-5-components-with-injected-services-in-typescript-d08cb595dad4#.2f5fhqy5a" rel="nofollow noreferrer">this</a> and <a href="http://almerosteyn.com/2016/02/angular15-component-typescript" rel="nofollow noreferrer">this</a> posts and <a href="https://stackoverflow.com/questions/35451652/what-is-best-practice-to-create-an-angularjs-1-5-component-in-typescript">this</a> posts. The example available at Angular documentation is too simple.</p>
  
  <p>I have put together the example's code above and that part is missing when the controller can work with the value coming trough bindings.</p>
  
  <p>It is even possible? Or it is rather a directive than a component?</p>
  
  <p>Do you know example where it is displayed, blog entry or any source?</p>
  
  <p>The two console.log in the controller constructor write out 'undefined' as result.</p>
  
  <p>Component:
  </p>
  
  <pre><code>module qa.gonogo {
      "use strict";
  
      export class LeftHandMenuComponent implements ng.IComponentOptions {
  
  
          public transclude: boolean = false;
          public controller: Function = LeftHandMenuComponentController;
          public controllerAs: string = "vm";
          public templateUrl: string = "app/content/lefthandmenu/leftHandMenuComponentTemplate.html";
          public bindings: any;
  
          constructor() {
              this.bindings = {
                  module: '&lt;'
              }
          }
      }
  
      angular
          .module("goNoGo")
          .component("gonogoLefthandmenuComponent", new LeftHandMenuComponent());
  
  }
  </code></pre>
  
  <p>Controller:
  </p>
  
  <pre><code>export class LeftHandMenuComponentController implements ILeftHandMenuComponentController {
  
          menuStructure: IMenuStructure[];
          closeOthers: boolean = true;
  
          static $inject = [];
  
          constructor(public module: string) {
              console.log('binding', module);
              console.log('binding2', this.module);
          }
  
          public $onInit = (): void =&gt; {
              this.populateMenuStructure();
          }
  </code></pre>
  
  <p>Route.
  </p>
  
  <pre><code>$stateProvider
              .state("bfts",
                  &lt;ng.ui.IState&gt;{
                      url: "/bfts",
                      views: &lt;any&gt;{
                          "leftHandMenu": &lt;ng.ui.IState&gt;{
                              template: "&lt;gonogo-lefthandmenu-component module='bfts'&gt;&lt;/gonogo-lefthandmenu-component&gt;"
                          },
                          "content": &lt;ng.ui.IState&gt;{
                              template: "bfts content"
                          }
                      }
                  });
  </code></pre>