How to get the height of sibling div and send data to sibling component in Angular?

Last Updated : 12 Mar, 2021

In this post we will see how we can fetch the height of dynamic div in one component and send it to its sibling component in Angular. This task needs an understanding of some basic angular and DOM concepts. In angular, we can send and receive data to siblings using many methods and one of them is through the parent. See the figure below.

In Angular we can perform these steps:

Create an EventEmitter<T> object and send data to parent using @Output() decorator.
Receive data from parent using @Input() decorator.
Calculate the height of div using offsetHeight property of DOM and send it back to parent.
Receive the height from parent.

Let's demonstrate these steps using a simple example. We will create two components : sibling1 and sibling2. In sibling1, we will take comma-separated input from user and use it to dynamically populate sibling2. The sibling2 component will dynamically send back its height to sibling1 through the parent.

Prerequisites: NPM must be installed.

Environment setup:

Install Angular and create a new project.

npm install -g @angular/cli
ng new <project-name>
cd <project-name>

Steps :

Create 2 new components named sibling1 and sibling2, this will create two new directories with 4 files in each.
```
ng g c sibling1
ng g c sibling2
```

In the above code, we have set the height variable as input to this component using @Input() decorator. The emitter object is an EventEmitter object. In send() method, we are using value of target element and emitting the data.

sibling1.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-sibling1',
  templateUrl: './sibling1.component.html',
  styleUrls: ['./sibling1.component.css']
})
export class Sibling1Component implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.height = 0;
  }

  @Input() height;

  @Output() emitter:EventEmitter<any> = new EventEmitter();
  send(e){
    let data = e.target.value;
    this.emitter.emit(data);
  }
}

There is a input field that uses send() method on keyup event. To show the height variable, we have used a <p> tag.

sibling1.component.html

<input type="text" (keyup)="send($event)">

<p>Height of Sibling is {{height}}</p>

In this file, we have set the data variable as input and emitter object to emit the height. In send() method, we have emitted the height of div component. Now add the following code to sibling2.component.html:

sibling2.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-sibling2',
  templateUrl: './sibling2.component.html',
  styleUrls: ['./sibling2.component.css']
})
export class Sibling2Component implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.data = [];
  }
  @Input() data;
  @Output() emitter:EventEmitter<any> = new EventEmitter();

  send(){
    let height = document.querySelector('div').offsetHeight;
    this.emitter.emit(height);
  }
}

Here we have used the DOMCharacterDataModified event to detect change in div on insertion of new data. The elements in data array are displayed in the inner <p> tag.

sibling2.component.html

<div id="targetDiv" (DOMCharacterDataModified)="send()">
    <p *ngFor="let d of data">{{d}}</p>
    
</div>

Now we have to add these components to app component. Add the following code to app.component.ts to create variables to transfer data among siblings:

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  height;
  data;

  ngOnInit(){
    this.height = 0;
    this.data = [];
  }
  mergeData(data){
    // Convert the string to array of strings
    this.data = data.split(",");
  }
  mergeHeight(height){
    this.height = height;
  }
}

The height and data variables will be used as input to components. The mergeData() and mergeHeight() methods will set the data to these variables. Now display these components in app.component.html :

app.component.html

<app-sibling1 
              [height]="height" 
              (emitter)="mergeData($event)">
</app-sibling1>

<app-sibling2 [data]="data" 
              (emitter)="mergeHeight($event)">
</app-sibling2>