Список зависимых в Реактивных формах с mat-select

Question

Как я могу реализовать зависимые списки трех уровней в Реактивной форме с Angular Material и Firestore?

У меня есть эта структура данных в Firestore:

И у меня есть форма с угловым материалом, которая выглядит следующим образом:

component.html

<form [formGroup]="forma" (ngSubmit)="agregarAviso()" novalidate>
<mat-select placeholder="Categoría" formControlName="categoria">
  <mat-option *ngFor="let categoria of categorias | async [value]="categoria.nombre">
    {{ categoria.nombre }}
  </mat-option>
</mat-select>

<mat-select placeholder="Categoría" formControlName="subCategoria">
  <mat-option *ngFor="let categoria of categorias.subCategorias | async [value]="subCategoria">
    {{ subCategoria}}
  </mat-option>
</mat-select>

<mat-select placeholder="Categoría" formControlName="tipo">
  <mat-option *ngFor="let categoria of categorias.subCategorias.tipos | async [value]="tipo">
    {{ tipo }}
  </mat-option>
</mat-select>
</form>

component.ts

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();
}

service.ts

getCategorias() {
  this.categorias = this.afs.collection('categorias', ref => ref.orderBy('nombre','asc')).valueChanges()
  return this.categorias
}