Angular2 chained selects

Question

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. (eg 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

Answer 1

You have two issues in your plunker.

• First issue, you are passing undefined to second-selector . first is undefined initialy because you only set it on change. which was breaking your component. You could either add *ngIf to your second-selector or initialize the variable first with an initial value. eg parent1.
  To solve this on your plunker, I added *ngIf on second-selector
• Second issue, on select you are emitting a string value representing the parent object eg parent1 but not the actual parent object while on SecondSelectorPipe you are expecting the argument to be a parent object not a string.
  To solve this, I assigned the code property to <option> on first-selector and I changed the SecondSelectorPipe to expect a string code of the parent object.

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