How to use API data

[ray2233]

Hi David,
I wanna use your custom-dual-listbox for a project, I am kind of new to Angular. How can I pull data into the picklist using an API. You have it hard coded in app.component. I have written a service with an API but not sure how to implement it. Any help would be highly appreciated.
Thanks
Ray

[czeckd]

If you can post an example of how you're trying to pull in data, I might be able to give an idea of how to incorporate it.

[ray2233]

Thanks so much for getting back with me, I am pasting my service.ts and my component.ts to give you an idea on what I am doing. I slightly modified your custom-listbox.component but I am not sure what I need to do in the app.component to make this work. Or do I need to modify the app.component instead to pull in the data. Please let me know.
Thanks a lot
Ray

my service file:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ListboxService {

// private servUrl = "http://www.mocky.io/v2/5eb451840e0000f359081b47";
items:any[] = [];

constructor(private http: HttpClient) {
this.fetchItems();
}

// fetchItems() {
// return this.http.get(this.servUrl);
// }

public fetchItems(){

this.http.get('http://www.mocky.io/v2/5eb451840e0000f359081b47')
  .subscribe( res => {
    this.items.map(res => res );
  });

}
}

my custom-listbox.component slightly modified:

import { Component, EventEmitter, IterableDiffers, Input, Output, OnInit } from '@angular/core';
import { DualListComponent } from 'angular-dual-listbox';
import { ListboxService } from '../listbox.service';

@component({
selector: 'app-custom-listbox',
templateUrl: './custom-listbox.component.html',
styleUrls: ['./custom-listbox.component.css']
})
export class CustomListboxComponent extends DualListComponent implements OnInit {

@Input() sourceName = '';
@Input() targetName = '';

@Output() selectChange = new EventEmitter();

items: any = [];
name: string;

constructor(differs:IterableDiffers, private listboxService: ListboxService) {
	super(differs);
}

ngOnInit () {
	this.items = this.listboxService.fetchItems();
  } 

moveAll() {
	this.selectAll(this.available);
	this.moveItem(this.available, this.confirmed);
}

removeAll() {
	this.selectAll(this.confirmed);
	this.moveItem(this.confirmed, this.available);
}


// Override function in DualListComponent to add custom selectChange event.
selectItem(list:Array<any>, item:any) {
	const pk = list.filter( (e:any) => {
		return Object.is(e, item);
	});
	if (pk.length > 0) {
		// Already in list, so deselect.
		for (let i = 0, len = pk.length; i < len; i += 1) {
			const idx = list.indexOf(pk[i]);
			if (idx !== -1) {
				list.splice(idx, 1);
				this.selectChange.emit( { key: item._id, selected: false });
			}
		}
	} else {
		list.push(item);
		this.selectChange.emit( { key: item._id, selected: true });
	}
}

}

[czeckd]

You could do this without creating your own CustomListboxComponent.

To use the standard , you could do something like in the service:

fetchItems(){
  return this.http.get('http://www.mocky.io/v2/5eb451840e0000f359081b47');
}

And then the component's template:

<dual-list [source]="items" key="name" display="name" [(destination)]="confirmed">
</dual-list>

And in the source file component that uses the dual-list:

export class MyComponent implements OnInit {
  items = [];
  constructor(private listboxService: ListboxService) {}
  ngOnInit() {
    this.listboxService.fetchItems().subscribe( data => this.items = data.items );
  }
}

To make your own CustomListboxComponent, you'll need to populate the array somehow, so in your code for it, something like:

ngOnInit () {
  // this.source = this.listboxService.fetchItems();
  this.listboxService.fetchItems().subscribe( data => this.source = data.items );
  this.available = new BasicList(DualListComponent.AVAILABLE_LIST_NAME);
  this.updatedSource();
  this.updatedDestination();
}

Or something like that. I've not tested the code to make sure it compiles, but this hopefully will give you an idea.

You need to assign/update the dual list's source array of items for the available side. With a custom dual-list, you can see all the guts you're overriding and/or basing it upon here: dual-list.component.ts.

(Note if you are also going to pull the confirmed from an api, you'll need to make sure the source array is inclusive of the confirmed array too.)

[ray2233]

Thank you so much it worked like magic!!

[halmulaiki]

Hello I wanted to ask how is it possible to add the filter to my custom-list box. Do I just add it as it is or I should make couple changes?