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

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 AppComponent {
  
  constructor(private pdfService: PdfService) {
  }
  
  generatePdf() {
    this.pdfService.generatePdf();
  }
  
}

thisiszoaib

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

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

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');

thisiszoaib

<div class="card" (click)="cardClicked()">
    <div class="back">
        <img src="assets/card-back.jpg">
    </div>
    <div class="front">
        <img [src]="'https://source.unsplash.com/' + data.imageId + '/200x300'">
    </div>
</div>

thisiszoaib

:host {
    display: block;
    perspective: 600px;
}

.card {
    box-shadow: 10px 10px 43px -18px rgba(0, 0, 0, 0.75);
    border-radius: 5px;
    height: 300px;
    width: 200px;

thisiszoaib

@Component({
  selector: 'app-game-card',
  templateUrl: './game-card.component.html',
  styleUrls: ['./game-card.component.scss'],
  animations: [
    trigger('cardFlip', [
      state('default', style({
        transform: 'none'
      })),
      state('flipped', style({