Angular 2 - Filtering a table based on a drop-down list (both are different components)

Question

I am trying to filter the data table component based on the value passed by the drop down component. I use the @Input() attribute, but the selected dropdown data is not passed to the data table component. If it is passed, I can filter the table using the following logic:

I don’t know where I am doing wrong here.

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

Full implementation can be found here.

Answer 1

I fixed your problem in this plunker . Now the data is transferred and the data changes according to the value you select.

Feel free to look around and look for explanations on the Angular website.

 // Mandatory code with plunkr 

Answer 2

You can use ngOnChanges

 import {Component,Input, OnChanges} from '@angular/core'; export class TableDataList implements OnChanges { ngOnChanges(changes) { console.log(changes) if (changes.selected.currentValue) { console.log(changes.selected.currentValue) this.selectedData = this.someData.filter(x => { console.log(x.value, changes.selected.currentValue) return x.value === changes.selected.currentValue }) console.log(this.selectedData) } } 

Here is your plunger https://plnkr.co/edit/f4jHaJi3LDxyt91X3X2H?p=preview

Answer 3

You must use Pipes and Observations.

Here is a simple example of your problem:

Each time the user selects a value, a change event occurs. Using an event, you can easily get the value and pass it to the observed thread.

You can access the observable from your SelectDataComponent to your table component (AppComponent) using the ref element (#)

Monitor your myCustomFilter and subscribe to the monitored via the asynchronous channel provided by angular.

*ngFor="let data of someData | myCustomFilter: (selectDataComp.selectedValues$ | async)

Appcompponent

 import {Component} from '@angular/core'; @Component({ selector: 'app-root', template: ` <app-select-data #selectDataComp></app-select-data> <table> <th>Value</th> <th>id</th> <tr *ngFor="let data of someData | myCustomFilter: (selectDataComp.selectedValues$ | async)"> <td>{{data?.value}}</td> <td>{{data?.id}}</td> </tr> </table> `, styles: [] }) export class AppComponent { someData = [ { value: 'ABC', id: '123'}, { value: 'ABC', id: '12'}, { value: 'DEF', id: '23'}, { value: 'DEF', id: '1233'}, { value: 'ABC', id: '13'}, { value: 'DEF', id: '1'}, { value: 'DEF', id: '34'}, { value: 'ABC', id: '56'}, { value: 'ABC', id: '13'}, { value: 'DEF', id: '123'}, { value: 'HIJ', id: '113'} ]; } 

SelectDataComponent

 import { Component } from '@angular/core'; import {Subject} from 'rxjs/Subject'; @Component({ selector: 'app-select-data', template: ` <div> <select (change)="onChange($event.target.value)"> <option value="">--please select--</option> <option *ngFor="let option of options" [value]="option"> {{ option }} </option> </select> </div> `, styles: [] }) export class SelectDataComponent { public selectedValues$: Subject<string> = new Subject(); public options = ['ABC', 'DEF']; onChange(selectedValue) { this.selectedValues$.next(selectedValue); } } 

myCustomFilter

 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'myCustomFilter' }) export class MyCustomFilterPipe implements PipeTransform { transform(data: any, toFilter: string): any { if (!toFilter) { return data; } return data.filter(d => d.value === toFilter); } } 

Appmodule

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {BrowserAnimationsModule} from '@angular/platform- browser/animations'; import { SelectDataComponent } from './select-data.component'; import { MyCustomFilterPipe } from './my-custom-filter.pipe'; @NgModule({ declarations: [ AppComponent, SelectDataComponent, MyCustomFilterPipe, ], imports: [ BrowserModule, BrowserAnimationsModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

Answer 4

I worked on the problem, even after adding ngOnChanges to the subcomponent, this did not work for me in plunker.

It only worked after adding ngIf in the main component as

 <table-data-list *ngIf="selected" [selected]="selected"><table-data-list> 

It was weird for me. Thanks to @trichetriche his plunker I saw, and I noticed this.

Answer 5

Take a look at this post. It clearly states the steps.

You can call the pipe filter for the onchange event.

http://genuinescope.blogspot.com/2017/09/angular2-custom-filter-search-pipe-for.html