CODEWITHSUNDEEP
javascripthtmlangularviewchild
user68288
user68288

Reputation: 784

How can I find the dynamic height of an Angular 7 div?

I am just trying to console.log how tall a div is based on the size of it expanding based on the table inside of it. I need this to determine if a scroll bar will be present (this is contained in a dialog pop-up).

Currently I have it working to display the height set in the div, but it does not update based on the table. Any ideas where I am messing this up?

HTML

<mat-dialog-content style="height: 460px">

  <div #target style="height:100px">
<table  class="responstableModt">
  <tr *ngFor="let result of results; let x = index">
    <td width="9%" style="text-align: right">{{ result.AMT_OWED | number : '1.2-2' }}  </td>
    <td width="9%" style="text-align: right">{{ result.AMT_PAID | number : '1.2-2' }}  </td>
      </tr>
    </table>
    </div>

 
      
    </mat-dialog-content>

Component

import { AfterViewInit, Component, OnInit , ViewChild} from '@angular/core';
import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { Inject } from '@angular/core';
import { DbService } from '../db.service';
import { ActivatedRoute } from '@angular/router';
import { Router } from '@angular/router';
import { IssuerService } from '../../issuer.service';
import { HostListener, ElementRef } from '@angular/core';

@Component({
  selector: 'app-cf-iteration-dialog',
  templateUrl: './cf-iteration-dialog.component.html',
  styleUrls: ['../global.css']
})

export class CfIterationDialogComponent implements OnInit {

  constructor(
    private DbService: DbService,
    public dialogRef: MatDialogRef<CfIterationDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }


  onNoClick(): void {
    this.dialogRef.close();
  }


    runGetData(repid, issuerid, iterid) {
      return new Promise((resolve) => {
        this.DbService.GetData(repid, id, iterid).subscribe(results => this.results = results,
        (err) => { 
          console.log('ERROR: ' + JSON.stringify(err)); 
      },
      () => {
        this.IterDiabled = false;
        // Get the height of the element
        const height = this.targetElement.nativeElement.offsetHeight;

        // Here you can use the height!
        this.result = height;
        console.log('x: ' + height);
        resolve(1);});})
      }
  

  async ngOnInit() {
    // Get Details Data
    try { await this.runGetData(this.repid, this.id, this.iterid)
    } catch (e) {console.log('Try/Catch Error: ' + e)}

   }

   @ViewChild('target') targetElement: any;    
   result: string;

}

Currently it consoles 100 no matter what.

Upvotes: 0

Views: 643

Answers (1)

Greg
Greg

Reputation: 126

Did you try to use the layout properties of angular material? :

https://tburleson-layouts-demos.firebaseapp.com/#/docs

In you're case, you just have to use the "stretch" property if you want a 100% height.

If you're using Angular, you should definitely use Angular material, it's very easy to implements and you can set the number of rows with a pagninator (a little bit more nice than a scroll bar for me):

https://material.angular.io/components/table/overview

Upvotes: 0

Related Questions