I am trying to implement selectAll() and deselectAll() but it is showing error:

I am using template-driven form. Here is my code:

<mat-selection-list name="role" *ngIf='userActions === AssignmentTypesForProductivityAppsEnum.UserRole'
                    [(ngModel)]="assignProductivityApplication.roleIds" #UserRoles="ngModel" multiple required>
                    <mat-list-option #allSelected (click)="selectAll(allSelected.selected)" [value]="0"
                        checkboxPosition="before">All</mat-list-option>
                    <mat-list-option *ngFor="let role of userRoles | searchFilter : searchTerm : 'role'; let i=index"
                        checkboxPosition="before" [value]='role.guId'>
                        {{role.role}}
                    </mat-list-option>
                </mat-selection-list> 

And in ts file:

@ViewChild('allSelected', {static: true}) private allSelected: MatSelectionList; 
selectAll(checkAll) {
        if (checkAll) {
            this.assignProductivityApplication.UserRoles = [];
            this.assignProductivityApplication.UserRoles.push(... this.userRoles.map(item => item.guId));
            this.allSelected.selectAll();
        }
      }

I am trying to implement selectAll() and deselectAll() but it is showing error:

I am using template-driven form. Here is my code:

<mat-selection-list name="role" *ngIf='userActions === AssignmentTypesForProductivityAppsEnum.UserRole'
                    [(ngModel)]="assignProductivityApplication.roleIds" #UserRoles="ngModel" multiple required>
                    <mat-list-option #allSelected (click)="selectAll(allSelected.selected)" [value]="0"
                        checkboxPosition="before">All</mat-list-option>
                    <mat-list-option *ngFor="let role of userRoles | searchFilter : searchTerm : 'role'; let i=index"
                        checkboxPosition="before" [value]='role.guId'>
                        {{role.role}}
                    </mat-list-option>
                </mat-selection-list> 

And in ts file:

@ViewChild('allSelected', {static: true}) private allSelected: MatSelectionList; 
selectAll(checkAll) {
        if (checkAll) {
            this.assignProductivityApplication.UserRoles = [];
            this.assignProductivityApplication.UserRoles.push(... this.userRoles.map(item => item.guId));
            this.allSelected.selectAll();
        }
      }

• javascript
• angular
• typescript
• angular-material
• angular8

1 Answer 1

matSelectionList is exported in mat-selectin-list ponent. Move allSelected template variable on mat-selection-list

Try this:

<mat-selection-list name="role" #allSelected  *ngIf='userActions === AssignmentTypesForProductivityAppsEnum.UserRole'
                        [(ngModel)]="assignProductivityApplication.roleIds" #UserRoles="ngModel" multiple required>
                        <mat-list-option (click)="selectAll(allSelected.selected)" [value]="0"
                            checkboxPosition="before">All</mat-list-option>
                        <mat-list-option *ngFor="let role of userRoles | searchFilter : searchTerm : 'role'; let i=index"
                            checkboxPosition="before" [value]='role.guId'>
                            {{role.role}}
                        </mat-list-option>
</mat-selection-list>

Example