I am encountering an issue while trying to incorporate selectAll() and deselectAll() functions. The error message that I am receiving can be viewed here.
My implementation involves a template-driven form, and below is the snippet of 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>
Below is the corresponding logic in the TypeScript 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();
}
}