Select to view content in your preferred language

Angular and Calcite elements

1161
5
Jump to solution
06-22-2023 07:18 AM
Labels (2)
Robert_van_Gilst
New Contributor III

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.

0 Kudos
1 Solution

Accepted Solutions
KittyHurley
Esri Contributor

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:

  1. Codepen sample
  2. Codesandbox sample with @angular and @ionic/pwa-elements:

View solution in original post

0 Kudos
5 Replies
KittyHurley
Esri Contributor

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:

  1. Codepen sample
  2. Codesandbox sample with @angular and @ionic/pwa-elements:
0 Kudos
Robert_van_Gilst
New Contributor III

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 🙏

0 Kudos
KittyHurley
Esri Contributor

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.

0 Kudos
ForrestLin
Occasional Contributor II

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

0 Kudos
Robert_van_Gilst
New Contributor III

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

0 Kudos