Difference between revisions of "IONIC3 - How to assign content from jquery to typescrypt"
Jump to navigation
Jump to search
Line 44: | Line 44: | ||
In your .html file: | In your .html file: | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5" line> | ||
<ion-content padding> | <ion-content padding> |
Revision as of 10:52, 18 May 2018
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>