CODEWITHSUNDEEP
angular
anonym
anonym

Reputation: 4850

How can I automatically adjust the height of a div equal to a the height of another div?

The height of the left column changes as users interact with its contents. The right column's height must be constantly set to the variable height of the left column. How can I achieve this?

<div class="row">
  <div #left-col class="col-md-6">
    <div class="let item of items">
       // {{item.info}} ..
    </div>
  </div>
  <div #right-col class="col-md-6" [ngStyle]="{'height.px': getLeftColumnHeight()}"></div>
</div>

getleftColumnHeight()
{
   // ..
   return leftColumnHeight;
}

Upvotes: 0

Views: 431

Answers (1)

Onurhan Aytac
Onurhan Aytac

Reputation: 434

In your ts file you can get your left

import { Component, ViewChild } from "@angular/core";

  @ViewChild("leftCol") leftCol;

  getLeftColumnHeight() {
    return this.leftCol.nativeElement.offsetHeight
  }

HTML:

<div #left-col class="col-md-6">
<-- kebab case on id return error on me so i change it to leftCol -->
<div #leftCol class="col-md-6">

Upvotes: 1

Related Questions