cdk listbox with selection "forced by code" doesn´t show as selection "by hand"

Question

I have a cdk listbox that I use in cascade. So, I must have the possibility of controlling it by code, togheter with the graphical interface.

When I change the selected item (it´s not multiitems), the graphical interface doesn´t reflect the selected item - and the user must see what is selected.

I forked the cdk listbox in the stackblitz ( https://stackblitz.com/edit/ax5jwo-x5o644 ) that reflects the current behavior.

Clicking in the buttons below the listbox, I replicate the behavior that I have in my apllication (clicking in one of the buttons, I can "selected" the wished item "by code"). But then, the listbox doesn´t mark the "selected" item by this way, as when directly clicking over the listbox.

Answer 1

You should organize your functions as follows;

  clickSprigatitoEvent() {
    this.starter = [this.starters[0]];
  }

  clickFuecocoEvent() {
    this.starter = [this.starters[1]];
  }

  clickQuaxlyEvent() {
    this.starter = [this.starters[2]];
  }