Difference between revisions of "IONIC3 - How to assign content from jquery to typescrypt"
Jump to navigation
Jump to search
Line 14: | Line 14: | ||
@ViewChild('debug') debugER: ElementRef; | @ViewChild('debug') debugER: ElementRef; | ||
mix() { | mix() { | ||
Promise.all([]).then(data => { | Promise.all([]).then(data => { | ||
// 1) Jquery code here | |||
// Some jquery code | // 1) Jquery code here | ||
// 2) We use the html page to post the json data | // Some jquery code | ||
$('#debug').html(JSON.stringify(json, undefined, 2)); | // 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() { | 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); | |||
} | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Revision as of 10:06, 13 April 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>