adidas / choicesjs-stencil

Select Web Component which wraps ChoicesJS library using StencilJS
MIT License
65 stars 10 forks source link

dynamically manipulating choices #9

Closed pouyamiralayi closed 5 years ago

pouyamiralayi commented 5 years ago

Hello there! does we have setChoices available on this component? i tried like this: this.inputEl.setChoices([ { value: 'Four', label: 'Label Four' }, { value: 'Five', label: 'Label Five' }, { value: 'Six', label: 'Label Six' }, ]) what i am about to acheive here is dynamically changing the options based on what choice user have. so for instance: this.inputEl.addEventListener('addItem', function(event) { if(event.detail.value === 'a'){ // change the choices... } }); i would be glad to hear from u guys. tnx in advance.

moelders commented 5 years ago

Hello @pouyamiralayi,

In the case you are setting the component with type="single"/type="multiple", you can use setChoices() method or just update choices property:

this.inputEl.choices = [
  { id: 0, value: 'superstar', label: 'Superstar', selected: false },
  { id: 1, value: 'adizero', label: 'adizero', selected: false },
  { id: 2, value: 'stansmith', label: 'Stan Smith', selected: true }
];

this.inputEl.setChoices([
  { id: 0, value: 'superstar', label: 'Superstar', selected: false },
  { id: 1, value: 'adizero', label: 'adizero', selected: false },
  { id: 2, value: 'stansmith', label: 'Stan Smith', selected: true }
], 'adidas-shoes', 'adidas shoes', false);

You can also see the main library setChoices() documentation.

pouyamiralayi commented 5 years ago

thanks for your kind answer. i haven't noticed the type you just mentioned. i appreciate that. tnx in advance.

moelders commented 5 years ago

You are welcome @pouyamiralayi!