title: How to pass function callback from one component to another component in ng-forward
body: <p>I have created two components named as <code>Alert ticker</code> and <code>dropdown</code>.<br>
  These two are separate component.<br>
  So lets come to the point. <br>
  I am using this alert ticker in some other page named as Dashboard.<Br>
  so I am passing the <code>callback function</code> from dashboard page  to <code>ticker component</code> and <code>ticker component</code> pass this <code>callback function</code> to <code>dropdown component</code>.</p>
  
  <p><strong><em>Dashboard.html</em></strong></p>
  
  <pre><code>&lt;ticker [data]="data"
    poll-time="10"
    [filter-data]="filterData"
    (on-polling)="onTickerPoll($event);"
    (on-scroll)="onTickerScroll($event);"
    (on-selection)="onTickerFilterChange($event);"&gt;&lt;/ticker&gt;
  </code></pre>
  
  <p><strong><em>Ticker.html</em></strong></p>
  
  <pre><code>&lt;dropdown  [list]="ctrl.filterData" (on-selection)="ctrl.onSelection($event)" ddl-class="form-control"&gt;&lt;/dropdown&gt;
  </code></pre>
  
  <p><strong><em>Ticker.ts</em></strong></p>
  
  <pre><code>@Component({
      selector: 'od-ticker',
      directives: [DropdownComponent],
      templateUrl: '/app/components/ticker/ticker.html'
  })
  
  export class TickerComponent {
      @Input() data;
      @Output() onSelection: EventEmitter &lt; string &gt; = new EventEmitter();
  }
  </code></pre>
  
  <p>But I am unable to do this .
  Please advice.</p>