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á.