How can I get the height of an element while it's collapsed in DOM in Angular/Typescript

Question

I've tried ngOnInit() but didn't succeed. Accordion doesn't work too. Here is my html :

<div [hidden]="advancedFiltersAreShown" #searchDiv></div>
<button *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown; minHeightOfTable();"></button>

.ts code:

 @ViewChild('searchDiv', { static: true }) elementView: ElementRef;
 primeTableHeight = '';
 advancedFiltersAreShown = true;

 minHeightOfTable(): string {
        const heightOfPage = window.innerHeight;
        const heightOfSearchView = this.elementView.nativeElement.offsetHeight;
        var newHeight = heightOfPage - heightOfSearchView;
        this.primeTableHeight = newHeight + 'px';
        return this.primeTableHeight;

    }

You cannot get the height of a hidden element. Because it is hidden, it does not take up any space and therefore the browser does not waste cycles calculating its size. The element must be displayed (but not necessarily visible). — Heretic Monkey, Feb 25 '20 at 13:18
Does this answer your question? [Need to find height of hidden div on page (set to display:none)](https://stackoverflow.com/questions/1473584/need-to-find-height-of-hidden-div-on-page-set-to-displaynone) — Heretic Monkey, Feb 25 '20 at 13:19
You can try like this https://stackblitz.com/edit/santosh-angular-get-height-of-hidden-element?file=src%2Fapp%2Fapp.component.html — Santosh Shinde, Feb 25 '20 at 13:41

score 1 · Accepted Answer · answered Mar 07 '20 at 11:57

As I get from your code, you have a button which collapse your div element, so you want to resize your other element in your page after collapsing/opening your div (Custom Accordion). Lets imagine you have two DIV and a button to collapse/open first DIV.

<div #container>
    <button *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown; calculateElementSize();"></button>
    <div #searchDiv>
    </div>
    <div #otherElement>
    </div>
</div>

You have to implement an event handler on your button to resize your second div according to your clients resolution.

So, first of all you have to declare a function calculateElementSize() and pass these steps:

Get height of main #container DIV or body that your elements rendered in it.
Get height of first (Search) floating DIV.
Deduce #searchDIV height's from #container height's
Set the result of subtraction to #otherElement height's
Set the calculateElementSize() to your button event and windows resize event.

Lets do it:

import { Component, ViewChild, HostListener, AfterViewInit } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage implements AfterViewInit {

  @ViewChild('container', { static: true }) containerElement: any;
  @ViewChild('searchDIV', { static: true }) searchElement: any;
  @ViewChild('otherElement', { static: true }) otherElement: any;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
      this.calculateElementSize();
  }

  advancedFiltersAreShown = true;

  constructor() {}

  ngAfterViewInit() {
    this.calculateElementSize();
  }

  calculateElementSize() {
    const containerHeight = this.containerElement.nativeElement.offsetHeight;
    const searchHeight = this.searchElement.nativeElement.offsetHeight;

    this.otherElement.nativeElement.offsetHeight = containerHeight - searchHeight;
  }

}

How can I get the height of an element while it's collapsed in DOM in Angular/Typescript

1 Answers1