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();
  });**

you should write in the component file

brk
– brk

2018-11-26 13:38:30 +00:00
Commented Nov 26, 2018 at 13:38 — brk
– brk, Commented Nov 26, 2018 at 13:38

harshit raghav · Accepted Answer · 2018-11-27 04:19:47Z

10

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().

answered Nov 27, 2018 at 4:19

harshit raghav

6532 gold badges10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

Install jQuery npm install jquery
Install MaterializeCSS npm install materialize-css@next
Install types npm install --save @types/materialize-css @types/jquery
Open angular.json and find scripts field
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"
]

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

Example

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

You can use that inside ngOnInit.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 26, 2018 at 14:05

Oen44

3,2461 gold badge24 silver badges32 bronze badges

8 Comments

harshit raghav Over a year ago

getting this error TypeError: $(...).sidenav is not a function

harshit raghav Over a year ago

I already have materialize script inside the array and still getting the same error

Oen44 Over a year ago

Did you install types? And in angular.json there are 2 scripts fields.

harshit raghav Over a year ago

Yeah, I did both.

Oen44 Over a year ago

Make sure that jQuery is first in array, then MaterializeCSS. And changes in angular.json require you to restart webservice. So just stop and start angular again. @harshitraghav

|

MysterX · Accepted Answer · 2018-11-26 13:43:33Z

2

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

answered Nov 26, 2018 at 13:43

MysterX

2,3781 gold badge14 silver badges12 bronze badges

1 Comment

harshit raghav Over a year ago

I have created a file and added it's path like you said but how to use it inside the component?

Collectives™ on Stack Overflow

How can I use JavaScript code in Angular 7?

3 Answers 3

Comments

Example

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Example

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related