import { Component, ViewChild, AfterViewInit, ViewEncapsulation } from '@angular/core'; import { jqxSortableComponent } from '../../../jqwidgets-ts/angular_jqxsortable'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['app.component.css'], encapsulation: ViewEncapsulation.None }) export class AppComponent implements AfterViewInit { @ViewChild('mySortable') mySortable: jqxSortableComponent; ngAfterViewInit(): void { this.loadInfo(); } loadInfo(): void { let firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven']; let lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan']; let titles = ['Sales Representative', 'Vice President, Sales', 'Sales Representative', 'Sales Representative', 'Sales Manager']; for (let i = 0; i < firstNames.length; i++) { let element = document.createElement('div'); let imgurl = '../images/' + firstNames[i].toLowerCase() + '.png'; let img = ''; element.innerHTML = '

' + img + '	' + firstNames[i] + ' ' + lastNames[i] + '
	' + titles[i] + '

'; this.mySortable.elementRef.nativeElement.firstElementChild.appendChild(element); } }; }