This is a migrated thread and some comments may be shown as answers.

Not able to bind ngModel with chip component

2 Answers 119 Views
Chip
This is a migrated thread and some comments may be shown as answers.
Maitri
Top achievements
Rank 1
Veteran
Maitri asked on 29 Jun 2020, 12:44 PM
I need to have ngModel in chip component because my list is updated from backend and accordingly I want to remove/add chips on UI. So basically every time my list is updated the chip component should show the items which are there in that list.

2 Answers, 1 is accepted

Sort by
0
Accepted
Georgi
Telerik team
answered on 01 Jul 2020, 09:15 AM

Hello Maitri,

I assume you receive a list (array) of items from your backend? If that's the case, a simple chip component as it is, won't do the trick because it represents a single piece of info and not a list. You could make your own chip-list component and use that to display and change the said list of items.

Another alternative could be to use the multiselect as I think it does a similar thing to what I think you're trying to achieve.

You don't necessarily need to use [(ngModel)] in order to display the data. An alternative would be to equip your chip-list component with an @Output, and emit events which then update the value in your parent component. And eventually send those back to your backend.

However if you have other reasons for requiring the ngModel directive, then you need to implement the ControlValueAccessor interface in your child component. Here is a working demo.

More on the ControlValueAccessor mechanism you can see here: https://www.youtube.com/watch?v=EY0Nw06xyt8&t=766s

Hope that answers your question. Please let me know if I can help you any further.

Regards,
Georgi
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Maitri
Top achievements
Rank 1
Veteran
answered on 02 Jul 2020, 06:01 AM
Thanks Georgi !! The solution you provided works well and fulfill my requirement.
Tags
Chip
Asked by
Maitri
Top achievements
Rank 1
Veteran
Answers by
Georgi
Telerik team
Maitri
Top achievements
Rank 1
Veteran
Share this question
or