Angular-Kendo autocomplete selected value on change

Question

I'm using kendo autocomplete search box with dropdown values when user name is keyed in, a backend service is called which results in a list of values and are bind to the search bar.

Now, I'm having a 'search' button to route to next page based on selected value.

<kendo-autocomplete [data]="data" [filterable]="true" (filterChange)="handle($event)"
            [(ngModel)]="selectedValue" placeholder="search with user name">
        </kendo-autocomplete>

        <div class="ps-center  visible-xs">
            <button kendoButton [primary]="true" type="button" (click)="onSearch()">Search</button>
        </div>

How can I directly route to next page on selection of a value and skip one additional click of search button.

  onSearch() {           
        this.router.navigate(['/story/' + this.userName]);    
  }

Answer 1

Kendo-ComboBox has different events which can be used as required,documentation is available at Kendo ComboBox

In your case, you can use valueChange event as below

<kendo-autocomplete [data]="data" [filterable]="true" (filterChange)="handle($event)"
            (valueChange)="valueChange($event)"  [(ngModel)]="selectedValue"
            placeholder="search with user name">
        </kendo-autocomplete>

In your .ts file, define the function

  public valueChange(value: any): void {
    console.log("valueChange", value);
    //perform the manipulation of "value" as required here
        this.router.navigate(['/dashboard/' + value]);

  }