Unable to set Destination Values

[shaikhspear16]

I am successfully able to bind source values. I am unable to bind the destination array.
The arrays are in the same format.

.html

<div class="section-select-profiles">
          <label class="lbl-select-profiles">Select Profile(s):</label>
          <mat-divider></mat-divider>
          <dual-list [source]="source" [(destination)]="confirmed" height="300px"></dual-list>
      </div>

.ts

source = [];
  confirmed = [];
  name: string;

  constructor(
    public dialogRef: MatDialogRef<UpdateCategoryComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {
    this.source = data.source;
    this.confirmed = data.selected;
  }

Arrays:
selected:["ABC", "BCA", "CAB"]
confirmed : ["PQR", "RQP", "QPR"]

[RoystonDmello]

Even I am having the same issue.

My destination array is coming from a service.

[RoystonDmello]

Okay, so I've been using it incorrectly. And I guess so have you.

The destination must be a subset of the source.

#55

[teja22060]

Even i am getting destination array as empty any suggestions

[shareeef]

The documentation is little confusing. Finally understood that the source has to be full list of items and destination has to be subset. For example:
source = [1,2,3,4,5]
destination=[1,2]

Control will take care of displaying [3,4,5] in source and [1,2] in the destination.
So make sure source have all the items in the list and destination will have subset of the source based on the key of the objects.

One feature that is missing is to get a changed set vs original. How can you get the items that were added and deleted? Maintain original destination and compare the final one to get change set.

[Dark0rion]

do not delete records from the source list because if you do so in the destination list the selected objects will not appear