What is the reason for the error since Jquery is being imported

Asked

Viewed 152 times

0

I’m using Materialize together with Angular, but the dropdown menu is not working.

With the following error:

Uncaught Typeerror: $(...). dropdown is not a Function functions.js:6

The file funcoes.js has the following line of code only:

$(".dropdown-trigger").dropdown()
jquery angular materialize

  • Is the file funcoes.js called after the inclusion of the jQuery library? Edit your question to display how you include jquery and the source function script.

  • Yes, inside body <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="Assets/js/funcoes.js"> </script type>

  • I’m using the materialize

  • and where do you matter him?

2 answers

0

Check that all required libraries have been imported and are in the correct order.

  • jQuery
  • Materialize.js
  • Materialize.css

Below is an example working: 

$(".dropdown-trigger").dropdown();
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Importe tods as bibliotecas \/</a>

<ul id='dropdown1' class='dropdown-content'>
  <li><a href="#!">jQuery</a></li>
  <li><a href="#!">materialize.js</a></li>
  <li><a href="#!">materialize.css</a></li>
</ul>

0

in angular-cli.json should also be imported

  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
    "../node_modules/bootstrap-notify/bootstrap-notify.js",
    "../node_modules/chartist/dist/chartist.js"
  ],

and set the $ on app.module.ts

import * as $ from 'jquery';

Browser other questions tagged jquery angular materialize

You are not signed in. Login or sign up in order to post.