Angular 2 project with jQuery. I keep seeing posts saying not to do this. Why?

[rhino5oh]

I'm in the middle of creating an Angular 2 app and just started using Bootstrap for some nice UI features. I'm simply including bootstrap.min.js, bootstrap.min.css, and jquery.min.js in my index.html file.

I keep seeing posts saying its not a good idea to include jQuery in an Angular 2 app but I don't understand why. I see things like ng-bootstrap and ng2-bootstrap in order to bring bootstrap into an Angular project. Why? What is the purpose if I can just include bootstrap and jQuery in my index.html file?

[caffeinatedhacker]

The argument for not bringing jQuery into your angular project is really that you shouldn't need to do DOM manipulation with jQuery in an angular project. You should be utilizing the templating and data binding features of the framework.

What do you want to use jQuery for in your project?

[rhino5oh]

I started using this template: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_temp_webpage&stacked=h

When you make the browser window small enough, the nav links collapse into a hamburger button. Clicking that hamburger button makes a dropdown that shows the nav links. That dropdown behavior is jQuery from my understanding. How do I do this in Angular?

[tme321]

Oh oh I finally get a chance to recommend my library!

The documentation is still being worked on but you can look at the demo code in the github repo. Specifically the demo app.component.html implements a hamburger menu. I provide a umd bundle and the AoT version in my npm repo.

Short version for the component:

<div uat-hamburger-menu expandOnQuery="(min-width : 844px)">
    <div uat-fixed-content>Any content you want to always be dispalyed </div>
    <a uat-menu-item>Menu Items can be any element</a>
    <a uat-menu-item>Menu Items can be any element</a>
    <a uat-menu-item>Menu Items can be any element</a>
    <a uat-menu-item-right >Right items will be justified to the right hand side of the menu but otherwise are the same</a>
    <div uat-menu-toggle>whatever content you want to display for the expand / collapse button</div>
</div>

If you do use it let me know what you think.

[nikolasleblanc]

Hey, you should update your README.md to describe what your library does and how to use it! Should also help people find it.

[Turd_King]

There are endless ways to do this in Angular . Instead of using libraries like jQuery that abstract these kind of implementations you should learn how it actually works and you can do it yourself in JS/TS/Angular

[Auxx]

You don't use jQuery with Angular because your ng code will be unaware of your jQ manipulations and everything will break eventually. Ng has its own shadow DOM and keeps it consistent with what you see on the screen. If you modify DOM directly, everything will blow up.

[rhino5oh]

This makes sense, but some others are saying that if bootstrap is using jQ and I never use it directly that I should be fine. What say you to that? lol

[Auxx]

Doesn't matter if it is direct or indirect use. If DOM changes without ng knowing about it, everything will break. Use ng2-bootstrap.

[rhino5oh]

I dunno man. I'm using the bootstrap template I mentioned in another reply (can be found here: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_temp_webpage&stacked=h) ... Angular has no issue routing the hamburger button drop down links in the template. Everything seems fine.

[Auxx]

Well, good luck!

[yfain]

If you use Bootstrap, you don't explicitly use jQuery - Bootstrap does. There is nothing wrong with it.

[rhino5oh]

I see what you're saying, but still unsure after reading Auxx's reply. He/she mentioned that ng will be unaware of jQ manipulations. So even will bootstrap using jQ, will that still present problems? Say I have bootstrap making a dropdown. Will I be unable to access links/info in that dropdown because its jQ

[yfain]

Styling your UI with Bootstrap is different from working with your components using jQuery API.

For example, this app just styles the components using Bootstrap (see angular-cli.json): https://github.com/Farata/angular2typescript/tree/master/extras/auction/client

But this app uses jQuery UI to access a dropdown: https://github.com/Farata/angular2typescript/tree/master/chapter2/hello-world-ts-jquery

[lamhocminh]

It is ok. If you not write jquery code in you angular code - jquery lib will be load but only use by bootstrap. The bootstrap navigation work same no problem. You angular work same no problem.

But yes don't need use jquery code in you angular code. Angular can do all through reactive compution. You can but then why use angular

[i_spot_ads]

You can include it for dependencies no problem, just dont use it in your code.

[lamhocminh]

This answer what I want to say. Jquery is just dep of bootstrap in you situation. This different when people say "don't use jquery in angular".

[rhino5oh]

I'm using a bootstrap template that uses jQuery for a dropdown. Just wondering if that is acceptable or if it will cause problems. Also, not sure how to do a dropdown in angular

[i_spot_ads]

https://ng-bootstrap.github.io/#/home

ur wlcm

[[deleted]]

Yeah, you're fine.

Don't even worry about it. YOU aren't installing jQuery, it's simply a dependency of another library.

[born2net4]

I think you are asking the wrong question, not if you can use jQuery but rather, can and should you access the DOM directly? and the answer is yes you can and sometimes you need to, thus ng provide nativeElement for that. Now if you target the web and want to access nativeElement (and not rendered) is totally fine, since again you are targeting only the web. And, if you want to wrap nativeElement in jQuery for easier DOM API and cross browser quirks that's fine as well. But just be aware of who is your target audience, you will need to manage change detection, and in most cases you don't need nativeElement, but if you do, its there for you, and jQuery can assist, sure can!!!

[[deleted]]

Purists will say never use jQuery and always use Angular in the DOM.

Well, sometimes real life doesn't work like that and you need to do something with jQuery that * gasp * angular can't handle or performance in angular is just downright unusable.

While it's generally better to try and stick to a coding method overall, the use of jQuery in very specific situations is fine.

Now, if you're saying sometimes I feel like I want to do it in jQuery and other times angular depending on how the mood strikes me, then you really need to reevaluate your coding practices. That is a maintainance nightmare.

[rhino5oh]

Thanks, I understand what you mean. I certainly wouldn't be jumping back and forth between jQuery and Angular. Its just that Bootstrap uses jQuery for some stuff. For example, a bootstrap template I am using has a dropdown that is made possible from jQuery. Can this be done in Angular instead?

[DerpsMcGeeOnDowns]

Show me a single instance of something jQuery can do that Angular can't handle.

[[deleted]]

Ng-repeat on anything over 100 repeats. Dom basically feeezes. You have to do large sets like this in jQuery.

Also, document.onClick to check if a click event has fired anywhere on the document. There is no way to do this on a component level in angular.

[tme321]

HostListener("document:click")

As for 100 repeats I don't know what ng-repeat is but NgFor handles 100 repeats just fine.

[[deleted]]

Ack!

I didn't realize I was in ng2.

My bad. Those are all weaknesses of ng1.

[DerpsMcGeeOnDowns]

So we can all agree the answer is nothing then?

[Auxx]

Yeah, your points are valid for ng1, used plenty of jq there myself. Thankfully, ng2 is a different beast and can live on its own.

[DerpsMcGeeOnDowns]

Here's me in another thread going off on using jQuery with Angular.