How can I use ngx-extended-pdf-viewer in an cdk-overlay? (in Angular 14)

Question

I am able to include an ngx-extended-pdf-viewer in a regular page View but when I try to embed it in an CDK Overlay the PDF viewer does not show. I can see the HTML in DevTools (see below) but it doesn't show up.

DevTools display with PDF Viewer in an Overlay

I have created a Service that takes a custom PdfResourceLink object (that has a URL to a PDF) and renders the overlay:

export const THE_PDF_RESOURCE = new InjectionToken<{}>('THE_PDF_RESOURCE');

@Injectable()
export class PdfViewerService {
  constructor(
    private readonly overlay: Overlay,
    private readonly injector: Injector,
  ) {
  }


  showViewer(pdf: PdfResourceLink) {
    // Returns an OverlayRef (which is a PortalHost)
    this._overlayRef = this.overlay.create({
      width: '100vw',
      height: '100vh',
      hasBackdrop: true,
      backdropClass: 'semi-transparent-overlay-backdrop',
      disposeOnNavigation: true,
    });

    // We use a custom Injector rather than passing @Input properties (same effect)
    const viewerInjector = Injector.create({
      parent: this.injector,
      providers: [
        { provide: THE_PDF_RESOURCE, useValue: pdf }
      ]
    })

    // Create ComponentPortal that can be attached to a PortalHost
    const viewerPortal = new ComponentPortal(PdfViewerComponent, null, viewerInjector);

    // Attach ComponentPortal to PortalHost
    this._overlayRef.attach(viewerPortal);
  }

  close() {
    this._overlayRef?.dispose();
  }

  private _overlayRef: OverlayRef|null = null;
}

Here is the View component HTML:

<article aria-label="PDF Viewer">
  <button mat-fab color="warn" (click)="closeOverlay()"><mat-icon>close</mat-icon></button>
  <ngx-extended-pdf-viewer
      [src]="this.pdfLink.url"
      [useBrowserLocale]="true"
      [disableForms]="true"
      [enablePrint]="false"
      [showHandToolButton]="true"
      [showPresentationModeButton]="true"
      [showDownloadButton]="false"
      [height]="'90vh'"
      [textLayer]="true"
  ></ngx-extended-pdf-viewer>
</article>

Here is the View component controller:

@Component({
  selector: 'lib-pdf-viewer',
  templateUrl: './pdf-viewer.component.html',
  styleUrls: ['./pdf-viewer.component.sass']
})
export class PdfViewerComponent
  extends AbstractViewComponent {

  constructor(
    // the View property is injected directly during construction
    @Inject(THE_PDF_RESOURCE) readonly pdfLink: PdfResourceLink,
    // the View needs to communicate with the mediator Service
    private readonly overlaySvc: PdfViewerService,
  ) {
    super();
  }

  closeOverlay() {
    this.overlaySvc.close();
  }
}

The styles (Sass) code is pretty simple:

:host(lib-pdf-viewer)
  //margin: auto
  //display: block

  article

    ngx-extended-pdf-viewer
      position: unset

    button
      position: absolute
      top: 10px
      right: 10px

I've tried a variety of changes to the display, height and width style attributes but nothing has worked yet.

Any ideas?

I have scanned SO and the web, in general, and have found no relevant information.

One source recommended setting the [height] attribute, which I am doing. No change.