Clarity design improve combobox to add dynamic values

Question

In the following context: I use the Clarity Design CSS framework on my angular(13) project. I have a form and I want to use the combobox. I want to add dynamic values to an existing options.

On the html file :

<clr-combobox-container>
   <label>Input name</label>
   <clr-combobox
   clrMulti="true"
   [(ngModel)]="newItem"
   (keydown.enter)="onKeyevent($event.target.value)"
   required
   >
    <ng-container *clrOptionSelected="let selected">
     {{ selected }}
    </ng-container>
    <clr-options>
       <clr-option *clrOptionItems="let custom of customList;" [clrValue]="custom">
       {{ custom }}
       </clr-option>
    </clr-options>
   </clr-combobox>
</clr-combobox-container>

On the typescript file:

onKeyevent(event) {
 this.customList.push(event);
}

I tried with the keyevent binding. Do you have a better solution ? Thank you all.

Answer 1

I´ve had the same issue and I resolved by changing *clrOptionItems with *ngFor. Hope it helps mate!