Angular 2 final - Passing Filter Data from Filter.Component to App.component

Question

I have created a simple filtering app that works, when I have the filtering and the listing in the same component (app.ts): http://plnkr.co/0eEIJg5uzL6KsI70wWsC

@Component({
  selector: 'my-app',
  template: `
  <select name="selectmake" [(ngModel)]="makeListFilter" (ngModelChange)="selectMake()">
    <option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar">{{muscleCar.name}}</option>
  </select>

  <select name="selectmodel" [(ngModel)]="modelListFilter">
    <option *ngFor="let m of makeListFilter?.models" [ngValue]="m.model">{{m['model']}}</option>
  </select>

  <button class="btn btn-default" type="submit" (click)="searchCars()">FILTER</button>

  <ul>
    <li *ngFor="let _car of _cars | makeFilter:makeSearch | modelFilter:modelSearch">
        <h2>{{_car.id}} {{_car.carMake}} {{_car.carModel}}</h2>
    </li>
  </ul>`,
  providers: [ AppService ]
})

export class App implements OnInit {
  makeListFilter: Object[];
  modelListFilter: string = '';

  _cars: ICar[];

   constructor(private _appService: AppService) { }

  ngOnInit(): void {
    this._appService.getCars()
        .subscribe(_cars => this._cars = _cars);
  }

  selectMake() {
    if(this.modelListFilter) {
      this.modelListFilter = '';
    }
  }
  searchCars() {
    this.makeSearch = this.makeListFilter['name'];
    this.modelSearch = this.modelListFilter;
  }

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.

I've already separated the components here, but I cannot get the data passed to the listing component. (app.ts): http://plnkr.co/1ZEf1efXOBysGndOnKM5

Thanks in advance.

Answer 1

you have to output when you click on the button,

See this Plunker

filter component

export class FilterComponent {
  @Output() filtercars: EventEmitter<{make: string, model: string}> = new EventEmitter<{make: string, model: string}>();

  makeListFilter: Object[];
  modelListFilter: string = '';

  constructor(private _appService: AppService) {}

  selectMake() {
    if(this.modelListFilter) {
      this.modelListFilter = '';
    }
  }

  searchCars() {
    this.filtercars.emit({make: this.makeListFilter['name'],model: this.modelListFilter});
  }

  muscleCars = [
    {
      id: 1, name: "Chevrolet", models: [
        { model: "Camaro" },
        { model: "Corvette" }
      ]
    },
    {
      id: 2, name: "Dodge", models: [
        { model: "Challenger" },
        { model: "Charger" },
        { model: "Viper" }
      ]
    },
    {
      id: 3, name: "Ford", models: [
        { model: "GT" },
        { model: "Mustang" }
      ]
    }
  ];
}

app component

@Component({
  selector: 'my-app',
  template: `
  <filter-app (filtercars)='filtercars($event)'></filter-app>
  <ul>
    <li *ngFor="let _car of _cars | makeFilter:makeSearch | modelFilter:modelSearch">
        <h2>{{_car.id}} {{_car.carMake}} {{_car.carModel}}</h2>
    </li>
  </ul>`,
  providers: [ AppService ]
})
export class App implements OnInit {

  @Input() makeSearch: Object[];
  @Input() modelSearch: string = '';

  _cars: ICar[];

  constructor(private _appService: AppService) { }

  ngOnInit(): void {
    this._appService.getCars()
        .subscribe(_cars => this._cars = _cars);
  }

  filtercars(filter){
     this.makeSearch = filter.make;
    this.modelSearch = filter.model;
  }
}

Hope this helps!!