Angular Material Nested Select from service

I´m working on a nested select in angular material, the data of this two selects is in a json file:

[
    {
        "id": 1,
        "name": "Arquitectura",
        "depcen": [
            {
                "name": "Diseño"
            },
            {
                "name": "Informatización"
            },
            {
                "name": "Tecnología"
            },
            {
                "name": "CEU"
            },
            {
                "name": "Idiomas"
            }
        ]
    },
    {
        "id": 2,
        "name": "Automática y Biomédica",
        "depcen": [
            {
                "name": "Automática"
            },
            {
                "name": "Física"
            },
            {
                "name": "CEBIO"
            }
        ]
]

I'm using an event to keep the value of the faculty or area, and next I have the other select that shows the department or center of the faculty or area selected before, well it should but I can get it done, this is what I did:

<mat-form-field class="select" appearance="fill">
  <mat-label>Facultad o Área</mat-label>
    <mat-select (selectionChange)="select($event.value)">
       <mat-option>-Sin especificar-</mat-option>
       <mat-option *ngFor="let facultadarea of facultadareas" 
        [value]="facultadarea.name">
         {{facultadarea.name}}
       </mat-option>                
    </mat-select>                
</mat-form-field>
<mat-form-field class="select" appearance="fill">
    <mat-label>Departamento o Centro</mat-label>
    <mat-select (selectionChange)="select($event.value)">
       <mat-option>-Sin especificar-</mat-option>
       <mat-option *ngFor="let depcen of depcentros" 
         [value]="depcen.name">
                    {{depcen.name}}
       </mat-option>
     </mat-select>
</mat-form-field>

And here is my function in typescript:

facultadareas: IFacultadArea[] = []
depcentros: Idepcen[] = []

constructor(private facAreaService: FacultadAreaService) {}

ngOnInit() {
    this.facAreaService.getFacultadArea().subscribe(data=>this.facultadareas = data)
    this.facAreaService.getDepartamentoCentro().subscribe(data=>this.depcentros = data)
  }

select(value){
    this.depcentros = value.depcentros
    console.log(value.depcentros)
  }

To get it done I fix some stuff in the typescript file. I realice that only needed the faculty service and pointing to the faculty I could get the array of departments.

facultadareas: IFacultadArea[] = []
depcentros: Idepcen[] = []

constructor(private facAreaService: FacultadAreaService) {}

ngOnInit() {
    this.facAreaService.getFacultadArea().subscribe(data=>this.facultadareas = data) //I only needed this service

select(value){
    this.depcentros = value.depcen //depcen is the faculty field in the json that have its departments
    console.log(value.depcen)
  }

In the HTML I did what my friend Den suggested to me, I set [value]="facultadarea" and remove second (selection change) for departments

<mat-form-field class="select" appearance="fill">
   <mat-label>Facultad o Área</mat-label>
   <mat-select (selectionChange)="select($event.value)">
     <mat-option>-Sin especificar-</mat-option>
     <mat-option *ngFor="let facultadarea of facultadareas" [value]="facultadarea">
                    {{facultadarea.name}}
     </mat-option>
   </mat-select>
</mat-form-field>
<mat-form-field class="select" appearance="fill">
   <mat-label>Departamento o Centro</mat-label>
   <mat-select>
     <mat-option>-Sin especificar-</mat-option>
     <mat-option *ngFor="let depcen of depcentros" [value]="depcen.name">
                    {{depcen.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>