Mat-selection-list with close icon baseed on objects

arj 0
Viewed 37

Am trying to create a UI like below based on the following data

data ={Parent1:[child1,child2],Parent2:[child3,child4]}

enter image description here

Is it possible to make this UI from mat-selection-list?

OR any other one available

And also need to know how to iterate above data structure through *ngFor

Expecting a solution

Thanks in advance.

mat-select angular-material angular
2 Answers

Have you tried using keyvalue pipe provided by Angular directly? It is definitely possible to create this UI from mat-selection-list. What should be the features? Should all checkboxes be independent from each other or should a click on the parent checkbock toggle all child checkboxes? In the second case it could be benefitial to use MatTableModule insted.

Fabian Strathaus0

You can use the following template to render data as shown in UI: The parent entry is not a list-option, therefore anything wanted can be inserted on the right hand side of the list item.

<mat-selection-list>
  <ng-container *ngFor="let item of (data | keyvalue)">
    <mat-list-item>
      {{item.key}}
    </mat-list-item>
    <mat-divider></mat-divider>
    <mat-list-option *ngFor="let child of item.value">
      {{child}}
    </mat-list-option>
  </ng-container>
</mat-selection-list>
Fabian Strathaus0
Related