angularcomponentspipes-filters

Angular2 chained selects


I need to be able to chain multiple selects together, so that the preceding select provides the filter for the current select, and so on. (e.g. Select 1's value provides the value for the pipe filter for Select 2, etc.).

Does anyone have a working example of this? Going through the various examples for Pipes, Input, Output and EventEmitter does not seem to have given me enough insight, but I am probably over thinking it.

import {Pipe} from 'angular2/core';

@Pipe({
  name:'secondSelector'
})
export class SecondSelectorPipe{
  transform(value,[parent]){
    return value.filter((item)=>item.parent === parent.code);
  }
}

This shows kind of what I am trying to do... http://plnkr.co/edit/HQFVts77PrOrWxZWnPSA?p=preview


Solution

  • You have two issues in your plunker.

    The changed option element:

    <option *ngFor="#val of values" [value]="val.code">{{val.title}}</option>
    

    The changed line on pipe:

    return value.filter((item)=>item.parent === parent);
    

    Here is your plunker working

    But, if you are only using the pipe for such a simple task which is an overkill IMHO, you could replace it by replacing the values variable in second-selector with a getter and filtering the returned list.

    Example:

    export class SecondSelector{
      @Output() select = new EventEmitter();
      @Input() parent;
    
      valuesList:ValueModel[] = [
          new ValueModel("ValueCode6","Child1","ValueCode1"),
          new ValueModel("ValueCode7","Child2","ValueCode1"),
          new ValueModel("ValueCode8","Child3","ValueCode2"),
          new ValueModel("ValueCode9","Child4","ValueCode3"),
          new ValueModel("ValueCode10","Child5","ValueCode3"),
          new ValueModel("ValueCode11","Child6","ValueCode4"),
          new ValueModel("ValueCode12","Child7","ValueCode5"),
          new ValueModel("ValueCode13","Child8","ValueCode5"),
          new ValueModel("ValueCode14","Child9","ValueCode5"),
          new ValueModel("ValueCode15","Child10","ValueCode5"),
        ];
    
        get values(){
            return this.parent ?
              this.valuesList.filter(item=> item.parent === this.parent):
              [];  // to avoid errors, if parent is undefined, return empty list
        }
    }
    

    Here is a working plunker