Angular 4 error handling and logging

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!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^