IONIC3 - How to assign content from jquery to typescrypt
Jump to navigation
Jump to search
In your .ts file:
import * as $ from 'jquery';
import { ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
// 0) Access with typescrypt to the native element
@ViewChild('debug') debugER: ElementRef;
mix() {
Promise.all([]).then(data => {
// 1) Jquery code here
// Some jquery code
// 2) We use the html page to post the json data
$('#debug').html(JSON.stringify(json, undefined, 2));
}).then(() => {
// 3) When jquery is done, typescrypt function here
this.update()
});
}
}
update() {
// 4) We extract the json from the html
this.jsonTxt = this.debugER.nativeElement.innerText;
// 5) We convert the json string to typescript array
this.jsonList = JSON.parse(this.jsonTxt);
console.log(this.jsonList);
}
}
In your .html file:
<ion-content padding>
<ion-list id="container">
<ion-item *ngFor="let item of jsonList">
<ion-row>
<ion-col align-self-center text-left col-6>
{{ item.name }}
</ion-col>
</ion-row>
</ion-item>
</ion-list>
<div id="debug" hidden #debug></div>
</ion-content>