Difference between revisions of "IONIC3 - How to assign content from jquery to typescrypt"

From GUILLARD WIKI
Jump to navigation Jump to search
(Replaced content with "<script async src="//jsfiddle.net/LeBlond/teucxvon/embed/js,html/"></script>")
Line 1: Line 1:
In your .ts file:
<script async src="//jsfiddle.net/LeBlond/teucxvon/embed/js,html/"></script>
 
<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:05, 29 March 2018

<script async src="//jsfiddle.net/LeBlond/teucxvon/embed/js,html/"></script>

Retrieved from "http://thomasguillard.fr/wiki/index.php?title=IONIC3_-_How_to_assign_content_from_jquery_to_typescrypt&oldid=80"