Cascading ComboBoxes

@Component({
  selector: 'my-app',
  template: `
    <div class="container-fluid example-wrapper">
        <div class="row">
            <div class="col-xs-12 col-sm-4 example-col">
                <p>Category:</p>
                <kendo-combobox
                    [data]="dataCategory"
                    [placeholder]="'Select category...'"
                    [value]="selectedCategory"
                    [textField]="'category'"
                    [valueField]="'categoryId'"
                    (valueChange)="handleCategoryChange($event)"
                >
                </kendo-combobox>
            </div>
            <div class="col-xs-12 col-sm-4 example-col">
                <p>Product:</p>
                <kendo-combobox
                    [disabled]="isDisabledProducts"
                    [placeholder]="'Select product...'"
                    [data]="dataResultProducts"
                    [value]="selectedProduct"
                    [textField]="'productName'"
                    [valueField]="'productId'"
                    (valueChange)="handleProductChange($event)"
                >
                </kendo-combobox>
            </div>
            <div class="col-xs-12 col-sm-4 example-col">
                <p>Order:</p>
                <kendo-combobox
                    [disabled]="isDisabledOrders"
                    [placeholder]="'Select orders...'"
                    [value]="selectedOrder"
                    [data]="dataResultOrders"
                    [textField]="'orderName'"
                    [valueField]="'orderId'"
                    (valueChange)="handleOrderChange($event)"
                >
                </kendo-combobox>
            </div>
        </div>
    </div>
  `
})
export class AppComponent {


    public isDisabledProducts: boolean = true;
    public isDisabledOrders: boolean = true;

    public dataCategory: Array<{ category: string, categoryId: number }> = [
        { category: "Beverages", categoryId: 1 },
        { category: "Condiments", categoryId: 2 },
        { category: "Seafood", categoryId: 3 }
    ];

    public dataProducts: Array<{ productName: string, productId: number,categoryId:number }> = [
        { productName: "Chai", productId: 1,categoryId: 1 },
        { productName: "Chang", productId: 2,categoryId: 1 },
        { productName: "Aniseed Syrup", productId: 3,categoryId: 2  },
        { productName: "Genen Shouyu", productId: 4,categoryId: 2  },
        { productName: "Ikura", productId: 5,categoryId: 3  },
        { productName: "Konbu", productId: 6,categoryId: 3  },
    ];

    public dataOrders: Array<{ orderName: string,orderId:number, productId: number, }> = [
        { orderName: "Cunewalde", orderId: 1, productId: 1 },
        { orderName: "Albuquerque", orderId: 2, productId: 1 },
        { orderName: "Geneve", orderId: 3, productId: 2 },
        { orderName: "Graz", orderId: 4, productId: 2 },
        { orderName: "London", orderId: 5, productId: 3 },
        { orderName: "I. de Margarita", orderId: 6, productId: 3 },
        { orderName: "Barquisimeto", orderId: 7, productId: 4 },
        { orderName: "Brandenburg", orderId: 8, productId: 4 },
        { orderName: "Cunewalde", orderId: 9, productId: 5 },
        { orderName: "Mexico D.F.", orderId: 10, productId: 5 },
        { orderName: "Mexico D.F.", orderId: 11, productId: 6 },
        { orderName: "Rio de Janeiro", orderId:12, productId: 6 }
    ];

    public dataResultProducts: Array<{ productName: string, productId: number,categoryId:number }>;

    public dataResultOrders: Array<{ orderName: string,orderId:number, productId: number, }>


    handleCategoryChange(value) {

      this.selectedCategory = value;
      this.selectedProduct = undefined;
      this.selectedOrder = undefined;

      if(value == undefined){
        this.isDisabledProducts = true;
        this.dataResultProducts = [];
      }
      else{
        this.isDisabledProducts = false;
        this.dataResultProducts = this.dataProducts.filter((s) => s.categoryId === value.categoryId )
      }

      this.isDisabledOrders = true;
      this.dataResultOrders = [];

    }

    handleProductChange(value) {
      this.selectedProduct = value;
      this.selectedOrder = undefined;

      if(value == undefined){
        this.isDisabledOrders = true;
        this.dataResultOrders = [];
      } else {
        this.isDisabledOrders = false;
        this.dataResultOrders = this.dataOrders.filter((s) => s.productId === value.productId )
      }
    }

    handleOrderChange(value) {
      this.selectedOrder = value;
    }

}