title: Creating Link Component in Angular2
body: <p>Looking to create a wrapper component in Angular 2, similar to the way that <a href="https://github.com/react-bootstrap/react-bootstrap" rel="nofollow noreferrer">react-bootstrap</a> and other tools allow you to create wrapper components. Looking to be able to re-use the component so we don't have to repeat the structure every time.</p>
  
  <p>Essentially, I want to be able to re-use a component that has this rough structure:</p>
  
  <pre><code>'use strict';
  import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
  import {Component, Input} from 'angular2/core';
  
  @Component({
    selector: 'nav-item',
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS],
    template: `
    &lt;li&gt;
       &lt;a routerLink="&lt;SPECIFIED ROUTE&gt;"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    `,
  })
  
  export default class NavLink {
    public static $injector: Array&lt;string&gt; = [];
    @Input() to: string;
    constructor() {}
  }
  </code></pre>
  
  <p>And then </p>
  
  <pre><code>'use strict';
  
  import {Component} from 'angular2/core';
  import NavLink from './link.component';
  
  @Component({
    selector: 'Navbar',
    host: {'class': 'navbar'},
    directives: [NavLink],
    template: `
      &lt;div class="row"&gt;
        &lt;ul&gt;
          &lt;nav-item to="/Foo"&gt;
          &lt;/nav-item&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    `,
  })
  
  export default class Nav {
    constructor() {}
  }
  </code></pre>
  
  <p>I know routerLink expects an array specification, but I'm wondering what the angular2 way of passing data from a parent component to a child component is and then accessing that data within the child component. I know the @Input decorator lets you specify a property to pass in and then you can bind to that using [] in the parent component, but I'm not sure as to the best access method within a component :) </p>
  
  <p>I've tried: </p>
  
  <pre><code>&lt;a routerLink="{{ to }}"&gt;
  </code></pre>
  
  <p>But angular2 complains about not being able to <code>.forEach</code> over the expected array specification (which makes sense). </p>
  
  <pre><code>EXCEPTION: TypeError: linkParams.forEach is not a function in [{{ to }} in NavLink@2:8]
  </code></pre>
  
  <p>I'm just not sure of the way that passing data into a bound property works; I come from more of a React background, so things are passed via <code>props</code> and you can inspect the type and it's pretty much just normal JavaScript object-passing. </p>
  
  <p>What's the best way access that bound property and/or is this an antipattern I'm trying to implement?</p>