How to add third party plugin jquery on angular 7?

Question

Hi I´ve been trying to add a third party jquery plugin on my App Angular 7. So far I´ve done: Added in angular.json the location of files like this:

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "src/assets/js/ticker/jquery.easy-ticker.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
 ]

In my AppComponent:

declare var $: any; interface JQuery { easyTicker(options?: any):
JQuery; }

Try to execute:

 ngAfterViewInit() {

    $('.ultimasExecucoes').easyTicker({
      visible: 1,
      interval: 4000
    });
}

In my template

<div class="ultimasExecucoes">
            <ul>
            <li *ngFor="let workFlow of execucoesEncerradas"> 
                {{workFlow.nomeWorkFlow}} - Data Início: {{workFlow.dataInicioWf | date : 'dd/MM/yyyy HH:mm:ss'}} 
                - Data Encerramento: {{workFlow.dataEncerramentoWf | date : 'dd/MM/yyyy HH:mm:ss'}} 
                - Resultado: {{workFlow.resultadoExecucao}}
            </li>
            </ul>
        </div>

But nothing happens on my page. How can I add the plugin jquery ?

Answer 1

Hi after I read a many articles about jquery types I solved this issue like this:

1. First you need to install jquery/types: npm install --save @types/jquery
2. Inside directory nodes_modules/@types I created a folder "easyticker"(name of plugin)
3. Into directory "easyticker" I created file: index.d.ts inside I put this:

declare module 'easyTicker'

interface JQuery { easyTicker(options?: any): JQuery; }

4. On my Component I imported jquery:

import * as jQuery from 'jquery'

5. Then I called my plugin:

ngAfterViewInit() {

 /* JqueryEasyTicker */ (<any>$)( document ).ready(function() { (<any>$)('#ultimasExecucoes').easyTicker({ visible: 1, interval: 8000 }); }); }