Select/Deselect all options mat-list-item

[vague nimbus]

Hi,

I have a dynamic list of information where the user will import. As the data can be 1 or more, I decided to put an ALL checkbox where when clicking on it all the checkboxes are selected and when clicking again all are unmarked. However, I am not able to implement it. It is not accepting the set value and I cannot select all.

my cod: https://stackblitz.com/edit/angular-ynbtlg?file=src%2Fapp%2Flist-selection-example.ts,src%2Fapp%2Flist-selection-example.html

[vague nimbus]

Select/Deselect all options mat-list-item

[novel root]

There are a couple errors in your approach:

1. Don't mix ReactiveForms and TemplateForms
2. Don't apply formGroup and formControlName to the same element
3. For the logic of your toggleSelection, you need to iterate over the shoes selects, not over the toggle (that will be always one).

I suggest you to take the time to read carefully official docs
https://angular.io/guide/forms-overview

[vague nimbus]

I will read it!
But would you have any examples that I could look up to? I really need to solve this problem

It wasn't for lack of research. But everyone I followed by example went wrong

[novel root]

Setup correctly a form first, then we'll look into the select all functionality.

[vague nimbus]

ok

https://stackblitz.com/edit/angular-ynbtlg-khjvmu?file=src%2Fapp%2Flist-selection-example.ts,src%2Fapp%2Flist-selection-example.html

configured

[novel root]

You didn't bind the formControl

And you probably want a FormArray

and there's no multiple directive for FormGroup

[vague nimbus]

the FormArray would go in the checkbox or in the mat-list?