thisiszoaib

  dynamicComponent: Type<ReportCardComponent>;

  constructor() { }

  async loadComponent(): Promise<any> {
    const imported = await import('./report-card/report-card.component');
    this.dynamicComponent = imported.ReportCardComponent;
  }

thisiszoaib

dynamicComponent: Type<ReportCardComponent>;

constructor() { }

async loadComponent(): Promise<any> {
    const imported = await import('./report-card/report-card.component');
    this.dynamicComponent = imported.ReportCardComponent;
}

thisiszoaib

const routes = [
{
        path: 'academics',
        loadChildren: () => import('./academics/academics.module').then((m) => m.AcademicsModule)
}
]

thisiszoaib

export class AppComponent {
  
  constructor(private pdfService: PdfService) {
  }
  
  generatePdf() {
    this.pdfService.generatePdf();
  }
  
}

thisiszoaib

export class PdfService {
  pdfMake: any;
  
  constructor() { }
  
  async loadPdfMaker() {
    if (!this.pdfMake) {
      const pdfMakeModule = await import('pdfmake/build/pdfmake');
      const pdfFontsModule = await import('pdfmake/build/vfs_fonts');
      this.pdfMake = pdfMakeModule.default;

thisiszoaib

export class PdfService {
  pdfMake: any;
  
  async loadPdfMaker() {
    if (!this.pdfMake) {
      const pdfMakeModule = await import('pdfmake/build/pdfmake');
      const pdfFontsModule = await import('pdfmake/build/vfs_fonts');
      this.pdfMake = pdfMakeModule.default;
      this.pdfMake.vfs = pdfFontsModule.default.pdfMake.vfs;
    }

thisiszoaib

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

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

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

thisiszoaib

this.loading = true;

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