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

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 :
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
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>
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.
AngularJS-Questions
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Angular Libraries For Web Developers
Angular 10 (blur) Event
Angular PrimeNG Dropdown Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to create module with Routing in Angular 9 ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript