How to automatically scroll down to the bottom of a div in AngularJS

I have a chat application in AngularJS im just trying to scroll down all the way to the bottom like most chat apps do. i tried the native element.scrolltop attribute but no success

code
search.component.ts

import { Component,  OnInit,ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
...


@Component({
...
})
export class SearchComponent{
..
  selectedMessages: any[] = []
...
  @ViewChild('inboxChat',{static:true}) inboxChat?: ElementRef<HTMLDivElement>;

 constructor(private socketService: SearchService,private router: Router) {
...
}
 ngOnInit() { 

      if (this.inboxChat?.nativeElement){
        this.inboxChat.nativeElement.scrollTop = this.inboxChat.nativeElement.scrollHeight
        }
}

  ngAfterViewInit() {
    // Accessing the DOM element directly
    console.log(this.inboxChat?.nativeElement);

    // Modifying the DOM element
    if(this.inboxChat?.nativeElement)
    this.inboxChat.nativeElement.scrollTop = this.inboxChat?.nativeElement.scrollHeight;
    
  }

}

search.component.html

 <div  class="mesgs" *ngIf="selectedMessages !== []" >
              <div #inboxChat class="msg_history">
                ...
           
            </div>
          </div>

search.component.css

...
.msg_history {
  height: 516px;
  overflow-y: auto;
}

class .msgs doesn’t have overflow-y at all and i tried with that class selected as well