get offsetHeight of angular child component from parent

Question

What is the best way to get computed angular child components height from parent? I have a component like below

    import { Component, ViewChild } from 'angular2/core';  

    (...)

    @Component({
      selector: 'my-app',
      template: `
        <h1>My Add Angular 8 app</h1>
       <ng-container *ngFor="let item of list>
          <child #Children [content]="item.content" [id]="id"></child>
       <ng-container>
        <button (click)="submit()">Submit</button>
      `,
    })
    export class AppComponent implements AfterViewInit { 
      @ViewChild(Children) Children: QueryList<ElementRef>;

      (...)
      ngAfterViewInit() {
        console.log("The children are", this.Children.toArray()) 
        /*==> give me aray of Child component with the props , id and content, 
        i need the computer nativeElement to be able to get the height. */
      }

    }

Please what is the best way to get the child components offsetHeight from the parent? Any help will be appreciated

Answer 1

You can set read metadata rroperties to ElementRef to get offset of child element

Try this:

 @ViewChildren('Children',{read:ElementRef}) Children: QueryList<ElementRef>;

Or

You have Inject ElementRef service inside Child component so that you can child component nativeElement Inside parent component

child.component.html

 constructor(public ele: ElementRef){

  }

parent.component.html

@ViewChildren('Children') Children: QueryList<ChildComponent>;

   ngAfterViewInit(){ 
    console.log(this.Children.toArray()[0].ele.nativeElement.offsetTop);
   }

Example