Angular 4 Kendo UI DropDownList

How To CREATE Kendo UI DropDownList in Angular 4?

@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-dropdownlist
                    [data]="dataCategory"
                    [value]="selectedCategory"
                    [defaultItem]="defaultItemCategories"
                    [textField]="'categoryName'"
                    [valueField]="'categoryId'"
                    (valueChange)="handleCategoryChange($event)"
                >
                </kendo-dropdownlist>
            </div>
            <div class="col-xs-12 col-sm-4 example-col">
                <p>Product -</p>
                <kendo-dropdownlist
                    [disabled]="isDisabledProducts"
                    [defaultItem]="defaultItemProducts"
                    [data]="dataResultProducts"
                    [value]="selectedProduct"
                    [textField]="'productName'"
                    [valueField]="'productId'"
                    (valueChange)="handleProductChange($event)"
                >
                </kendo-dropdownlist>
            </div>
            <div class="col-xs-12 col-sm-4 example-col">
                <p>Order -</p>
                <kendo-dropdownlist
                    [disabled]="isDisabledOrders"
                    [defaultItem]="defaultItemOrders"
                    [data]="dataResultOrders"
                    [value]="selectedOrder"
                    [textField]="'orderName'"
                    [valueField]="'orderId'"
                    (valueChange)="handleOrderChange($event)"
                >
                </kendo-dropdownlist>
            </div>
        </div>
    </div>
  `
})
export class AppComponent {

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

    public defaultItemCategories: { categoryName: string, categoryId: number } = { categoryName: "Select category", categoryId: null };

    public defaultItemProducts: { productName: string, productId: number } = { productName: "Select product", productId: null };

    public defaultItemOrders: { orderName: string, orderId: number } = { orderName: "Select order", orderId: null };

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

    public dataProducts: Array<{ productName: string, productId: number,categoryId:number }> = [
        { productName: "product 1", productId: 1,categoryId: 1 },
        { productName: "product 2", productId: 2,categoryId: 2 },
        { productName: "product 3", productId: 3,categoryId: 3  }
    ];

    public dataOrders: Array<{ orderName: string,orderId:number, productId: number, }> = [
        { orderName: "order 1", orderId: 1, productId: 1 },
        { orderName: "order 2", orderId: 2, productId: 2 },
        { orderName: "order 3", orderId: 3, productId: 3 }
    ];

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

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

    public selectedCategory: { categoryName: string, categoryId: number};
    public selectedProduct: { productName: string, productId: number};
    public selectedOrder: { orderName: string, orderId: number};

    handleCategoryChange(value) {
      this.selectedCategory = value;
      this.selectedProduct = undefined;
      this.selectedOrder = undefined;

      if(value.categoryId == this.defaultItemCategories.categoryId){
        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.productId == this.defaultItemProducts.productId){
        this.isDisabledOrders = true;
        this.dataResultOrders = [];
      } else {
        this.isDisabledOrders = false;
        this.dataResultOrders = this.dataOrders.filter((s) => s.productId === value.productId )
      }
    }

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

}

Result -

I hope you are enjoying with this post! Please share with you friends. Thank you so much!