#mat-selection list with check all

20 messages · Page 1 of 1 (latest)

inner plaza
severe forum
inner plaza
#

Well, there is no button to select all options in the example, so how could it not work? You have to implement this yourself, and on the click of the button, call the selectAll() method on the matSelectionList.

severe forum
severe forum
#

Hi,

I did what you suggested but I'm having trouble selecting them all. Can you help me?

bitter shore
#

Hi, explain and illustrate what you tried as a reference to know how to help you to fix your situation.

severe forum
#

It's the following... I have a dialog where data is displayed for the user to select which one he wants to work with.
However, due to the large amount of data, I decided to insert a checkbox at the top of each department related to the data. And when clicking on this checkbox it selects all the data for upload. Individually I can get the data. But I am not able to select all at once by clicking on this checkbox

#

my dialog 👇🏿

a.png
#

my cod

# 
<h2 mat-dialog-title>Certidões disponíveis</h2>
<mat-dialog-content>
  <div class="cert-list-all">
    <mat-selection-list>
      <ng-container *ngFor="let certidao of certidoes; let index = index; let last = last">
        <ng-container *ngIf="index > 0 else head_list_name1">
          <ng-container *ngIf="certidao.departamento != certidoes[index-1].departamento">
            <mat-list-option (selectedChange)="selectAll(certidao.departamento!)" [selected]="selection.hasValue()">
              <div mat-subheader>
                {{ nameOfDepartment(certidao.departamento!) }}
              </div>
            </mat-list-option>
          </ng-container>
        </ng-container>

        <ng-template #head_list_name1>
          <mat-list-option (selectedChange)="selectAll(certidao.departamento!)" [selected]="selection.hasValue()">
            <div mat-subheader>
              {{ nameOfDepartment(certidao.departamento!) }}
            </div>
          </mat-list-option>
        </ng-template>

        <mat-list-option (selectedChange)="onSelectionChange(certidao)">
          <mat-icon mat-list-icon class="folder-list">{{ iconOfDepartment(certidao.departamento!) }}</mat-icon>
          <strong>{{ certidao.numero_cpha }}</strong>
        </mat-list-option>

        <mat-divider *ngIf="!last"></mat-divider>
      </ng-container>
    </mat-selection-list>
    <div class="loading" *ngIf="loading">
      <mat-spinner mode="indeterminate" [diameter]="50"></mat-spinner>
    </div>
  </div>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button type="button" mat-button [mat-dialog-close]="false" color="accent" cdkFocusInitial>Fechar</button>
  <button type="button" mat-button color="primary" [disabled]="!certidoes || selection.selected.length <= 0"
    (click)="onReceive()">Receber</button>
</mat-dialog-actions>```
# 
/**
  *
  * @param departamento Number
  */
  selectAll(departamento:number) {
  
    this.selection.select(... this.certidoes.filter(item => item.departamento! == departamento));

    const el = this.certidoes.filter(item => item.departamento! == departamento);
    el.forEach(function (value: any) {
      value.checked = true;
    }); 
  }```
#

When I print to the console, as shown in the image, it returns correctly. But the cashboxes are not selected

#

I verified that when clicking on one of the cashboxes, the field receives this configuration

<mat-pseudo-checkbox class="mat-pseudo-checkbox ng-star-inserted mat-pseudo-checkbox-checked" ng-reflect-state="checked" ng-reflect-disabled="false"></mat- pseudo-checkbox>

#

How do I change all on click? I've tried changing the css, setting the value to checked and nothing works

#

Another discord user tried to help me but he doesn't understand Material Design

bitter shore
#

From what i understand from your code, your checkboxes aren't bound to your model: so they can't update as theere aren't connected.

#

You have a list of options with a eventListener for changes upon them but nothing to update the checkboxes themselves from the component.

#

You need to bind a form to your template

severe forum
bitter shore