angular 2 jquery

How to include JQuery plugins in Angular 2 running via webpack?

Many developers were working with the Angular 2 for a long time. It`s normal because this framework works good and without crashes or interferences. Nevertheless, every developer wants to create something special and multifunctional for himself or for other users. For example, he wants to import jQuery to angular 2. However, how can he do this right? This article will tell everything without unneeded information. Yes, you can find other informational articles on this topic, but we want to explain everything fast.

At the beginning, we want to say some words about jQuery. It`s small and fast JavaScript library. With it, you can use things like HTML documents, manipulate them and use everything with an easy-to-use API that works across a multitude of browsers. With this compact library, people who write JavaScript started doing it the way easier.

Angular is front-end framework with an open code. Angular is a next step after AngularJs. It was written by the same company, but has some changes in the system. Now it is smarter than it was earlier. With every next version of the framework, the number of functions will be growing. Soon we will have an ability to see Angular 7 and Angular 8. It`s good that developers could use Angular on different platforms and devices – from smartphones to computers. On the official website of the framework you can find all information about working process, how to use all functions and even have feedback in blog from other users.

Now let us get back to our topic. How to work on Angular 2 jQuery plugin. The first step will be installing of Angular 2 web pack starter. After that, we will install jQuery and fullcalendar. Then we need to create an Angular 2 component for storing our plugin.

After that, we must import native fullcalendar styles. For this we will use require and webpack-style-loader. An important detail – we will import styles apart from the component. It was the first big step of our process.

Second step is to link @types. You can do this by following Microsoft recommendations.

The third step is to make own data type definitions. You can create and save all definitions to file with name “angular2-webpack-starter/scr/custom-typings.d.ts.

It was a short guide about how to put jQuery to Angular 2 webpack starter. We`ve tried to explain everything as short as possible. Hope you enjoyed it.


Igor Grigorenko

Add comment