title: Angular 2 - How does the directive give data to the host?
body: <p>I have what I think should be a pretty simply problem to solve in Angular 2, but I just can't find the right syntax. </p>
  
  <p>My goal is a directive that does the following:</p>
  
  <ol>
  <li>Accepts arbitrary data as value. E.g., <code>[my-data]="[1,2,3,4,5]"</code></li>
  <li>Processes this on change. E.g. <code>onChange() { return this.data.length = 55; }</code>.</li>
  <li>Sends this data to the host, and binds to a host property. </li>
  </ol>
  
  <p>I'm fine on 1), but a little lost on 2) and 3). So far I have something like: </p>
  
  <pre><code>@Directive({
    selector: ['ap-data'],
    host: {
      '(change)': 'onChange()'
    }
  })
  export class DataDirective {
  
    @Input('ap-data') data: any;
  
    @HostBinding('attr.ap-data') get dataSet() {
      return processData(this.data);
    }
  
    ...
  
  }
  
  @Component({
    selector: 'myComponent',
    directive: [DataDirective],
    template: `
     &lt;div [ap-data]="[1,2,3,4,5]"&gt;&lt;/div&gt;
    `
  })
  export class MyComponent {
  
    public data: any[];
  
    public dataSet: ProcessedDataType;
  
    ...
  
  }
  </code></pre>