how to display a pdf in angular?

I'm facing a problem showing a PDF document in a blank page after submitting a form (it's an Angular project).

import { Component, OnInit } from '@angular/core';
import { TrainerService } from '../../services/formateur.service';
import { Router, RouterLink } from '@angular/router';
import { Trainer } from '../../model/trainer';
import { NgFor, NgIf } from '@angular/common';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
selector: 'app-manage-trainers',
templateUrl: './manage-trainers.component.html',
styleUrls: ['./manage-trainers.component.css'],
imports: [RouterLink, NgFor, NgIf]
})
export class ManageTrainersComponent implements OnInit {
trainers: Trainer[] = [];

constructor(private trainerService: TrainerService, private router: Router,private sanitizer : DomSanitizer ) {}

ngOnInit(): void {
this.fetchTrainers();
}

fetchTrainers(): void {
this.trainerService.getTrainers().subscribe((trainers) => {
this.trainers = trainers;
});
}

deleteTrainer(id: number): void {
this.trainerService.deleteTrainer(id).subscribe(
() => {
console.log('Trainer deleted');
this.fetchTrainers();
},
(error) => {
console.error('Error deleting trainer', error);
}
);
}
getPhotoSrc(photo: File | null): SafeUrl|null {
if (!photo) {
return null;
}

const url = URL.createObjectURL(photo);
return this.sanitizer.bypassSecurityTrustUrl(url);
}


getCvHref(cv: File | null): SafeUrl | null {
if (!cv) {
return null;
}
const url = URL.createObjectURL(cv);
return this.sanitizer.bypassSecurityTrustUrl(url);
}

}


<div class="container mt-5">
<h1>Gestion des Formateurs</h1>

<div class="mb-3">
<a routerLink="add" class="btn btn-primary">Ajouter un formateur</a>
</div>

<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nom</th>
<th scope="col">Prénom</th>
<th scope="col">Email</th>
<th scope="col">Spécialisation</th>
<th scope="col">Photo</th>
<th scope="col">CV</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let trainer of trainers; let i = index">
<th scope="row">{{ i + 1 }}</th>
<td>{{ trainer.nom }}</td>
<td>{{ trainer.prenom }}</td>
<td>{{ trainer.email }}</td>
<td>{{ trainer.specialization }}</td>
<td>
<img *ngIf="trainer.photo" [src]="trainer.photo" alt="Trainer Photo" class="img-thumbnail" width="50" height="50">
<span *ngIf="!trainer.photo">pas de Photo</span>

</td>
<td>
<a *ngIf="trainer.cv" [href]="getCvHref(trainer.cv)" target="_blank">Voir CV</a>
<span *ngIf="!trainer.cv">pas de CV</span>
</td>
<td>
<a [routerLink]="['modify', trainer.id]" class="btn btn-warning btn-sm">Modifier</a>
<button (click)="deleteTrainer(trainer.id)" class="btn btn-danger btn-sm">Supprimer</button>
</td>
</tr>
<tr *ngIf="trainers.length === 0">
<td colspan="8" class="text-center">Aucun formateur trouvé</td>
</tr>
</tbody>
</table>
</div>


export interface Trainer {
id: number;
nom: string;
prenom: string;
email: string;
telephone?: string;
specialization: string;
cin:number;
cv:File;
photo:ImageData
}



I would really appreciate it if you can help me, the problem is when I open the web site there's no error to be found not in the console nor in the editor. I have tried many methods but unfortunately none of them worked.

Continue reading...