Include js function in Angular 6 project

Question

I need to use this navbar:

https://codepen.io/StephenScaff/pen/zvaCi

$("a#toggle").on('click', function(e) {
$('body').toggleClass('js-open');
$('nav').toggleClass('js-open');
    e.preventDefault();
});

$(".nav-background").on('click', function() {
  $('body, nav').removeClass('js-open');
});

In my Angular 6 project, but i dont know where to place this jQuery code.

I've tried placing this code on 'src\\assets', and call it from a script in my index.html but I'm getting this error in console:

SCRIPT5009: '$' is not defined

Can somebody help me with that?

Answer 1

You need to install jquery:

npm install jquery --save

in angular.json add jquery for your project scripts:

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

and import it from ts files like:

import * as $ from 'jquery';

further in file you can use jquery. Hope that helps.

Answer 2

The error you recieve indicates you didn't imported jQuery to your code.

You can import it by adding the code <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> to index.html, but there is a better option.

jQuery weights a lot, and you should not add it just for this small piece of code, insted, you should use angular. Find the object with the id toggle and add an onclick event to toggle a variable: (click)="navOpen = !navOpen" . Then, add the class dynamically to body and nav using [class.js-open]="navOpen" . Lastly, add an onclick event on nav-background to remove the class: (click)="navOpen = false" .

Here is an example:

<a id="toggle" href="#" (click)="navOpen = !navOpen"><div class="menubars"></div></a>
<nav [class.js-open]="navOpen">
  <div class="nav-background" (click)="navOpen = false">
    <ul>
      <li>
        <p>Introducing...</p>
        <a href="">Home</a>
      </li>
      <li>
        <p>Who we are, what we do</p>
        <a href="#">About Us</a>
      </li>
      <li>
        <p>What we think</p>
        <a href="#">The Blog</a>
      </li>
      <li>
        <p>Get to know us</p>
        <a href="#">Meet Us</a>
      </li>
      <li>
        <p>Let's talk</p>
        <a href="#">Join Us</a>
      </li>
    </ul>  
  </div>
</nav>