How can I use JavaScript code in Angular 7?

Question

I'm trying to make a collapsible navbar with the help of MaterializeCSS when used on mobile screen and need to use JavaScript code in it. Where should I write this JavaScript code?

This is the code I want to use:

**$(document).ready(function(){
    $('.sidenav').sidenav();
  });**

Answer 1

Step-1: Created a js folder inside the assets folder.

Step-2: Created a new .js file inside the js folder. Assets -> js -> example.js

Step-3: Added path of the example.js in angular.json inside the scripts array.

Step-4: Declared the js function created in example.js inside the component.ts file where that function is needed.

Step-5: Made a call to the declared function inside ngOnInIt().

Answer 2

1. Install jQuery npm install jquery
2. Install MaterializeCSS npm install materialize-css@next
3. Install types npm install --save @types/materialize-css @types/jquery
4. Open angular.json and find scripts field
5. Add node_modules/jquery/dist/jquery.min.js and node_modules/materialize-css/dist/js/materialize.min.js inside array:

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/materialize-css/dist/js/materialize.min.js"
]

6. Go to your component and add at the top declare var jQuery: any;

Example

(function ($) {
    $('.sidenav').sidenav();
})(jQuery);

You can use that inside ngOnInit.

Answer 3

Find and open angular.json, then add to projects.architect.build.options object next field and change filepath to your own:

"scripts": [
  "path/to/js/you/want/use.js"
]

Angular will add those custom files to result build