title: Angular2 (Typescript) directive not showing information passed to it
body: <p>I am currently trying to incorporate a category structure into a menu for an application I am building. I have a service which calls the categories from an API box and this is all working fine and I have had the results returning and showing correctly before implementing this new functionality. Nothing is showing for me at the moment and there is no error in the console. </p>
  
  <p>Here is my app.component.ts</p>
  
  <pre><code>import { Component, OnInit }       from 'angular2/core';
  import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
  import { ProductComponent } from './components/product.component'
  
  // Services
  import { ProductService }  from './services/product.service';
  import { CategoryService } from './services/category.service';
  
  // Classes
  import { Product } from './classes/Product';
  import { Category } from './classes/Category';
  import {serializeXmb} from "angular2/i18n";
  
  // Directives
  import { CategoryTree } from './directives/category-tree';
  
  @Component({
      selector: 'product-display',
  
      templateUrl:'./app/views/category-view.html',
  
      directives: [
          ROUTER_DIRECTIVES,
          ProductComponent,
          CategoryTree
      ],
      providers: [
          ROUTER_PROVIDERS,
          ProductService,
          CategoryService
      ]
  })
  
  @RouteConfig([
      {
          path : '/dashboard',
          name : 'Product',
          component : ProductComponent,
          useAsDefault : true
      }
  ])
  
  export class AppComponent {
      constructor(private _productService: ProductService, private _categoryService: CategoryService) {}
  
      title = 'Product Viewer';
      contentLoaded = false;
      categories = [];
      selectedCategory = null;
      selectedProduct = Product;
      products = [];
      APIError = [];
  
      getProducts() {
          this._productService.getProducts()
              .subscribe(
                  products =&gt; {this.products = products},
                  error    =&gt; {this.APIError = error},
                  ()       =&gt; this.contentLoaded = true
              );
      }
      getCategories() {
          this._categoryService.getCategories({
              order           : 'asc',
              order_by        : 'name',
              sub_cats        : true,
              group_by_parent : true
          })
              .subscribe(
                  categories =&gt; {this.categories = categories},
                  error      =&gt; {this.APIError = error},
                  ()         =&gt; this.contentLoaded = true
              );
      }
      selectCategory(category: Category) {
          this.selectedCategory = category
      }
      ngOnInit() {
          this.getProducts();
          this.getCategories();
      }
  }
  </code></pre>
  
  <p>As you can see, I am calling a function in the CategoryService service which returns all the categories I want to display on the page. As this is an aSync call I use the getCategories function to subscribe the Observer when it is returned. </p>
  
  <p>Here is the category-view-html which is called by the component and is used to display the component:</p>
  
  <pre><code>&lt;div id='left-menu-wrapper'&gt;
      &lt;div id='left-menu'&gt;
          &lt;h1&gt;{{title}}&lt;/h1&gt;
          &lt;h2&gt;Categories&lt;/h2&gt;
          &lt;category-tree [categories]="categories"&gt;&lt;/category-tree&gt;
          &lt;div *ngIf="selectedCategory"&gt;
              {{selectedCategory.name}}
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div *ngIf="!contentLoaded" class='spinner'&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;product-view [product]="selectedProduct"&gt;&lt;/product-view&gt;
  </code></pre>
  
  <p>Within here you can see the directive I am attempting to call 'category-tree'. I have also included this in the app.component.ts directives property which is called CategoryTree. I pass the categories I have returned from the service using the [categories]="categories" line.</p>
  
  <p>Here is the CategoryTree directive I am importing into app.component.ts:</p>
  
  <pre><code>import { Component, Input } from 'angular2/core';
  
  @Component({
      selector: 'category-tree',
      templateUrl: './app/views/category-tree.html',
      directives: [CategoryTree]
  })
  
  export class CategoryTree {
      @Input categories;
  }
  </code></pre>
  
  <p>As you can see I define the selector and include a template to be used. I then export the directive an instruct the categories property to be an accepted input from app.component.ts. Here is the template (not yet finished). </p>
  
  <pre><code>&lt;ul class="categories"&gt;
      &lt;li *ngFor="#category of categories"&gt;
          &lt;span (click)="selectCategory(category)" [class.selected]="category === selectedCategory"&gt;{{category.name}}&lt;/span&gt;
          &lt;ul *ngIf="category.sub_categories.length" class='sub-category' data-cat="category.id"&gt;
              &lt;li *ngFor="#sub_category of category.sub_categories"&gt;
                  &lt;span (click)="selectCategory(sub_category)" [class.selected]="sub_category === selectedCategory"&gt;{{sub_category.name}}&lt;/span&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>For some reason the categories don't seem to be showing and the lack of an error in the console leads me to believe that this may be because the directive is being included before the categories are returned from the service? I thought this wouldn't be an issue as the directive was subscribed to the Observable and would update itself accordingly when the Observable changed?</p>
  
  <p>Can anyone see where I may be going wrong here?</p>
  
  <p>Thanks</p>