doneit-web/src/app/modals/view-media/view-media.page.html

<ion-header class="ion-no-border" translucent>
  <div class="main-header d-flex align-items-center">
    <div class= "left cursor-pointer" (click)="close()">
      <button class="btn-no-color" (click)="close()">
        <fa-icon icon="chevron-left" class="header-top-btn font-awesome-1 font-35"></fa-icon>
      </button>
    </div>
    <div  class="middle-container">
      <div class="middle">
        <ion-label class="title">{{name}}<span class="font-15">, {{_updatedAt | date}}</span>
        </ion-label>
      </div>
    </div>
  </div>
</ion-header>
<ion-content fullscreen>
  <div class="media d-flex align-items-center justify-center">
    <div class="media-content w-100 d-flex align-items-center justify-center">

      <ion-slides style="width: 100%; height: 100%;" [options]="sliderOpts">
        <ion-slide>
          <div class="swiper-zoom-container">
            <div *ngIf="type == 'application/img'">
              <img src="{{image}}">
            </div>
            <div *ngIf="type == 'application/pdf'">
              <iframe width="100%" height="100%" [src]="base64Sanitize" type="application/vnd.openxmlformats-officedocument.wordprocessingml.document"></iframe>
              
              <!-- <pdf-viewer [src]="image"
              [render-text]="true"
              [original-size]="false"
              style="width: 400px; height: 500px"
  ></pdf-viewer> -->
            </div>
          </div>
        </ion-slide>
      </ion-slides>

    </div>
  </div>
</ion-content>