title: List dependent in Reactive forms with mat-select
body: <p>How can I implement dependent lists of three levels in a Reactive form with Angular Material and Firestore?</p>
  
  <p>I have this data structure in Firestore:
  <a href="https://i.stack.imgur.com/uLae6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uLae6.png" alt="enter image description here"></a></p>
  
  <p>And I have a form with Angular Material that looks like this:</p>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;form [formGroup]="forma" (ngSubmit)="agregarAviso()" novalidate&gt;
  &lt;mat-select placeholder="Categoría" formControlName="categoria"&gt;
    &lt;mat-option *ngFor="let categoria of categorias | async [value]="categoria.nombre"&gt;
      {{ categoria.nombre }}
    &lt;/mat-option&gt;
  &lt;/mat-select&gt;
  
  &lt;mat-select placeholder="Categoría" formControlName="subCategoria"&gt;
    &lt;mat-option *ngFor="let categoria of categorias.subCategorias | async [value]="subCategoria"&gt;
      {{ subCategoria}}
    &lt;/mat-option&gt;
  &lt;/mat-select&gt;
  
  &lt;mat-select placeholder="Categoría" formControlName="tipo"&gt;
    &lt;mat-option *ngFor="let categoria of categorias.subCategorias.tipos | async [value]="tipo"&gt;
      {{ tipo }}
    &lt;/mat-option&gt;
  &lt;/mat-select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>forma: FormGroup;
  
  constructor( private fs: FirebaseService, fb: FormBuilder, afs: AngularFirestore) { 
  this.forma = fb.group ({
    categoria: [ '', Validators.required ],
    subCategorias: [ '', Validators.required ],
    tipos: [ '', Validators.required ],
  })
  }
  
  ngOnInit() {
  this.getCategorias();
  }
  
  getCategorias() {
  this.categorias = this.fs.getCategorias();
  }
  </code></pre>
  
  <p><strong>service.ts</strong></p>
  
  <pre><code>getCategorias() {
    this.categorias = this.afs.collection('categorias', ref =&gt; ref.orderBy('nombre','asc')).valueChanges()
    return this.categorias
  }
  </code></pre>