How to Optimize data handling for multiple requests in an Angular dashboard using virtual scroll?

 To optimize data handling for multiple requests in an Angular dashboard, we can implement features like virtual scrolling to load data dynamically and pagination to load only a subset of data at a time. Virtual scrolling is particularly useful for large datasets because it allows rendering only the visible portion of the list, reducing the number of DOM elements created and improving performance.

In this example, we will use Angular Material's cdk-virtual-scroll-viewport component for virtual scrolling. We'll simulate multiple data requests (for different widgets or sections in the dashboard) and combine them into a unified dashboard.

Prerequisites:

1. Angular Material should be installed in your Angular application.
2. Ensure that @angular/cdk is installed (it is a dependency for virtual scrolling).

If Angular Material and CDK are not installed, you can install them via:

ng add @angular/material

1. Install Angular Material and CDK (if not installed already)

ng add @angular/material
npm install @angular/cdk

2. Setup the Dashboard Component with Virtual Scrolling

Here is a full example demonstrating how you can use virtual scrolling in an Angular dashboard that handles multiple data requests.

app.module.ts

Import necessary Angular Material modules and CdkVirtualScrollViewport for virtual scrolling.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

// Angular Material Modules
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    MatCardModule,
    MatButtonModule,
    ScrollingModule,  // For virtual scrolling
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

In this example, we'll make multiple API requests (simulating the data for different sections of the dashboard) and handle them using virtual scrolling.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // Data to display in virtual scroll
  widgetData1: any[] = [];
  widgetData2: any[] = [];
  widgetData3: any[] = [];

  // API URLs (simulated here)
  widgetApi1 = 'https://jsonplaceholder.typicode.com/posts?_page=1&_limit=50';
  widgetApi2 = 'https://jsonplaceholder.typicode.com/users?_page=1&_limit=50';
  widgetApi3 = 'https://jsonplaceholder.typicode.com/comments?_page=1&_limit=50';

  constructor(private http: HttpClient) { }

  ngOnInit() {
    // Fetch data for each widget
    this.loadWidgetData(this.widgetApi1, 'widgetData1');
    this.loadWidgetData(this.widgetApi2, 'widgetData2');
    this.loadWidgetData(this.widgetApi3, 'widgetData3');
  }

  // Function to load data for each widget
  loadWidgetData(apiUrl: string, widgetKey: string) {
    this.http.get<any[]>(apiUrl).subscribe(data => {
      this[widgetKey] = data;
    });
  }
}

app.component.html

Here, we use Angular Material's cdk-virtual-scroll-viewport to display large data sets for each widget efficiently.

<div class="dashboard">
  <div class="widget">
    <mat-card>
      <h2>Widget 1 - Posts</h2>
      <cdk-virtual-scroll-viewport itemSize="50" class="scroll-container">
        <div *cdkVirtualFor="let item of widgetData1">
          <mat-card class="item-card">
            <h3>{{ item.title }}</h3>
            <p>{{ item.body }}</p>
          </mat-card>
        </div>
      </cdk-virtual-scroll-viewport>
    </mat-card>
  </div>

  <div class="widget">
    <mat-card>
      <h2>Widget 2 - Users</h2>
      <cdk-virtual-scroll-viewport itemSize="50" class="scroll-container">
        <div *cdkVirtualFor="let item of widgetData2">
          <mat-card class="item-card">
            <h3>{{ item.name }}</h3>
            <p>{{ item.email }}</p>
          </mat-card>
        </div>
      </cdk-virtual-scroll-viewport>
    </mat-card>
  </div>

  <div class="widget">
    <mat-card>
      <h2>Widget 3 - Comments</h2>
      <cdk-virtual-scroll-viewport itemSize="50" class="scroll-container">
        <div *cdkVirtualFor="let item of widgetData3">
          <mat-card class="item-card">
            <h3>{{ item.name }}</h3>
            <p>{{ item.body }}</p>
          </mat-card>
        </div>
      </cdk-virtual-scroll-viewport>
    </mat-card>
  </div>
</div>

app.component.css

Here, we add some basic styles for the widgets and virtual scroll containers.

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.widget {
  width: 100%;
}

.mat-card {
  margin-bottom: 20px;
  padding: 20px;
}

.scroll-container {
  height: 400px;  /* Adjust the height based on your design */
  overflow: auto;
}

.item-card {
  margin-bottom: 10px;
}

Explanation:

1. Multiple Widget Requests:

   • We have three widgets in the dashboard (widgetData1, widgetData2, and widgetData3), each representing different types of data (posts, users, and comments).
   • We simulate three API calls (widgetApi1, widgetApi2, widgetApi3) to fetch these data sets.

2. Virtual Scrolling:

   • We use Angular Material’s cdk-virtual-scroll-viewport for each widget’s data, allowing only the visible portion of the data to be rendered in the DOM at any time.
   • The itemSize attribute specifies the height of each item in the list (in this case, 50px).

3. Angular HTTP Client:

   • The HttpClient service is used to make API requests and populate the data in the component.

4. Efficient Rendering:

   • Virtual Scroll is used to ensure that only the items visible on the screen are rendered, improving performance when dealing with large datasets.
   • You can further optimize the request handling by implementing pagination and infinite scrolling based on the user’s scroll position.

Benefits of Virtual Scrolling:

• Improved performance by rendering only the visible data, even for large datasets.
• Lower memory usage as unnecessary DOM elements are not created.
• It can be used to handle data efficiently in dashboards with multiple sections/widgets.

This setup should be highly efficient for handling multiple requests and rendering large datasets in a performant way on a dashboard using Angular.