Question 174039 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Angular upgrade and jquery issue

As part of angular 6 to 15 migration, I have to update jquery as well. earlier we have used

"@types/jquery": "2.0.33" 
"jquery": "3.1.1"

As part of package.json, since we have upgraded to angular, we have jquery as below:

"jquery": "^3.6.4",
"@types/jquery": "^3.5.16"

In one of the places we have used the below query function in the .ts file

this.cssService.setElHeight($('.div .content h4'));

Below is the service method:

setElHeight(element: any) {
        element.height('auto');
        if (element.length) {
            let maxheight: number = 0;
            element.each(() => {
             
              let max_height = $(this).height() ?? 0; //here I get error  Cannot read properties of undefined (reading 'defaultView')
              maxheight = (max_height > maxheight ? max_height : maxheight);
            });
            element.height(maxheight);
        }
    }

at line " let max_height = $(this).height() ?? 0;" we get error as below:

" Cannot read properties of undefined (reading 'defaultView')"

Instead of $(this) I tried $(element), but some of the content don’t get proper height.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have got it working following way: it might be useful to someone who is in same need:

     setElHeight(element: any) {
        element.height('auto');
        var $elem = $(element)
        if ($elem.length) {
            let maxheight: number = 0;
            $elem.each(function(key, value)  {
                const max_height = $(this).height() || 0; 
                maxheight = (max_height > maxheight ? max_height : maxheight);
            });
            element.height(maxheight);
        }
    }

  2. 0

    Avoid directly manipulating the DOM using jQuery or any other external library. Angular provides its own way of interacting with the DOM using ElementRef and Renderer2.

    Import ElementRef and Renderer2 from @angular/core:

    import { ElementRef, Renderer2 } from '@angular/core';

    Inject ElementRef and Renderer2 into your service’s constructor:

    constructor(private renderer: Renderer2) {}

    Modify your setElHeight method to use Renderer2 instead of jQuery:

    setElHeight(element: ElementRef) {
  const el = element.nativeElement;
  this.renderer.setStyle(el, 'height', 'auto');
  if (el.length) {
    let maxheight: number = 0;
    element.forEach((el: any) => {
      const max_height = el.offsetHeight || 0;
      maxheight = (max_height > maxheight ? max_height : maxheight);
    });
    this.renderer.setStyle(el, 'height', maxheight + 'px');
  }
}

    Update your template to pass the ElementRef to the setElHeight method

    <div #content class="div content">
  <h4>Some Content</h4>
</div>

    hope it’s work perfectly

    Using JQuery

    setElHeight(element: any) { 
  element.height('auto');   
  if (element.length) { 
    let maxheight: number = 0;  
    element.each(function() {   
      const max_height = $(this).height() || 0; 
      maxheight = (max_height > maxheight ? max_height : maxheight);    
    }); 
    element.height(maxheight);  
  } 
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search