That still did not change, you don’t need to add JQuery to your Angular 2+ project, but for any reason you might need to use some JavaScript libraries and you need to know how to use them in Angular. So, let’s get started from zero Do you remember when you were learning AngularJS (version 1), tutorials kept telling you that you don’t need to add JQuery into your project? I’m going to add underscore.js to a project and show you how it works. 1. Create a new project using Angular CLI If you already don’t have CLI installed on your machine, , after installation, create a new project (if you already don’t have one) install it ng new learning now you will have a new Angular project named “ ” learning 2. Install the package into your project Go to the project we just made: cd learning Use your preferred package manager to install the library you’re going to use; I use to install npm underscore.js npm install --save underscore 3. Import the library into Angular (TypeScript) We are writing codes in TypeScript, and we should follow its rules. TypeScript needs to understand underscore.js As you might know TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript has its own syntax, function and variables can have defined types, but when we are going to use an external library such as underscore we need to declare type definitions for TypeScript. In JavaScript, type of arguments are not important and you will not get an error while you’re writing code, but TypeScript won’t let you to give an array to a function that accepts string as input. Then here is the question that should we rewrite the in TypeScript and define types there? underscore.js Of course not, TypeScript provides declaration files which define types and standardize a JavaScript file/libraries for TypeScript. (*.d.ts) Some libraries includes typing file and you don’t need to install TypeScript’s type destination for them. But in case a library does not have file, you need to install it. .d.ts We just need to find and import type definition file. I suggest you to use to find declaration file for the libraries you need. underscore.js Type Search Search for in and it redirects you to . Install the declaration file using the following command: underscore Type Sceach types/underscore npm install --save @types/underscore 4. Import type declaration into Angular app Let’s say you’re going to use underscore in your file, open the by your IDE and add the following code in top of the file: app.component.ts app.component.ts import * as _ from 'underscore'; /*** OR simply:* import 'underscore';*/ TypeScript in that component now understand and it easily works as expected. _ Question: How to use a library which does not have type definition (*.d.ts) in TypeScript and Angular? Create if the does not exist, otherwise open it, and add your package to it: src/typings.d.ts declare var In your TypeScript now you need to import it by the given name: import * as yourPreferedName from 'yourLibrary';yourPreferedName.method(); Conclusion As conclusion let’s make a simple example to see a working example of . Open and inside the class write a which returns the last item of an array using underscore function: _ app.component.ts appComponent constructor _.last() ...import * as _ from 'underscore';...export class AppComponent {constructor() {const myArray: number[] = [9, 1, 5];const lastItem: number = _.last(myArray); //Using underscoreconsole.log(lastItem); //5}} If you open your Angular app now, you will get in the console which means we could correctly add into our project and it’s working as expected. 5 underscore You can add any JavaScript libraries to your project just by following the same steps. You can follow for more articles on technology and programming me

Too Long; Didn't Read

Making security fun one episode at a time

How to use JavaScript libraries in Angular 2+ apps

Too Long; Didn't Read

Mohammad Kermani

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to use JavaScript libraries in Angular 2+ apps

Too Long; Didn't Read

Mohammad Kermani

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES