Angular 2-Filtering table based on select dropdown (both are different components)

javascript angular ngfor
forgottofly picture forgottofly · Sep 7, 2017 · Viewed 9.5k times · Source

I'm trying to filter data table component based on the value passed by select drop down component.I'm using @Input() attribute but the selected dropdown data is not been passed to data table component. If it is passed I will be able to filter table using the below logic:

Not sure where I'm doing wrong here.

onChangeDetected(val){ 
  this.someData= this.someData.filter(x => x.value== val)
}

Full implementation can be found here

Answer

user4676340 picture user4676340 · Sep 7, 2017

I've corrected your problem in this plunker. Now the data is passed and the data changes according to your selected value.

Feel free to look around and look for explanation on Angular's website. 

// Mandatory code with plunkr

Related questions

Orderby with *ngFor array

I made the following structure in my json file with Firebase Real Time Database to work on Composer and his Compositions: I have the following service that give me the data of one composer with his composition getComposerWithKey(key: string): …

Read More
Angular 2: Callback when ngFor has finished

In Angular 1 I have written a custom directive ("repeater-ready") to use with ng-repeat to invoke a callback method when the iteration has been completed: if ($scope.$last === true) { $timeout(() => { $scope.$parent.$parent.$eval(someCallbackMethod); }); } Usage in markup: <li …

Read More
How to iterate through an Object attributes in Angular 2

Here's my object (It has n number of dynamic keys. I've only shown two in the example below) let obj = { abc:["some text", "some more text"], xyz:["more text", "what do you think?", "I'm tired now"] } Here's my attempt to …

Read More