title: Angular select option dynamically in *ngFor
body: <p>That's the scenario:
  I have a data array of objects that contains different types of objects. It could be a text, a select or whatever. In the view I have an *ngFor to loop this data and it generates an object depending on the type. I could have 2 or 3 select, it depends on the json that i receive.
  These select, can depend on the selection of an option from another one. So, the options of the second needs to change depending on the first selection. For instance:</p>
  
  <p>First select that contains a list of jobs: I select option "developer"
  Second select that contains a list of users: "It has to show me the users with that job selected"</p>
  
  <p>I tried to create an example here: <a href="https://stackblitz.com/edit/ng-select-qyt3fu" rel="nofollow noreferrer">https://stackblitz.com/edit/ng-select-qyt3fu</a></p>
  
  <p>and here's the code:</p>
  
  <pre><code>import {Component, NgModule, ViewChild} from '@angular/core';
  import {BrowserModule} from '@angular/platform-browser';
  import {FormControl, FormGroup, ReactiveFormsModule, FormsModule} from '@angular/forms';
  import {NgSelectModule, NgOption} from '@ng-select/ng-select';
  
  @Component({
      selector: 'my-app',
      template: `
          &lt;h1&gt;Angular ng-select &lt;small class="text-muted"&gt;&lt;a target="_blank" href="https://github.com/ng-select/ng-select"&gt;Open in Github&lt;/a&gt;&lt;/small&gt;&lt;/h1&gt;
          &lt;div *ngFor="let item of data"&gt;
  
             &lt;input *ngIf="item.type == 'text'" autocomplete="off" name="{{item.name}}" type="{{item.type}}" placeholder="{{item.label}}" [(ngModel)]="item.value"&gt;
  
            &lt;br /&gt;
            &lt;ng-select *ngIf="item.type == 'select'"
                      [items]="item.data"
                      bindLabel="label"
                      (change)="selectValue($event)"
                      placeholder="{{item.label}}"
                      [(ngModel)]="item.value"&gt;
            &lt;/ng-select&gt;
  
          &lt;/div&gt;
  
          &lt;!--&lt;p&gt;
              Selected city: {{selectedCity | json}}
          &lt;/p&gt;
          &lt;p&gt;
             Selected user: {{selectedUser | json}}
          &lt;/p&gt;--&gt;
  
          &lt;hr /&gt;
  
          &lt;div style="margin-top:300px"&gt;&lt;/div&gt;
  `
  })
  export class AppComponent {
  
      data = [
       {
          "id": 0,
          "name": "test",
          "label": "Test",
          "type": "text",
          "value": "Hello there"
        },{
          "id": 1,
          "name": "cities",
          "label": "Cities",
          "type": "select",
          "value": undefined,
          "data": [
            {id: 1, name: 'vilnius', label: 'Vilnius', reference: "job"},
            {id: 2, name: 'kaunas', label: 'Kaunas', reference: "job"},
            {id: 3, name: 'pavilnys', label: 'Pavilnys', reference: "job"},
            {id: 4, name: 'pabradė', label: 'Pabradė', reference: "job"},
            {id: 5, name: 'klaipėda', label: 'Klaipėda', reference: "job"}
          ]
        },{
          "id": 2,
          "name": "job",
          "label": "Job",
          "type": "select",
          "value": undefined,
          "reference": "cities",  
          "data": [
            {id: 0, name: 'developer', label: 'Developer', city: "Kaunas", item_reference: "kaunas", reference: "cities"},
            {id: 1, name: 'actor', label: 'Actor', city:"Pabradė", item_reference: "pabradė", reference: "cities"},
            {id: 2, name: 'lifeguard', label: 'Lifeguard', city:"Vilnius", item_reference: "vilnius", reference: "cities"},
            {id: 3, name: 'lawyer', label: 'Lawyer', city:"Pavilnys", item_reference: "pavilnys", reference: "cities"}
          ]
        },{
          "id": 3,
          "name": "users",
          "label": "Users",
          "type": "select",
          "value": undefined,
          "reference": "job",
          "data": [
            {id: 'anjmao', name: 'anjmao', label: 'Anjmao', job: "Actor", item_reference: "actor", reference: "job"},
            {id: 'varnas', name: 'tadeus_varnas', label: 'Tadeus Varnas', job: "Developer", item_reference: "developer", reference: "job"},
            {id: 'john', name: 'john', label: 'John', job: "Lawyer", item_reference: "lawyer", reference: "job"},
            {id: 'jason', name: 'jason', label: 'Jason', job: "Lawyer", item_reference: "lawyer", reference: "job"},
            {id: 'tom', name: 'tom', label: 'Tom', job: "Lifeguard", item_reference: "lifeguard", reference: "job"}
          ]
        }
      ] 
  
      selectedCity: any;
      selectedUser: any;
      comboHash: ISelectHash = {};
  
      constructor() {
        this.data.forEach(item =&gt; {
          this.comboHash[item.reference] = item.data;
        });
      }
  
      selectValue(event) {
        //console.log(event.reference);
        const newItems = this.data.filter(item =&gt; 
        {
          console.log(event.reference);
          item.name.includes(event.reference)
        });
        console.log(newItems);
        ///console.log(event, this.comboHash["job"]);
        //console.log(newItems);
      }
  
  }
  export interface ISelectHash {
      [name: string] : Array&lt;any&gt;;
  } 
  </code></pre>
  
  <p>In this case: </p>
  
  <p>I select a city, the second select it filters for the jobs in that city, than I select the job and the third should filter the users with that job. Is that possibile? I also tried to filter with filter function using a hashmap but newItems is always null.</p>