Add javascript plugins at angular 7

Question

I’m trying to plot a hierarchy chart on the page using a plugin Angular from this tutorial. Even looking at the demo and trying to put them that way

When I load the page, the page does not work...

That way:

<organization-chart [datasource]="ds"></organization-chart>

There is no error, but when I click on the route where the page is, the route does not load, but when I take the Component, from the plugin the route works again

But this same organizational chart I was able to load using html with javascript and jquery,

There’s a way I could use that same strategy?

Load javascript and css plugins at the angle since the component does not work?

This was the way I managed to assemble this organizing chart in Jquery with javascript and css plugin

const buscarDados = () => {

        $.ajax({
           url: "{{ route('medidor.hierarquia') }}",
           type: "get",
           dataType: "json"
        }).done( r => {
            mountHieraquy(r)
            /*setTimeout(() => {
                buscarDados()
            }, 5000);*/
        })
    }
    const mountHieraquy = ( obj ) => {
        $('#chart-container').html('')

        $('#chart-container').orgchart({
                    data:obj,
                    visibleLevel: 2,
                    nodeTemplate: nodeTemplate,
                    //zoom: true,
                    pan: true

             }) 

$('.ip_medidor').on('click', function(){
            const ip = $(this).data('ip')
            sessionStorage.setItem('medidor', ip)
            sessionStorage.setItem('opcao', 1)
            sessionStorage.setItem('errorCount', 0)
            //location.href= ; 
            const url = ip.indexOf("120") != -1 ? "{{ route('medidor.sepam') }}" : "{{ route('medicao.monitoramento') }}"
            window.open( url, '_blank');
        })       

}

As link and style

Is there a way you can take that code to Angular?

The files I added were

• html2cancas.min.js

• jquery.orgchart.js

• jquery.orgchart.min.js

• jquery.orgcart.css

• jquery.orgchart.min.css

Answer 1

Good only to leave registered as response here on the site for future research on the subject. For the use of libraries Javascript in projects Angular in addition to the use of CDN links in the application index, "by the best practices of the framework" the most indicated is that these scripts are installed (npm ,Yarn, etc...) if possible and declared in the file angular json. within the tag scripts.

Example of jQuery library import:

"scripts": [
   "node_modules/jquery/dist/jquery.js",
]

Thus obtaining your access and use globally across Angular application:

ngOnInit() {
  $(() => {
    console.log('jQuery funcionando') // dispara o log na iniciação do componente
  })
}

EDIT : If you own the library files just insert them in the directory Assets and indicate the path in the archive angular.json.