Should I add jQuery to my Angular application? 🤷‍♂️

Is it OK to use jQuery in an Angular application?

Here's a complete guide to help you decide if you should add jQuery to your Angular application.

One of the most popular Angular questions on Stackoverflow is a question about how to use jQuery with Angular.

How to use jQuery with Angular?

Say, what should you do?

Is it okay to use jQuery AND Angular in the same project?

Definitions

Alright. Hold those britches....

...because before we go any further it's important to understand the difference between Angular & jQuery.

It seems we get them confused and tangled together.

And when someone from a jQuery background comes to Angular they usually get this itch to revert to jQuery instead of harnessing Angular's super-powers. 🤨

Beginning with jQuery.

jQuery is a library that simplifies DOM manipulation, event handling, CSS animation and AJAX. Wikipedia

And ending with Angular.

Angular is a web application framework and development platform for creating efficient and sophisticated single-page apps. www.angular.io

So here's the kicker.

While some jQuery functionality might be helpful in an Angular application, it is not considered a best practice to query and manipulate the DOM from inside Angular components.

But why you say?

Because in an Angular application you should bind the DOM elements you want to manipulate to your component model that way DOM elements state changes according to model changes.

If you feel stuck trying to change DOM values in your Angular application without using jQuery then why not check out the docs section on empowering your HTML?

Need jQuery's animation features in your Angular application? Try Angular's animations.

Wishing for jQuery's AJAX capabilities? Try Angular's advanced HTTP client.

And wondering about event handling? Checkout Angular's event binding.

So should I use jQuery and Angular together?

JQuery was full of rich features back in it's day. It was easy to use and we loved it's power.

But it had one problem. It couldn't scale when building bigger application and always made a huge code mess. Every big jQuery application that I worked on was one huge ball of jQuery spaghetti code.

How about we leave those days in the past? Adding jQuery to your Angular application is like dumping gas on a bin of trash. One small match and... POOF!!! You've got a grand dumpster fire. 🔥 🔥 🔥

Conclusion

Save your Angular application by NOT adding jQuery to it.

Keep it clean and simple.

Harness Angular's powers.

And code like an expert. Not like a red-neck.

Questions or comments? Then please don't hesitate to contact me.

Angular Consultant & Freelancer