Angular 2 with jQuery

Question

Eai personal, I wanted to know if the use of jquery along with angular2 is recommended, or the angular already has native functions for DOM manipulation as well as jquery?

my case I wanted for a simple task. Just change the height of a div:

var content = jQuery("#content");
var window_h = jQuery(window).height();
var top_bar_h = jQuery(".top-bar").innerHeight();
var nav_bar_h = jQuery(".nav-bar").innerHeight();

var content_h = window_h - (nav_bar_h + top_bar_h);
content.height(content_h);

Is there any way I can do this using only angular2? vlw!

Answer 1

Although it is the main function of Angular manipulate the page structure (DOM) according to the data (data-bindind), he does not possess in his API functionalities for calculating visual aspects.

So basically, you’re free to use any other library, including jQuery, to perform other types of operations like handling certain styles, as long as you don’t manipulate the document structure.

However, there is a "catch" or problem in this. Manipulating styles this way will add CSS inline in the HTML tag, so if Angular updates that element at some point, it will lose that manually added style. The solution is to calculate the height whenever updating the element or finding another way to define the height.