Neste post veremos como podemos obter a altura do div dinâmico em um componente e enviá-lo para seu componente irmão no Angular. Esta tarefa precisa de uma compreensão de alguns conceitos básicos de angular e DOM. No angular, podemos enviar e receber dados para irmãos usando vários métodos e um deles é através do pai. Veja a figura abaixo.

No Angular, podemos realizar estas etapas:

• Crie um objeto EventEmitter <T> e envie dados para o pai usando o decorador @Output() .
• Receba dados do pai usando o decorador @Input() .
• Calcule a altura de div usando a propriedade offsetHeight do DOM e envie-a de volta ao pai.
• Receba a altura dos pais.

Vamos demonstrar essas etapas usando um exemplo simples. Vamos criar dois componentes: sibling1 e sibling2 . No sibling1, pegaremos a entrada separada por vírgula do usuário e usá-la para preencher dinamicamente o sibling2. O componente sibling2 enviará dinamicamente de volta sua altura para sibling1 por meio do pai.

Pré - requisitos : o NPM deve ser instalado.

Configuração do ambiente:

• Instale o Angular e crie um novo projeto.

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

  Passos :

• Crie 2 novos componentes chamados sibling1 e sibling2, isso criará dois novos diretórios com 4 arquivos cada.

  ng gc sibling1
  ng gc sibling2

No código acima, definimos a variável height como entrada para este componente usando o decorador @Input() . O objeto emissor é um objeto EventEmitter . No método send() , estamos usando o valor do elemento de destino e emitindo os dados.

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

Há um campo de entrada que usa o método send() no evento keyup . Para mostrar a variável de altura , usamos uma tag <p>.

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

Neste arquivo, definimos a variável de dados como objeto de entrada e emissor para emitir a altura. No método send() , emitimos a altura do componente div. Agora adicione o seguinte 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);
  }
}

Aqui, usamos o evento DOMCharacterDataModified para detectar a mudança em div na inserção de novos dados. Os elementos na array de dados são exibidos na tag <p> interna.

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

Agora temos que adicionar esses componentes ao componente do aplicativo. Adicione o seguinte código a app.component.ts para criar variáveis ​​para transferir dados entre irmãos:

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

As variáveis ​​de altura e dados serão usadas como entrada para os componentes. Os métodos mergeData() e mergeHeight() definirão os dados para essas variáveis. Agora exiba esses componentes em app.component.html:

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

Agora execute o aplicativo usando:

ng serve -o

Saída: você deve ver a seguinte saída.

Observe que os dados enviados para outro componente são usados ​​para aumentar ou diminuir dinamicamente a altura do div que está sendo enviado ao componente irmão.