Angular 4 возвращает высоту элемента, скрытого с помощью * ngIf

Question

У меня есть демо здесь https://stackblitz.com/edit/angular-tz1yjd?file=styles.css

Итак, у меня есть компонент, который скрыт с помощью * ngIf, он показывает, когда нажимается кнопка.

Возможно ли получить высоту этого компонента, прежде чем он будет показан с помощью OnInit.

Или как получить высоту, когда она отображается после нажатия кнопки.

import { Component, Input, ElementRef, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'child-comp',
  templateUrl: './child.component.html'
})

export class ChildComponent implements OnInit {

  @Input() parent: ElementRef;

  @ViewChild('block')
  block: ElementRef;

  show: boolean = false
  blockHeight: number

  constructor(){ }

  ngOnInit(){
    this.blockHeight = this.block.nativeElement.clientHeight;
  }


  showBlock(){
    this.show = !this.show
    this.blockHeight = this.block.nativeElement.clientHeight;
  }

Answer 1

Надеюсь, мой ответ как-нибудь поможет в будущем. Иногда вы можете использовать простую стратегию для рендеринга элемента, но управлять его видимостью с помощью привязки класса

[class.d-none]="conditionChecker()"

или

[class.invisible]="conditionChecker()"