Angular показывать пользовательский контент (стрелки) при переполнении после удаленного поступления контента

Question

У меня есть div, данные которого поступают удаленно из подписанного сервиса overflow-y установлен на scroll
Я должен поставить пользовательские стрелки, когда происходит переполнение, и пользователь может нажать,
и у меня есть метод прокрутки с #templateRef, который будет обрабатывать шаблон
с ручной прокруткой, а ts будет выглядеть ниже

@ViewChild('scrollContent') scrollContent: ElementRef
  ptivate data
  private overflow: boolean = false
  
  constructor (private service: DataService, private cdr: ChangeDetectorRef) {}
  
  ngOnInit () {
    this.service.subscribe(data => {
    this.data = data
    this.isOverflow()
    })
    
    isOverFlow () {
      if (this.scrollContent.nativeElement.scrollHeight > this.scrollContent.nativeElement.clientHeight) {
            this.overflow = true
      } else {
            this.overflow = false
      }
    }
  }

<div *ngIf="overflow"  (click)="scroll($event,'up')">
  <div class="uparrow">
  </div>
 </div>
 
 <div class="content" #scrollContent>
  <!-- 
  Iterate or display data thus changing the content of div and might cause 
  overflow-y
  -->
 </div>
 
 <div *ngIf="overflow"  (click)="scroll($event,'down')">
   <div class="downarrow">
   </div>
 </div>

Но isOverflow() возвращает false и console.log выполняется до и печатает false перед представлением обновлен Я попробовал некоторые changeDetectionMethods как cdr.detectChanges() и markForChange() не повезло с этим.

Я могу вручную вызвать setTimeOut, и это может сработать, но я ищу angular Speci c ответ

PS Я пробовал также некоторые ловушки жизненного цикла , но, очевидно, вы не хотите, чтобы они срабатывали, как 1000 раз в секунду, поэтому я избегал использовать некоторые из их, если я не пропущу ту, которая решает эту задачу и вызывается точно один раз , например ngAfterViewChecked() вообще не работает, так как он продолжает вызываться снова и снова

Angular версия 5.2.10

Спасибо