topic Angular and Calcite elements in Calcite Design System Questions

Angular and Calcite elements

Robert_van_Gilst — Thu, 22 Jun 2023 14:18:28 GMT

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'] }

<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.

Re: Angular and Calcite elements

KittyHurley — Thu, 22 Jun 2023 23:49:12 GMT

Hi @Robert_van_Gilst This is inherit to web components, where the Combobox attributes don't automatically get mapped until the element is defined.

To set the elements you can either check the attribute, or wait for the element to be defined and the component is loaded.

For instance:

Codepen sample
Codesandbox sample with @angular and @ionic/pwa-elements:
- The @ionic/pwa-elements module was added, and two lines were added to the main.ts file (lines 8 and 24)
  - Alternatively a utility could be saved to the codebase which includes the componentOnReady Ionic helper.
- The AfterViewInit lifecycle hook is used to wait for the element to be defined.

Re: Angular and Calcite elements

Robert_van_Gilst — Fri, 23 Jun 2023 08:45:26 GMT

Thank you @KittyHurley this helped. 😊

But unfortunately it breaks the angular way of working of separating the UI and code complete. I rather have no references to components in my code. So I probably have create some wrapper components in my solution, to get me past this inconvenience.

Or is your team also working on a Angular Components implementation 🙏

Re: Angular and Calcite elements

KittyHurley — Fri, 23 Jun 2023 19:02:20 GMT

Good to hear the above resources were helpful!

Calcite is working towards an Angular wrapper in the near future, so there will be additional support coming soon.

Re: Angular and Calcite elements

ForrestLin — Fri, 30 Jun 2023 19:03:19 GMT

When will Angular wrapper be ready to use? I'm working on a project using Angular with Calcite components right now.

Re: Angular and Calcite elements

Robert_van_Gilst — Thu, 06 Jul 2023 06:45:19 GMT

Hi @KittyHurley that sounds great with an Angular wrapper. What means "in the near future"? I hope weeks, but that is probably wishful thinking 😄