Difference between revisions of "IONIC3 - How to assign content from jquery to typescrypt"
Jump to navigation
Jump to search
Line 1: | Line 1: | ||
<script | <script async src="//jsfiddle.net/LeBlond/teucxvon/embed/js,html/"></script> | ||
In your .ts file: | |||
<syntaxhighlight lang="javascript"> | |||
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); | |||
} | |||
} | |||
</syntaxhighlight> | |||
In your .html file: | |||
<syntaxhighlight lang="html"> | |||
<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> | |||
</syntaxhighlight> |
Revision as of 17:07, 29 March 2018
<script async src="//jsfiddle.net/LeBlond/teucxvon/embed/js,html/"></script>
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>