title: How to change angular reactive form select dropdown options dynamically
body: <p>I'm trying to create a custom drop-down cascading component using angular reactive form .</p>
  
  <p>problem is, how to change 'state' drop-down box option(s) on country drop-down value change.</p>
  
  <p>This part of the 
  <strong>app.component.html</strong></p>
  
  <pre><code> &lt;mat-sidenav-container class="example-container"&gt;       
    &lt;mat-sidenav-content&gt;
      &lt;div class="module-menu"&gt;&lt;/div&gt;
      &lt;div class="container"&gt;
        &lt;dynamic-form [fields]="regConfig" (submit)="submit($event)"&gt; &lt;/dynamic-form&gt;
      &lt;/div&gt;
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>This part of the 
  <strong>app.component.ts</strong></p>
  
  <pre><code> regConfig: FieldConfig[] = [
  
      {
        type: "select",
        label: "Country",
        name: "country",
        value: "UK",
        options: ["India", "UAE", "UK", "US"]
      },
      {
        type: "select",
        label: "State",
        name: "state",
        options: []
      }
  </code></pre>
  
  <p>This part of the 
  <strong>dynamic-form.component.ts</strong></p>
  
  <pre><code>@Component({
    exportAs: "dynamicForm",
    selector: "dynamic-form",
    template: `       
    &lt;form class="dynamic-form" [formGroup]="form" (submit)="onSubmit($event)" *ngIf="!controlTypeIsTable"&gt;
    &lt;ng-container *ngFor="let field of fields;" dynamicField [field]="field" [group]="form"&gt;
    &lt;/ng-container&gt;
    &lt;/form&gt;
    &lt;section *ngIf="controlTypeIsTable"&gt;
    &lt;ng-container dynamicTable name="table" [table]="table" &gt;  &lt;/ng-container&gt;
    &lt;/section&gt;
    `,
    styles: []
  })
  export class DynamicFormComponent implements OnInit {
  
    controlTypeIsTable: boolean
    @Input() fields: FieldConfig[] = [];
    @Output() submit: EventEmitter&lt;any&gt; = new EventEmitter&lt;any&gt;();
  
  
   ngOnInit() {
      if (field.type === "select") {
        control.valueChanges.subscribe((newValue: any) =&gt; {
          this.dropdownChange(newValue,'state')
        });
      }
    }
  
  dropdownChange(value: any, targetControlName) { 
      this.form.get(targetControlName).setValue(value)
      //this.cd.detectChanges();
    }
  </code></pre>
  
  <p>This part of the 
  <strong>select.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: "app-select",
    template: `&lt;mat-form-field [formGroup]="group"&gt;
            &lt;mat-select [placeholder]="field.label" [formControlName]="field.name"&gt;
            &lt;mat-option *ngFor="let item of field.options" [value]="item"&gt;{{item}}&lt;/mat-option&gt;
            &lt;/mat-select&gt;
            &lt;/mat-form-field&gt;`,
    styles: []
  })
  export class SelectComponent implements OnInit {
    field: FieldConfig;
    group: FormGroup;
    constructor() {}
    ngOnInit() {}
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/T43Jd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T43Jd.png" alt="enter image description here"></a></p>