Create Angular List using cdkListbox

Question

Here is my simple code:

<div>
<ul cdkListbox
    cdkListboxMultiple
    (cdkListboxValueChange)="onSelect($event)"
    [cdkListboxDisabled]="false"
    >
  <li *ngFor="let tag of tags" cdkOption="tag.text">
    {{tag.text}}
  </li>
</ul>

It does create a list but it's not selectable.

I used the following code as a reference: https://material.angular.io/cdk/listbox/overview

<label class="example-listbox-label" id="example-fav-color-label">
   Favorite color
</label>
<ul cdkListbox
  aria-labelledby="example-fav-color-label"
  class="example-listbox">
  <li cdkOption="red" class="example-option">Red</li>
  <li cdkOption="green" class="example-option">Green</li>
  <li cdkOption="blue" class="example-option">Blue</li>
 </ul>

Which is working fine on the Example screen. Any idea what might be wrong with my code?

Thanks

Answer 1

I have all items selectable at once, but brackets around cdkOption will definitely improve the situation:

[cdkOption]="tag.text"