Angular Material Nested Select from service

Question

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

Can you make it clear? what are you trying to achieve here? Is it like when ever faculty is selected you want to load the department select? — JsNgian, Sep 02 '21 at 17:30
Yes, one select depends from the other when you select the faculty for example, the second one gives you the centers of that faculty — Laura Díaz, Sep 03 '21 at 19:57

score 1 · Answer 1 · answered Sep 02 '21 at 18:05

1

In (selectionChange) you pass the value... But value is only the name [value]="facultadarea.name".

Try to set [value]="facultadarea" and remove second (selection change) for departments that can create problem.

answered Sep 02 '21 at 18:05

Den

650
6
15

I'll try that – Laura Díaz Sep 03 '21 at 19:59
1

Thanks for the hekp, your suggestion helps me to get to the final answer, I hope this post helps others – Laura Díaz Sep 06 '21 at 17:06

score 0 · Accepted Answer · answered Sep 06 '21 at 17:05

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>

Angular Material Nested Select from service

2 Answers2

Linked