thisiszoaib

constructor(private overlay: OverlayContainer) { }

ngOnInit(): void {
  
    this.toggleControl.valueChanges.subscribe((darkMode) => {
      const darkClassName = 'darkMode';
      this.className = darkMode ? darkClassName : '';
      
      if (darkMode) {
        this.overlay.getContainerElement().classList.add(darkClassName);

thisiszoaib

<mat-toolbar color="primary">
  Angular Dark Mode
  <div class="flex-stretch"></div>
  <mat-icon class="mr-8">brightness_5</mat-icon>
  <mat-slide-toggle [formControl]="toggleControl" class="mr-8">
  </mat-slide-toggle>
  <mat-icon>bedtime</mat-icon>
</mat-toolbar>

thisiszoaib

listItems = [];

fetchMore(): void {
  
    const images = ['IuLgi9PWETU', 'fIq0tET6llw', 'xcBWeU4ybqs', 'YW3F-C5e8SE', 'H90Af2TFqng'];
    
    const newItems = [];
    
    for (let i = 0; i < 20; i++) {
      const randomListNumber = Math.round(Math.random() * 100);

thisiszoaib

<mat-list class="content">
    <mat-list-item *ngFor="let item of listItems">
      <img matListAvatar [src]="item.image">
      <h3 matLine> {{item.title}} </h3>
      <p matLine>
        <span> {{item.content}} </span>
      </p>
      <button mat-icon-button [matMenuTriggerFor]="itemMenu">
        <mat-icon>
          more_vert

thisiszoaib

<cdk-virtual-scroll-viewport #scroller itemSize="72" class="content">
  <mat-list>
    <ng-container *cdkVirtualFor="let item of listItems">
      <mat-list-item>
        ...
      </mat-list-item>
    </ng-container>
  </mat-list>
</cdk-virtual-scroll-viewport>

thisiszoaib

this.scroller.elementScrolled().pipe(
      map(() => this.scroller.measureScrollOffset('bottom')),
      pairwise(),
      filter(([y1, y2]) => (y2 < y1 && y2 < 140)),
      throttleTime(200)
).subscribe(() => {
      this.ngZone.run(() => {
        this.fetchMore();
      });
}

thisiszoaib

this.loading = true;

timer(1000).subscribe(() => {
  this.loading = false;
  this.listItems = [...this.listItems, ...newItems];
});

thisiszoaib

<mat-list>
   .......
   <div class="spinner-item">
      <mat-progress-spinner [mode]="'indeterminate'" [diameter]="50">     
      </mat-progress-spinner>
    </div>
</mat-list>

thisiszoaib

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent

thisiszoaib

<mat-toolbar color="primary">
    PDF Generator with PDFMake
</mat-toolbar>

<button mat-raised-button color="primary">
    Generate PDF
</button>