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

Question

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

Solution 1

You should use Pipe and Observables.

Here is a simple example for your problem:

Every time when an User is selecting a value the change event is fired. With the event you can easily get the value and pass it to an observable stream.

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

Provide the Observable to your myCustomFilter Pipe and subscribe to the observable via the async pipe provided by angular.

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

AppComponent

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 { }

Solution 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's your plunk https://plnkr.co/edit/f4jHaJi3LDxyt91X3X2H?p=preview

Solution 3

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

It worked for only after adding ngIf in the main component as

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

It was strange to me. thanks to @trichetriche his plunker I saw and i noticed this.

Solution 4

Look at this post.It is clearly mentioned about the steps.

You can call pipe filter for onchange event.

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

View more solutions