title: Angular pass callback function to child component as @Input similar to AngularJS way
body: <p>AngularJS has the &amp; parameters where you could pass a callback to a directive (e.g <a href="https://stackoverflow.com/questions/31440366/pass-callback-function-to-directive">AngularJS way of callbacks</a>. Is it possible to pass a callback as an <code>@Input</code> for an Angular Component (something like below)? If not what would be the closest thing to what AngularJS does?</p>
  
  <pre><code>@Component({
      selector: 'suggestion-menu',
      providers: [SuggestService],
      template: `
      &lt;div (mousedown)="suggestionWasClicked(suggestion)"&gt;
      &lt;/div&gt;`,
      changeDetection: ChangeDetectionStrategy.Default
  })
  export class SuggestionMenuComponent {
      @Input() callback: Function;
  
      suggestionWasClicked(clickedEntry: SomeModel): void {
          this.callback(clickedEntry, this.query);
      }
  }
  
  
  &lt;suggestion-menu callback="insertSuggestion"&gt;
  &lt;/suggestion-menu&gt;
  </code></pre>