How can you load a chosen list in Angular's Mat Selection List component?

Question

How can you load a chosen list in Angular's Mat Selection List component?

I populated my selection list with a list of items. How can I specify which item should be selected in the list after it has been loaded?

Here is the HTML code snippet:

<div class="col-md">
    <div class="form-group">
      <label>Sub Issue Listbox</label>
      <mat-selection-list
        #IssueList
        style="max-height: 250px; overflow: auto"
        formControlName="issueId">
        <mat-list-option
          *ngFor="let item of subIssueList"
          [value]="item.issueId">
          {{ item.issueDesc }}
        </mat-list-option>
      </mat-selection-list>
      <p>
        Options Selected:
        {{ IssueList.selectedOptions.selected.length }}
      </p>
      <button
        (click)="updateOqcReject()"
        mat-raised-button
        color="accent">
        Update Issue
      </button>
    </div>
</div>

This is the array for the loaded list.

https://i.sstatic.net/HTtYA.png

And this is the array for the selected list. https://i.sstatic.net/Ct0wb.png

If anyone could provide guidance on how to set the selected value in the list, that would be greatly appreciated.

angular typescript angular-material

Answer 1

Answer №1

To populate your control, utilize the setValue function along with the issueId

Make sure to call this method after loading your list.

For instance:

this.form.get('issueId').setValue(selectedValue);

In this case, selectedValue should represent the desired issueId to be selected

Answer 2

To populate your control, utilize the setValue function along with the issueId

Make sure to call this method after loading your list.

For instance:

this.form.get('issueId').setValue(selectedValue);

In this case, selectedValue should represent the desired issueId to be selected

Answer 3

Answer №2

To utilize the MatSelectionList, you can query it and make use of the [selected] input within the mat-selection-list

@Component({
  selector: 'list-selection-example',
  styleUrls: ['list-selection-example.css'],
  templateUrl: 'list-selection-example.html',
})
export class ListSelectionExample {
  typesOfShoes: any[] = [{id: 0, title: 'Boots'}, {id: 1, title: 'Clogs'}, {id: 2, title: 'Loafers'}, {id: 3, title: 'Moccasins'}, {id: 4, title: 'Sneakers'}];

  @ViewChild(MatSelectionList) list: MatSelectionList;

  ngAfterViewInit() {
    const mySelections = [{id: 1, title: 'Boots'}]
    /* Select your selections into MatSelectionList */
    mySelections.map((s) => this.list.selectedOptions.select(s.id as any))
  }
}

Additionally, in the html file:

<mat-selection-list #shoes>
  <mat-list-option
    [selected]="shoes.selectedOptions.isSelected(shoe.id)"
    [value]="shoe.id"
    *ngFor="let shoe of typesOfShoes"
  >
    {{shoe.title}}
  </mat-list-option>
</mat-selection-list>

<p>Options selected: {{shoes.selectedOptions.selected.length}}</p>

Feel free to try out the functionality on Stackblitz

Answer 4

To utilize the MatSelectionList, you can query it and make use of the [selected] input within the mat-selection-list

@Component({
  selector: 'list-selection-example',
  styleUrls: ['list-selection-example.css'],
  templateUrl: 'list-selection-example.html',
})
export class ListSelectionExample {
  typesOfShoes: any[] = [{id: 0, title: 'Boots'}, {id: 1, title: 'Clogs'}, {id: 2, title: 'Loafers'}, {id: 3, title: 'Moccasins'}, {id: 4, title: 'Sneakers'}];

  @ViewChild(MatSelectionList) list: MatSelectionList;

  ngAfterViewInit() {
    const mySelections = [{id: 1, title: 'Boots'}]
    /* Select your selections into MatSelectionList */
    mySelections.map((s) => this.list.selectedOptions.select(s.id as any))
  }
}

Additionally, in the html file:

<mat-selection-list #shoes>
  <mat-list-option
    [selected]="shoes.selectedOptions.isSelected(shoe.id)"
    [value]="shoe.id"
    *ngFor="let shoe of typesOfShoes"
  >
    {{shoe.title}}
  </mat-list-option>
</mat-selection-list>

<p>Options selected: {{shoes.selectedOptions.selected.length}}</p>

Feel free to try out the functionality on Stackblitz

How can you load a chosen list in Angular's Mat Selection List component?

Answer №1

Answer №2

Similar questions

Enhancing User Experience through 'Remember Me' Feature in Angular App

React with TypeScript: The struggle of getting LocalStorage to work

When implementing useReducer with TypeScript, the error "Argument of type '(type, action) => { state: (...}' is not assignable to parameter of type 'ReducerWithoutAction<any>'" may occur

Unable to set up ng-bootstap on Angular version 16.1.3

Guide on creating a dash-patterned line over a rectangle using PixiJS and Angular

Achieving selective exclusion of specific keys/values while iterating through an array and rendering them on a table using Angular

What is the significance of utilizing the "$event" keyword for event binding in Angular? (for the end result)

The pagination, sorting, and filtering features in my Angular Material project seem to be malfunctioning

"Element of design focused on style and arrangement

Contrast between SimpleChange and SimpleChanges

Modify the disabled background color of the mat-form-field component in Angular version 15

Ways to retrieve sorted and updated items in ngx-datatable post-sorting

Dealing with 400 Bad Request Error Handling in Angular 6 when communicating with WebApi (using HttpClient)

The MemoizedSelector cannot be assigned to a parameter of type 'string'

"Customize the appearance of ng-bootstrap datepicker selection with a unique

Testing Angular components using ViewChild and directives

tsconfig.json: No input files were detected in the configuration file

Preserve Inference in Typescript Generics When Typing Objects

What is the best way to ensure that a div containing lengthy text wraps to the next line as if it were only text overflow?

Multiple invocations of the callback function in an Angular5 template binding