IONIC3 - How to assign content from jquery to typescrypt

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>