Can't bind the confirmed (destination) box values are not displaying on right side box If the confirmed is array of objects dynamicallly.

[vijayakumarrajug]

If anybody know please help on this issue.

angular-dual-listbox

<dual-list [sort]="keepSorted" [source]="source" [key]="key" [display]="display" [filter]="filter"
[(destination)]="confirmed" height="265px" [format]="format" [disabled]="disabled">

let selectedList:Array = [
{ key: 26, station: 'Hermosa', state: 'CO' },
{ key: 27, station: 'Rockwood', state: 'CO' },
{ key: 28, station: 'Tacoma', state: 'CO' }
]

this.confirmedStations = selectedList;

[JahazielSam]

Same issue

[marco-souza-picpay]

Same issue.

[czeckd]

In the future, please put a complete example of the code you're having a problem with. As best as I can understand based on the code snippet above, this is what you are attempting to do. Here is a working example:

import { Component, OnInit } from '@angular/core';
import { DualListComponent } from 'angular-dual-listbox';

@Component({
  selector: 'app-demo',
  styles: [
    'form { margin-top: 15px; }',
    '.checkbox { margin-top: inherit; }',
    'ul.nav-tabs { cursor: pointer; }',
    '.container-fluid { padding: 12px; }'
  ],
  template: `
<div class="container-fluid">
  <dual-list [sort]="keepSorted" [source]="source" [key]="key" [display]="display" [filter]="filter"
    [(destination)]="confirmed" height="265px" [format]="format" [disabled]="disabled"></dual-list>
</div>
`
})

export class DemoAppComponent implements OnInit {

  private stations: Array<any> = [
    { key: 1, station: 'Antonito', state: 'CO' },
    { key: 2, station: 'Big Horn', state: 'NM' },
    { key: 3, station: 'Sublette', state: 'NM' },
    { key: 4, station: 'Toltec', state: 'NM' },
    { key: 5, station: 'Osier', state: 'CO' },
    { key: 6, station: 'Chama', state: 'NM'},
    { key: 7, station: 'Monero', state: 'NM' },
    { key: 8, station: 'Lumberton', state: 'NM' },
    { key: 9, station: 'Duice', state: 'NM' },
    { key: 10, station: 'Navajo', state: 'NM' },
    { key: 11, station: 'Juanita', state: 'CO' },
    { key: 12, station: 'Pagosa Jct', state: 'CO' },
    { key: 13, station: 'Carracha', state: 'CO' },
    { key: 14, station: 'Arboles', state: 'CO' },
    { key: 15, station: 'Solidad', state: 'CO' },
    { key: 16, station: 'Tiffany', state: 'CO' },
    { key: 17, station: 'La Boca', state: 'CO' },
    { key: 18, station: 'Ignacio', state: 'CO' },
    { key: 19, station: 'Oxford', state: 'CO' },
    { key: 20, station: 'Florida', state: 'CO' },
    { key: 21, station: 'Bocea', state: 'CO' },
    { key: 22, station: 'Carbon Jct', state: 'CO' },
    { key: 23, station: 'Durango', state: 'CO' },
    { key: 24, station: 'Home Ranch', state: 'CO' },
    { key: 25, station: 'Trimble Springs', state: 'CO' },
    { key: 26, station: 'Hermosa', state: 'CO' },
    { key: 27, station: 'Rockwood', state: 'CO' },
    { key: 28, station: 'Tacoma', state: 'CO' },
    { key: 29, station: 'Needleton', state: 'CO' },
    { key: 30, station: 'Elk Park', state: 'CO' },
    { key: 31, station: 'Silverton', state: 'CO' },
    { key: 32, station: 'Eureka', state: 'CO' }
  ];

  tab = 1;
  keepSorted = true;
  key = 'key';
  display = this.stationLabel;
  filter: any;
  source = this.stations;
  confirmed: Array<any> = [];
  disabled = false;
  sourceLeft = true;
  format: any = DualListComponent.DEFAULT_FORMAT;

  ngOnInit() {
    let selectedList = [
      { key: 26, station: 'Hermosa', state: 'CO' },
      { key: 27, station: 'Rockwood', state: 'CO' },
      { key: 28, station: 'Tacoma', state: 'CO' }
    ];

   this.confirmed = selectedList;
  }

  private stationLabel(item: any) {
    return item.station + ', ' + item.state;
  }
}

If this is not what you're trying to do, then please put a complete, working example of your code.

[marco-souza-picpay]

I found out what I did wrong.
I was deleting the item from the source after including it in the confirmed array. As a result, it was not displayed, even though it was in the destination array.
So I deleted this pop command in origin and it worked.

Thank you very much.