Ionic 5 pdf-viewer with zoom options

pdf-viewer.component.html

<ion-content>
  <ion-fab vertical="top" horizontal="end" slot="fixed">
    <ion-fab-button color="light" size="small" mode="ios">
      <ion-backdrop></ion-backdrop>
      <ion-icon name="close"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <pdf-viewer [src]="{url:fileUrl}" [zoom]="pdfZoom" [fit-to-page]="true" type="application/pdf"></pdf-viewer>

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-row text-center>
      <ion-col class="ion-no-padding animate__animated animate__fadeIn"  *ngIf="pdfZoom !== 1">
        <ion-fab-button size="small" (click)="resetZoom()">
          <ion-icon name="refresh"></ion-icon>
        </ion-fab-button>
      </ion-col>
      <ion-col class="ion-no-padding">
        <ion-fab-button size="small" (click)="zoomOut()">
          <ion-icon name="remove"></ion-icon>
        </ion-fab-button>
      </ion-col>
      <ion-col class="ion-no-padding">
        <ion-fab-button size="small" (click)="zoomIn()">
          <ion-icon name="add"></ion-icon>
        </ion-fab-button>
      </ion-col>
    </ion-row>
  </ion-fab>
</ion-content>

pdf-viewer.component.ts

import { Component, Input, OnInit } from '@angular/core';

const ZOOM_STEP = 0.25;
const DEFAULT_ZOOM = 1;
@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html',
  styleUrls: ['./pdf-viewer.component.scss'],
})
export class PdfViewerComponent implements OnInit {
  @Input() fileUrl: string;
  public pdfZoom: number = DEFAULT_ZOOM;
  constructor() { }

  ngOnInit() {
    console.log('this.fileUrl: ', this.fileUrl);
  }
  public zoomIn()
	{
		this.pdfZoom += ZOOM_STEP;
	}

	public zoomOut()
	{
		if (this.pdfZoom > DEFAULT_ZOOM) {
			this.pdfZoom -= ZOOM_STEP;
		}
	}

	public resetZoom()
	{
		this.pdfZoom = DEFAULT_ZOOM;
	}
}

Result