Best Practice of Angular 2

Question

Angular 2 is considered as a complete framework in frontend development. One of advantages is to put frontend interactions in a managed way, in contrast to various functions of jQuery.

On the other hand, jQuery is very flexible and its features can be applied on demand function by function. It is well collaborated with plain HTML codes, especially good-look templates have been prepared by visual designers. From this prospective, jQuery seems more agile.

What is the best practice of applying Angular 2? Should it be mixed with jQuery, bootstrap, and other frontend library/framework together? What responsibility should each of them take?

Answer 1

As this question is about software design, you may read answers with various point of views, I will not pretend to detain 'the best answer' and will try to stick with facts.

jQuery was originally designed as a DOM manipulation library, plus styling via jQuery-ui plugin, plus data/asynchronous management such as Promises, Deferred, ajax calls. These different sets of features do not interact much with each-other, besides the fact that they can be chained easily. jQuery is not a framework but a library.

• Angular2's documentation does not recommend manipulation of DOM elements at all. When needed guideline is to use it's Angular2's renderer.
• Angular2 offers ajax calls using it's 'http' class.
• Angular2 plays well will rxJs Observables, Promises, etc. allowing you to be a master of asynchronous behaviour. Downside is that the learning curve is more than steep.
• CSS3 is now here and supports animations really well. Class binding can be done to change appearance of components.
• Boostrap can be used in an Angular2 project, and doesn't need jQuery to run, unless using it's javascript library.

Even though, using jQuery in a project is compelling:

• jQuery has a great past, learning it is quite easy and has alot of users.
• Seriously, it's performance is really good. Library only takes 84kb minified.
• jQuery has a huge number of plugins, plugins not having their own successor in angular2 world yet. For example Boostrap 'javascript' plugins are mostly (if not all) jQuery plugins. see here

Answer 2

One of Angulars core ideas is not to manipulate the DOM directly, which is the core idea of jQuery to do. So as @GünterZöchbauer says, don't use it unless you really have to (which is very rare). jQuery is more like a helper library, Angular is a Framework and should be used as such.
You can of course mix it with Bootstrap, whereas you should only use the styles and use a Angular 2 version of Bootstrap though: https://valor-software.com/ng2-bootstrap/#/ or https://github.com/ng-bootstrap/ng-bootstrap.

As for

and other frontend library/framework together?

You shouldn't mix it with another Framework, that just messes things up. Libraries sure though, for most of the popular libraries out there exists (or will exist) a Angular version which comes with TypeScript support etc.