¿Cómo obtener la altura del div hermano y enviar datos al componente hermano en Angular?

En esta publicación, veremos cómo podemos obtener la altura de div dinámico en un componente y enviarlo a su componente hermano en Angular. Esta tarea necesita una comprensión de algunos conceptos básicos angulares y DOM. En angular, podemos enviar y recibir datos a hermanos usando muchos métodos y uno de ellos es a través del padre. Vea la figura a continuación.

En Angular podemos realizar estos pasos:

• Cree un objeto EventEmitter<T> y envíe datos al padre utilizando el decorador @Output() .
• Reciba datos del padre utilizando el decorador @Input() .
• Calcule la altura de div usando la propiedad offsetHeight de DOM y envíela de vuelta al padre.
• Recibir la altura de los padres.

Demostremos estos pasos usando un ejemplo simple. Crearemos dos componentes: sibling1 y sibling2 . En sibling1, tomaremos la entrada separada por comas del usuario y la usaremos para completar dinámicamente sibling2. El componente sibling2 devolverá dinámicamente su altura a sibling1 a través del padre.

Requisitos previos : NPM debe estar instalado.

Configuración del entorno:

• Instale Angular y cree un nuevo proyecto.

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

  Pasos :

• Cree 2 nuevos componentes llamados sibling1 y sibling2, esto creará dos nuevos directorios con 4 archivos en cada uno.

  ng g c sibling1
  ng g c sibling2

En el código anterior, hemos establecido la variable de altura como entrada para este componente usando el decorador @Input() . El objeto emisor es un objeto EventEmitter . En el método send() , estamos usando el valor del elemento de destino y emitiendo los datos.

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);
  }
}

Hay un campo de entrada que usa el método send() en el evento keyup . Para mostrar la variable altura , hemos utilizado una etiqueta <p>.

<input type="text" (keyup)="send($event)">
  
<p>Height of Sibling is {{height}}</p>

En este archivo, hemos configurado la variable de datos como objeto de entrada y emisor para emitir la altura. En el método send() , hemos emitido la altura del componente div. Ahora agregue el siguiente código a sibling2.component.html:

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);
  }
}

Aquí hemos utilizado el evento DOMCharacterDataModified para detectar cambios en div al insertar nuevos datos. Los elementos en la array de datos se muestran en la etiqueta interna <p>.

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

Ahora tenemos que agregar estos componentes al componente de la aplicación. Agregue el siguiente código a app.component.ts para crear variables para transferir datos entre hermanos:

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;
  }
}

Las variables de altura y datos se utilizarán como entrada para los componentes. Los métodos mergeData() y mergeHeight() establecerán los datos en estas variables. Ahora muestra estos componentes en app.component.html :

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

Ahora ejecuta la aplicación usando:

ng serve -o

Salida: Debería ver la siguiente salida.

Tenga en cuenta que los datos enviados a otro componente se utilizan para aumentar o disminuir dinámicamente la altura de div que se envía al componente hermano.