How To Add Auto Scroll In Angular

Introduction:

When content in the grid exceeds the width or height of an element, a scrollbar will be seen. Based on the following factors, the vertical and horizontal scrollbars will be displayed:

• When the total height of the rows in the grid is more than the element height, a vertical scrollbar is displayed.
• When the aggregate of the column widths is more than the width of the grid element, a horizontal scrollbar will emerge.
• The grid’s height and width are set, accordingly, using the height and width.

Automatically scroll the content of an HTML container to the bottom using an Angular directive. To view the entire health score assessment for ngx-auto-scroll, which includes popularity, security, maintenance, and community analysis, go to Snyk Advisor.

Create a new Project:

First of all, create a new project by running the following command in the terminal.

ne new auto-scroll

Install ngx-auto-scroll package:

Run command in a terminal window to install the ngx-auto-scroll package as below:

npm install ngx-auto-scroll

Import NgxAutoScrollModule:

Now import NgxAutoScrollModule in app.module.ts file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {NgxAutoScrollModule} from "ngx-auto-scroll";

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxAutoScrollModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  
}

app.component.ts

import { Component } from '@angular/core';
import { interval  } from "rxjs";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'auto-scroll';

  items:any = [];
  currentItem = 0;

  constructor() {
    const source = interval(100);  
const subscribe = source.subscribe(val => this.items.push(`Test Auto-scroll: ${this.currentItem++}`));  
   
  }
}

app.component.html

<div>
  <ul ngx-auto-scroll>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>
</div>

app.component.css

ul {
    width: 300px;
    height: 250px;
    border: solid red;
    overflow-y: scroll;
  }

OUTPUT: