title: How to use custom directive on a custom component's host element
body: <p>I have a custom directive which should listen to <code>ngModelChange</code> of a custom component and add or remove items in an array.</p>
  
  <p>Here's the directive:</p>
  
  <pre><code>@Directive({
    selector: '[selectedItems]'
  })
  
  export class SelectedItemsDirective {
    @Input('ngModel') ngModel: boolean;
    @Input() mainNgModel: boolean;
    @Input() items: any[] = [];
    @Input() item: any;
    @Input() itemKey: string;
    @Output() itemsChange: EventEmitter&lt;any&gt; = new EventEmitter&lt;any&gt;();
  
    @HostListener('ngModelChange')
    modelChange() {
  
      const i: number = this.items.indexOf(this.item[this.itemKey]);
  
      if (i === -1 &amp;&amp; this.ngModel) {
        this.items.push();
      }
      else {
        this.items.splice(i, 1);
      }
  
      this.itemsChange.emit(this.items);
    }
  }
  </code></pre>
  
  <p>And then it'll be used like this:</p>
  
  <pre><code>&lt;checkbox [(ngModel)]="event.isChecked" [(selectedItems)]="selectedEvents" [items]="events" [item]="event"&gt;&lt;/checkbox&gt;
  </code></pre>
  
  <p>But this doesn't work because:</p>
  
  <pre><code>Can't bind to 'selectedItems' since it isn't a known property of 'checkbox'.
  </code></pre>
  
  <p>And I'm guessing that the same will occur for the directive's input properties as well. </p>
  
  <p>I can't seem to google my way to a solution that's remotely close to what I'm trying to achieve. I've declared and exported the directive in the <code>SharedModule</code> which I've then imported into the checkbox's module.</p>
  
  <p>What more do I have to do in order for this to work?</p>