Как мониторить высоту блока в Angular?

Question

[Николай Семенов]

Всем привет!
Ребят, подскажите как следить за высотой блока в ангуляр что передать для другого величину отступа?

Answer 1

[Александр Семенов]

querySelector

@ViewChild('block') block: ElementRef;

// ...

// querySelector
console.log(document.querySelector('div.block'));

// ViewChild
console.log(this.block.nativeElement);

<div class="block" #block>
 Текстовый блок
</div>

Comments

[Николай Семенов]

это понятно, я имел ввиду, где (в какой момент это сделать) в ангуляр...это будет конструктор или другой жизненный цикл

[Александр Семенов]

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

[Александр Семенов]

Николай Семенов, Жизненный цикл компонента

[Николай Семенов]

Александр Семенов, спасибо большое, но не могли бы подсказать какой цикл взять когда может меняется размер экрана(соответственно расти высота блока) и при ручном переключении.

[Александр Семенов]

Николай Семенов, я в корневом компоненте обычно использую, для отслеживания размера экрана:

@HostListener('window:resize', ['$event.target.innerWidth'])
  onResize(width: number) {
   // width - это значение ширины экрана я обычно его использую для добавления классов к
   // body, но Вы можете на основании ширины экрана уже задавать адаптивность Вашему блоку
   // например при помощи css классов или задавать размер через доступ к блоку 
   // вышеуказанными способами
  }