I love the simplicity of Angular, where it is possible to seperate the logic from the UI. But at the moment I am struggeling to find a good way to implement some of Calcites elements into my Angular solution. For instance the combobox element.
// Simplified example
export class MyComponent {
allLayers: string[] = ['a', 'b', 'c', 'd', 'e', 'f']
selectedLayers: string[] = ['a', 'f']
}
<!-- Component -->
<calcite-combobox placeholder="Select a field" [value]="selectedLayers">
<calcite-combobox-item *ngFor="let item of allLayers" [value]="item" [textLabel]="item"></calcite-combobox-item>
</calcite-combobox>
I can populate the items in the component but not the selected layers.
I can respond to the change in selection responding like [calciteComboboxChange)="CalciteComboboxChange($event)" and update the selectedLayers variable. But I would love to have a possibility to use two-way binding like this [(value)]="selectedLayers".
I know I can use [selected]="true" on the elements, but then it does not keep the order in which the elments were selected.
BTW.: It is also annoying when selecting one element, it sends just the element and more than one an array.