Agfdhyk

I'm tasked with integrating an existing UI into another already existing Angular app and got hung up on this...

I know the data + transform works well outside of the Angular context.

I didn't see an npm package for the jquery json2html so I tried to import that part in an ad-hoc manner by saving it along side the component's directory.

It produces ERROR TypeError: $(...).json2html is not a function...

...

import * as $ from 'jquery';

import json2html from 'json2html';

import * from './jquery.json2html.min.js';



...



$('#myTable > tbody').json2html(data,transform);

before anything you have to add jQuery in your angular.json then in the component you would to use jQuery with it do so

....

declare let $: any;    // you can use "jQuery" keyword instead of "$"



@component({

  selector: '...',

  templateUrl: ['...'],

  styleUrls: ['...']

})

export class JqueryExampleComponent implements onInit {



  constructor(private eleRef: ElementRef) {}



  ngOnInit() {

    $(this.eleRef.nativeElement).find('#myTable > tbody').json2html(data,transform);

  }

}

when you use $(this.eleRef.nativeElement) that gonna get the tree root of the component dom then .find('selector') to get the element you want

    npm install node-json2html





    ...

    import json2html from 'json2html';

    import * as $ from 'node-json2html';



    ...



ngAfterViewInit(){

    $('table#myTable > tbody').json2html(data,transform);



}

or,

... 

import json2html from 'json2html';

import * as $ from './jquery.json2html.min.js';



...



$('table#myTable > tbody').json2html(data,transform);

Link:- http://www.json2html.com/