1
resposta

Angular com plugins do Jquery, como fazer funcionar?

Primeiramente gostaria de elogiar a boa didática e ótimos exemplos nas aulas que vem sido feitas pelo professor Flávio, que são ótimas e passam conhecimentos avançados, de uma forma simples.

Baixei todo o projeto da aula de Angular parte 1, e fiz funcionar e me espelhei neste, para criar um projeto do zero para criar um componente de um menu para o site. Para tal, eu precisaria do Jquery e do plugin SmartMenus (https://www.smartmenus.org/docs/), que utiliza Jquery.

Exemplo de uso em html padrão:

<!-- Adiciona-se os css -->
<!-- SmartMenus core CSS (required) -->
<link href='sm-core-css.css' rel='stylesheet' type='text/css' />

<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href='sm-blue/sm-blue.css' rel='stylesheet' type='text/css' />
Include the JS files on your page (preferably after your page content right before the closing </body> tag):


<!-- Adiciona os JSs -->
<!-- jQuery -->
<script src="jquery.js" type="text/javascript"></script>

<!-- SmartMenus jQuery plugin -->
<script src="jquery.smartmenus.js" type="text/javascript"></script>


<!-- Depois faz a chamada do plugin -->
$(function() {
  $('#main-menu').smartmenus();
});

Bem no Angular eu fiz as instalações do Jquery e SmartMenus via NPM normalmente. No arquivo angular.json configurei as chaves STYLES e SCRIPTS para chamar cada dependência.

No componente principal, app.component.ts eu fiz a importação do módulo do menu e em app.component.html coloquei a TAG que chama o menu e funcionou, mostrando o HTML puro.

Para fazer o plugin rodar, tentei fazer o seguinte: em app.component.ts coloquei os imports:

import * as jQuery from 'jquery';
import 'smartmenus';

e no ngOnInit() coloquei o código para chamar o plugin e ativar o menu:

jQuery(() => {
       jQuery("#pqt-menu-principal").smartmenus();
    });

Mas ao rodar o projeto o mesmo não funcionou. Erro apresentado no console do navegador (Chrome atualizado).

jQuery.Deferred exception: Cannot read property 'parentNode' of null TypeError: Cannot read property 'parentNode' of null
    at $.SmartMenus.menuInit

Como posso fazer para executar o código acima? Teria como explicar e melhor prática de rodar o jQuery com plugins que funcionam desta forma?

Exemplo:

$("elementoseletor").plugin({opcoesdoplugin});

Fico grato desde já.

1 resposta

Bom dia, José! Tudo bom?

Esse erro acontece porque no ngOnInit esse elemento ainda não existe, então ele não consegue encontrar um elemento com esse ID.

Mas, apesar de ser possível, o ideal é não utilizar jQuery junto com Angular e se não quiser fazer o menu na mão, procurar pelo plugin que você precisa com Angular. Existe o próprio Bootstrap, por exemplo, pra Angular e que tem um componente de menu.

Espero ter ajudado!

Abraços