Kendo Dropdown Angular

Question

I have 2 kendo dropdownlist when the first dropdown is changed based on that value I want the 2nd dropdownlist to be updated and by default first value should be selected so basically 2nd dropdownlist should be refreshed with new values. Below is the stackblitz.

https://stackblitz.com/edit/angular-nd9cpn-xpah4u?file=app/app.component.ts

Answer 1

You can use the valuechange event like this: (valueChange)="handleTypeChange($event)"

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [data]="['normal', 'smooth']" [(ngModel)]="style" (valueChange)="handleTypeChange($event)">
    </kendo-dropdownlist>
        <kendo-dropdownlist [(ngModel)]="secondaryListChoice"  
        [data]="secondaryList"
                    [textField]="'text'"
            [valueField]="'value'"

        >
    </kendo-dropdownlist>
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item [style]="style" type="scatterLine"
            [data]="data"
            [markers]="{ visible: false }">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent implements OnInit {
  public style: string = 'normal';
  public secondaryListChoice: string = '';
  public data: any[] = [
      [0, 20], [1, 1], [2, 18], [3, 3],
      [4, 15], [5, 5], [6, 10], [7, 6],
      [8, 9], [9, 6], [10, 10], [11, 5],
      [12, 13], [13, 3], [14, 16], [15, 1],
      [16, 19], [17, 1], [18, 20], [19, 2],
      [20, 18], [21, 5], [22, 12], [23, 7],
      [24, 10], [25, 8]
  ];
  public secondaryList : Array<any> = [
      { text: 'value1', value: 'value2' },
      { text: 'value2', value: 'value2' },
  ];
  ngOnInit(){
  }

  handleTypeChange(event) {
    console.log(event);

    if (this.style === 'normal') {
      this.secondaryList =  [
      { text: 'value1', value: 'value2' },
      { text: 'value2', value: 'value2' },
      { text: 'value3', value: 'value3' },
      { text: 'value4', value: 'value4' },
      { text: 'value5', value: 'value5' }];
    }

    if(this.style==='smooth'){
       this.secondaryList =  [
      { text: 'zzvalue5', value: 'zzvalue5' },
      { text: 'zzvalue5', value: 'zzvalue5' }];
    }
  }
}

Working implementation here: https://stackblitz.com/edit/angular-nd9cpn-bvsqrj?file=app/app.component.ts