How to bind an array of object to jqxLIstbox?

[learner1010Participant]

Hi

i have created the following service

@Injectable()
export class LMSVideoResulful { 
    getVideos( enrolmentId : number ) :Observable<Array<Video>> {
        var x = new Array<Video>();
        //https://www.youtube.com/embed/MV0vLcY652c
        x.push( new Video( "SQL 1", "https://www.youtube.com/embed/qMvDsarDdK0", "sdsdssdss" ));
        x.push( new Video( "SQL 2", "https://www.youtube.com/embed/hVBALRtY8g0", "sdsdssdss" ));
        x.push( new Video( "SQL 3", "https://www.youtube.com/embed/qMvDsarDdK0", "sssdssds" ));
        x.push( new Video( "SQL 4", "https://www.youtube.com/embed/8Fo_KTDrBSU", "sdsdssdss" ));
        return from([x]);
    }
}

The model Video

export class Video{

    constructor(        
        public title : string,
        public  videoUrl: string,
        public  description : string
    ){}
}

Component class

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import {Input  } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

import { LMSVideoResulful } from '../../LMSServices/LMSVideos.service' 
import { Video } from '../../LMSServices/video.model';

import{ jqxListBoxComponent } from 'jqwidgets-ng/jqxlistbox';           

@Component({
  selector: 'app-video-list',
  templateUrl: './video-list.component.html',
  styleUrls: ['./video-list.component.css']
})

export class VideoListComponent implements OnInit{

  safeURL : any;
  videoList : Array<Video>

  @ViewChild('listBoxReference', { static: false }) myListBox: jqxListBoxComponent;

  constructor( private _sanitizer: DomSanitizer, public myVideoService : LMSVideoResulful ){    

    this.safeURL = this._sanitizer.bypassSecurityTrustResourceUrl("https://www.youtube.com/embed/MV0vLcY652c");

    this.myVideoService.getVideos(1).subscribe( x => {
      this.videoList = x;
      console.log(JSON.stringify(x));
    }, error => error)
   
  }

 
	//access stored object 
  onChange(e){
      console.log("select cahnge::" + e.args.item.label );
  }

 ngOnInit(){  }

}

The View

 <jqxListBox #listBoxReference  [width]="100"  (onChange)="onChange($event)">  
            <ul>  
                <li *ngFor="let v of videoList">  
                    
                    {{v?.title}}
                </li>  
            </ul>  
         </jqxListBox>  

Issue #1
At the moment i can bind only a simple value. But assume i would want to bind an object array to listbox, how do i bind an object array? ( the Binding must be like how we do in drop downs, which has a value and a display text. So the object “Video” property ‘title’ must be display text and property “videoUrl” must the value of each list item )

Issue #2
How do i access each select item’s display text and value ?

thanks

[HristoParticipant]

Hello learner1010,

Please, take a look at this example:
https://stackblitz.com/edit/github-dqudwx-ndtwb8?file=src/app/app.component.ts
But the right approach should be related to this demo:
https://stackblitz.com/edit/github-okeqei?file=src%2Fapp%2Fapp.component.ts

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts