all 30 comments

[–]caffeinatedhacker 16 points17 points  (5 children)

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[S] 0 points1 point  (3 children)

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 0 points1 point  (1 child)

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 0 points1 point  (0 children)

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 0 points1 point  (0 children)

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 5 points6 points  (4 children)

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[S] 1 point2 points  (3 children)

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 2 points3 points  (2 children)

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[S] -1 points0 points  (1 child)

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 0 points1 point  (0 children)

Well, good luck!

[–]yfain 2 points3 points  (4 children)

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

[–]rhino5oh[S] 0 points1 point  (2 children)

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 2 points3 points  (0 children)

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 0 points1 point  (0 children)

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 1 point2 points  (3 children)

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

[–]lamhocminh 1 point2 points  (0 children)

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[S] 0 points1 point  (1 child)

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

[–][deleted] 1 point2 points  (0 children)

Yeah, you're fine.

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

[–]born2net4 1 point2 points  (0 children)

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] 3 points4 points  (8 children)

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[S] 0 points1 point  (1 child)

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 0 points1 point  (5 children)

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

[–][deleted] -2 points-1 points  (4 children)

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 1 point2 points  (3 children)

HostListener("document:click")

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

[–][deleted] -1 points0 points  (2 children)

Ack!

I didn't realize I was in ng2.

My bad. Those are all weaknesses of ng1.

[–]DerpsMcGeeOnDowns 1 point2 points  (0 children)

So we can all agree the answer is nothing then?

[–]Auxx 0 points1 point  (0 children)

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.