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){
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 >
|
Now run the app using:
ng serve -o
Output: You should see the following output.

Note that the data sent to other component is used to dynamically increase or decrease the height of div that is being sent to the sibling component.
Similar Reads
How to dynamically get the content height of a div using AngularJS ?
In this article, we will see how to get the height of the content of a <div> dynamically using Javascript, & will understand its implementation through the illustrations. The content height of a div can dynamically get using the clientHeight property and scrollHeight property depending upo
3 min read
How to style the host element of the component in AngularJS ?
In this article, we will see how to style the host element of the component in AngularJS, along with knowing the basic implementation through the examples. This task can be accomplished by implementing the ng-style directive with the element. CSS properties help in the styling of the component. Appr
2 min read
How to get file content and other details in AngularJS?
We can get the file content by using some basic angular functions and other details like the name and size of the file in AngularJS. To understand it look into the below example where both HTML and JS files are implemented. Note: Consider below two files are of same component in angular. app.module.
2 min read
How to pass data from Parent to Child component in Angular ?
We can use the @Input directive for passing the data from the Parent to Child component in Angular Using Input Binding: @Input - We can use this directive inside the child component to access the data sent by the parent component. Here app.component is the Parent component and cdetail.component is t
3 min read
How to determine the size of a component in ReactJS ?
To determine the size of a component in ReactJS we have to create the reference to access that object. This can be done by using the createRef method and the useRef hook in React JS. Prerequisites:React JSReact useRef HookApproach:The size of a component is determined by the height and width of the
3 min read
How to dynamically get the content width of a div using AngularJS ?
In this article, we will see how to dynamically get the content width of a div using AngularJS, along with understanding its basic implementation through the examples. The content width of a div can dynamically get using clientWidth and scrollWidth properties depending upon the user's requirement. I
2 min read
How to control size of an element on resize of window in a component ?
Angular is a popular JavaScript framework for building single-page applications (SPAs). It provides a set of tools and libraries for building rich, interactive web applications using modern web technologies such as HTML, CSS, and TypeScript. One of the key features of Angular is its component-based
3 min read
How to get the rendered height of an element ?
To get the height of an element, there are five common methods in JavaScript. Lets see the differences between each and when they should be used. Only the last method gives the correct rendered height instead of the layout height. style.height jQuery( height, innerHeight, outerHeight ) clientHeight,
10 min read
Passing data from Child to Parent Component in Angular
In Angular, passing data from a child component to its parent component involves emitting events. Essentially, the child component emits an event containing the data that the parent component needs to receive. This is typically achieved using Angular's EventEmitter class, where the child component e
3 min read
How to get input value search box and enter it in AngularJS component using Enter key ?
In this article, we will see how to get an input value entered in the search box using Enter key in AngularJS. To implement a search component in AngularJS that calls the function whenever the user presses the enter key(keyCode = 13) and then does some relatable task from the user input. This can be
3 min read