Angular добавить класс из компонента

Question

У меня есть этот код, который позволяет мне прокручивать специфику c DIV, я пытаюсь добавить временный класс в этот div, когда он прокручивается, и удалить класс, скажем, через одну секунду.

scrollTo (id) {
    setTimeout(() => {
      var titleELe = document.getElementById(id); // my destination div on scroll
      this.scrollMeElement.scrollToPoint(0, titleELe.offsetTop, 1000); // add class to it for 1 second
    }, 100);
};

Как это сделать?

Обновление

Я внес следующие изменения:

component

scrolledItem: boolean = false; // added

constructor(...){...}

scrollTo (id) {
    setTimeout(() => {
      var titleELe = document.getElementById(id);
      this.scrolledItem = true; // added
      this.scrollMeElement.scrollToPoint(0, titleELe.offsetTop, 1000);
    }, 100);
    this.scrolledItem = false; // added
};

Затем в моем html я добавил [class.active] = "scrolledItem" как

<div id="{{message.id}}" [class.active] = "scrolledItem" class="receiver"></div>

Это добавляет класс в мой div, но есть 2 проблемы:

1. Он добавляет класс для всех строк, а не только для целевого div.
2. Он не удаляет active класс из моего div.

скриншот

Есть идеи?

Answer 1

На мой взгляд, вы должны использовать переменную шаблона item для перехода в функцию scroll.

<div class="message" *ngFor="let message of listMessage" (click)="scroll(item)" #item>
  <span>Message {{ message }}</span>
</div>

Итак, в вашей функции вы можете получить доступ к offsetTop, classList из HTMLElement по порядку для прокрутки и управления классом.

scroll(item: HTMLElement) {
    window.scrollTo(0, item.offsetTop)
    if (this.oldElemt) {
      this.oldElemt.classList.remove('active')
    }
    item.classList.add('active')
    this.oldElemt = item
  }

Использование переменной для сохранения старого элемента, например oldElemt.

Это ссылка демонстрация

Answer 2

Вы можете попробовать этот код:

// Div to scroll
<div class="component-placehoder" #componentPlacehoder></div>

// create view child
 @ViewChild('componentPlacehoder', { static: true })
    componentPlacehoder: ElementRef;

// scroll to div  
this.componentPlacehoder.nativeElement.scrollIntoView(true, { block: 'end', behavior: 'smooth' });