A filtering app has been created successfully, but there is a desire to separate the filtering functionality into its own component (filtering.component.ts) and pass the selected values back to the listing component (app.ts) using @Input and @Output functions properly. The current setup where the filtering and listing are in the same component can be found here: 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;
}
The components have already been separated in this example, however, there seems to be an issue with passing data to the listing component. You can view the separation here: http://plnkr.co/1ZEf1efXOBysGndOnKM5
Any help or suggestions on how to resolve this issue would be greatly appreciated.