title: Angular 2 final - Passing Filter Data from Filter.Component to App.component
body: <p>I have created a simple filtering app that works, when I have the filtering and the listing in the same component (app.ts): <a href="http://plnkr.co/0eEIJg5uzL6KsI70wWsC" rel="nofollow">http://plnkr.co/0eEIJg5uzL6KsI70wWsC</a></p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
    &lt;select name="selectmake" [(ngModel)]="makeListFilter" (ngModelChange)="selectMake()"&gt;
      &lt;option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar"&gt;{{muscleCar.name}}&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;select name="selectmodel" [(ngModel)]="modelListFilter"&gt;
      &lt;option *ngFor="let m of makeListFilter?.models" [ngValue]="m.model"&gt;{{m['model']}}&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;button class="btn btn-default" type="submit" (click)="searchCars()"&gt;FILTER&lt;/button&gt;
  
    &lt;ul&gt;
      &lt;li *ngFor="let _car of _cars | makeFilter:makeSearch | modelFilter:modelSearch"&gt;
          &lt;h2&gt;{{_car.id}} {{_car.carMake}} {{_car.carModel}}&lt;/h2&gt;
      &lt;/li&gt;
    &lt;/ul&gt;`,
    providers: [ AppService ]
  })
  
  export class App implements OnInit {
    makeListFilter: Object[];
    modelListFilter: string = '';
  
    _cars: ICar[];
  
     constructor(private _appService: AppService) { }
  
    ngOnInit(): void {
      this._appService.getCars()
          .subscribe(_cars =&gt; this._cars = _cars);
    }
  
    selectMake() {
      if(this.modelListFilter) {
        this.modelListFilter = '';
      }
    }
    searchCars() {
      this.makeSearch = this.makeListFilter['name'];
      this.modelSearch = this.modelListFilter;
    }
  </code></pre>
  
  <p>What I would like to achieve is to move the filtering into its own component (filtering.component.ts) and pass the values of the select boxes back to the listing component (app.ts) using @Input and @Output functions appropriately.</p>
  
  <p>I've already separated the components here, but I cannot get the data passed to the listing component. (app.ts): <a href="http://plnkr.co/1ZEf1efXOBysGndOnKM5" rel="nofollow">http://plnkr.co/1ZEf1efXOBysGndOnKM5</a></p>
  
  <p>Thanks in advance.</p>