В Angular Как автоматически прокрутить снизу до нового добавленного элемента, если мой контент переполняет высоту окна? Применимо для всей страницы, приложение

Question

IN ANGULAR Например ... Когда я делаю форму, я добавляю десятки новых элементов или карт или что-то еще! Я просто хочу, чтобы моя страница автоматически прокручивалась до последнего элемента, когда я добавляю новый элемент, который будет вертикально переполнять высоту окна ... Применимо для всей страницы, приложение

Tnx

Answer 1

вы можете получить все "дивы или карты", используя ViewChildren . Затем в ngAfterViewInit вы можете подписаться на изменения и сделать акцент. но вам нужно дать вздох Angular, поэтому вы заключили фокус в setTimeout

  @ViewChildren('itemID') itemsElement:QueryList<ElementRef> //<--we has here
                              //a QueryList with all our elements
  ngAfterViewInit()
  {
    this.itemsElement.changes.subscribe(res=>{
      //in res.last we has the last element
      setTimeout(()=>{
        res.last.nativeElement.focus()
      })
    })
  }

Вы просто. html

<button (click)="items.push(1)">add</button>
 <!--see how use a "reference variable" #itemID -->
 <!--be carefull, the div must has "tabindex"-->
<div tabindex="1" #itemID style="height:4rem" 
    *ngFor="let item of items;let i=index">*{{i}}
</div>

Пример в stackblitz