Use JavaScript in Angular 10/9

Use JavaScript in Angular 10/9

In this post we will give you information about Use JavaScript in Angular 10/9. Hear we will give you detail about Use JavaScript in Angular 10/9And how to use it also give you demo for it if it is necessary.

In this tutorial, we’ll learn how to use external and custom JavaScript libraries/code in Angular 10 projects which are based on TypeScript.

You will need to have the following prerequisites:

  • Basic Knowledge of TypeScript and Angular,
  • Node and NPM installed on your machine,
  • Angular CLI 10 (npm install -g @angular/cli),
  • An Angular project.

You can create an Angular 10 project by running the following command in your terminal:

$ ng new angular-javascript-demo

In the recent versions of Angular, you’ll be prompted by the CLI for a couple of questions such as if Would you like to add Angular routing? (y/N) and Which stylesheet format would you like to use?. You can answer these questions as you see fit because this won’t affect how to use JavaScript libraries in your Angular project.

External JavaScript in Angular 10 by Example

Let’s now see how we can use external JavaScript in Angular 10. We’ll make use of the popular jQuery library as an example.

Note: Please note that it’s not recommended to use jQuery for maniplulating the DOM in Angular. This is simply an example of including an external JS library in Angular.

If your library is popular you’ll most likely you can install it from npm. In you terminal, navigate to your project’s folder and run install jquery:

$ npm install jquery --save

Next, open the angular.json file and locate the scripts array and update as follows:


Next, in the component where you want to call your external library you need to declare the JavaScript symbol you want to call. For example, for jQuery, we need add the following line:


Next, you can call the required functions as in the following example:

import{Component,OnInit}from'@angular/core';declarevarjQuery:any;@Component({selector:'my-app',templateUrl:'./app.component.html',styleUrls:['./app.component.css']})exportclassAppComponentimplementsOnInit{name='Angular';ngOnInit(){(function($){$(document).ready(function(){console.log("Hello from jQuery!");});})(jQuery);}}

How to Use Custom JavaScript in Angular 10

Let’s now see how we can use custom JavaScript in Angular 10 and previous versions.

First, create a JavaScript file inside the src/ folder, add the following code as example:


Next, add the script to the scripts array in the angular.json file:


You can also simply declare and call your JavaScript functions in any component since it’s a TypeScript file. For example:



In this tutorial, we’ve seen how to use external and custom plain JavaScript code and libraries in your Angular 10 (and previous versions) projects which is based on TypeScript.

Hope this code and post will helped you for implement Use JavaScript in Angular 10/9. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US