Angular 2 cascading dropdown on object properties

Question

I have the following object that's return from a API

And The goal is to have cascading dropdown that fills themself depending of what / Area / Crag / Route you have chosen So I tried the follwing code in my template :

   <div class="form-row">
            <div class="form-group col-lg-2">
                <label for="area">Area</label>
                <select class="form-control" id="area" name="SelectedArea" [(ngModel)]="SelectedArea" (change)="onAreaSelected()">
                    <option *ngFor="let a of Areas" [value]="a">{{a.Name}}</option>
                </select>
            </div>
            <div class="form-group col-lg-2">
                <button type="button" class="btn btn-success" id="addArea"><i class="fa fa-plus"></i> add a new area</button>
            </div>
            <div class="form-group col-lg-2">
                <label for="crag">Crag</label>
                <select class="form-control" id="crag" name="SelectedCrag" [(ngModel)]="SelectedCrag" (change)="onCragSelected()">
                    <option *ngFor="let c of SelectedArea.Crags" [value]="c">{{c.Name}}</option>
                </select>
            </div>
            <div class="form-group col-lg-2">
                <button type="button" class="btn btn-success" id="addCrag"><i class="fa fa-plus"></i> add a new crag</button>
            </div>
        </div>

And in my component :

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TicklistService } from './ticklist.service';
import { Ticks } from '../Models/Ticks';
import { Areas } from '../Models/Areas';
import { Crags } from '../Models/Crags';
import { Routes } from '../Models/Routes';

@Component({
    moduleId: module.id,
    selector: 'addTick',
    templateUrl: './addTick.component.html',
    styleUrls: ['./addTick.component.css'],
    encapsulation: ViewEncapsulation.None,
    providers: [TicklistService]
})

export class AddTickComponent implements OnInit {
    public Tick: Ticks
    public Areas: Areas[];
    public Crags: Crags[];
    public Routes: Routes[];

    public SelectedArea: Areas;
    public SelectedCrag: Crags;
    public SelectedRoute: Routes;

    public Message: string;

    constructor(private _ticklistService: TicklistService) { }

    ngOnInit() {
        this.Areas = [];
        this.SelectedArea = { IDArea: -1, Name: "Select an area", Crags: [] };
        this.SelectedCrag = { IDArea: -1, IDCrag: -1, Name: "Select a crag", Routes: [] };
        this.SelectedRoute = { IDCrag: -1, IDRoute: -1, Grade: "", Name: "Select a route" };
        //retreive data from webapi
        this.getAreas();
    }

    getAreas() {
        var url = 'api/areas/getAllArea';
        this._ticklistService.get(url).subscribe(
            data => {
                this.Areas = data;
                console.log(data);
            },
            error => {
                console.log(error);
                var errorMessage = JSON.parse(error.Message);
                if (errorMessage.error_description) {
                    this.Message = errorMessage.error_description;
                }
            });
    }

plus this function is called on the change of the Area's dropdown :

  onAreaSelected() {
    console.log(this.SelectedArea);
    console.log(this.SelectedArea.Crags);
}

But somehow this gives me [Object object] And undefined instead of the Area that is currently selected and the crags in that area :

What am i missing here?

Answer 1

You have to get the selected value out using the onChange(). See below.

<select class="form-control" id="area" name="SelectedArea" [(ngModel)]="SelectedArea" (change)="onAreaSelected($event.target.value)">
    <option *ngFor="let a of Areas" [value]="a">{{a.Name}}</option>
</select>

onAreaSelected(selectedArea) {
    this.selectedArea = selectedArea;
    console.log(this.SelectedArea);
    console.log(this.SelectedArea.Crags);
}

For more details check this answer https://stackoverflow.com/a/33716321/1849366.

Answer 2

So i found out how to fix my problem. Actually the problem was that i was using [value]="a". I switched to [ngValue]="a". And i don't even need the (change) function.