title: Angular Dynamically generated select field where one is dependent on the other
body: <p>I have dynamically generated select fields.</p>
  <ol>
  <li>There are 2 select fields. first: &quot;category&quot; and the second is: &quot;object&quot;</li>
  <li>Select field &quot;object&quot; is dependent on the value of &quot;category&quot;.</li>
  <li>If category selected is &quot;animal&quot;, object will display only: &quot;Dog&quot;, &quot;Cat&quot;, &quot;Lion&quot;</li>
  <li>If category selected is &quot;plant&quot;, object will display only: &quot;Rose&quot;, &quot;Coconut&quot;, &quot;Apple&quot;</li>
  </ol>
  <p>Here is the angular HTML</p>
  <pre><code>&lt;div [formGroup]=&quot;inventoryForm&quot;&gt;
      &lt;div formArrayName=&quot;items&quot;&gt;
          &lt;div *ngFor=&quot;let items of inventoryForm.get('items')['controls']; let i=index&quot;&gt;
  
              &lt;div [formGroupName]=&quot;i&quot;&gt;
  
        &lt;select formControlName=&quot;category&quot; class=&quot;form-control&quot;&gt;
          &lt;option selected&gt;&lt;/option&gt;
          &lt;option *ngFor=&quot;let a of allCategories&quot;&gt;{{a.category}} &lt;/option&gt;
        &lt;/select&gt;
  
                  &lt;select formControlName=&quot;object&quot; class=&quot;form-control&quot;&gt;
          &lt;option selected&gt;&lt;/option&gt;
          &lt;option *ngFor=&quot;let b of allObjects&quot;&gt;{{b.name}} &lt;/option&gt;
        &lt;/select&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;button (click)=&quot;addItem()&quot;&gt;Add&lt;/button&gt;
  </code></pre>
  <p>Here is the component.ts:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent implements OnInit {
  allObjects;
  allCategories;
  
  inventoryForm: FormGroup;
  items: FormArray;
  
  constructor(private formBuilder: FormBuilder) {}
  
  
  
  ngOnInit() {
  
  this.allObjects = [
  {category: &quot;Animal&quot;, name: &quot;Dog&quot;},
  {category: &quot;Animal&quot;, name: &quot;Cat&quot;},
  {category: &quot;Animal&quot;, name: &quot;Lion&quot;},
  {category: &quot;Plant&quot;, name: &quot;Rose&quot;},
  {category: &quot;Plant&quot;, name: &quot;Coconut&quot;},
  {category: &quot;Plant&quot;, name: &quot;Apple&quot;},
  ]
  
  this.allCategories = [
  {category: &quot;Animal&quot;, },
  {category: &quot;Plant&quot;, }
  ]
  
  
    this.inventoryForm = new FormGroup({
      items: new FormArray([])
    });
  
  }
  
  createItem(): FormGroup {
    return this.formBuilder.group({
      category: '',
      object: '',
    });
  }
  
  addItem(): void {
    this.items = this.inventoryForm.get('items') as FormArray;
    this.items.push(this.createItem());
  }
  }
  </code></pre>
  <p>And this the stackblitz Link:
  <a href="https://stackblitz.com/edit/angular-kgzsnu" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-kgzsnu</a></p>