SecondaryToolbar empty while using a custom main toolbar

[JakobSnow]

I'm using the ngx-extended-pdf-viewer with a custom main toolbar with material design components (mat-toolbar, mat-icon-button,...) to fit the rest of my application. After I've updated the ngx-extended-pdf-viewer from 17.0.0 to 21.4.5, the SecondaryToolbar menu, which is not customized, is empty. The popup appears, but it does not contain any buttons.

Do you have any tips or hints? Maybe someone else stumbled on that problem?

[stephanrauh]

That's probably because I invented the <pdf-shy-button>. That's a flexible wrapper class defining both the main toolbar and the secondary menu in a very flexible way. The idea is that responsive design decides where the button is displayed. As a programmer, you only have to define the toolbar once. Buttons that don't make it into the main toolbar "shyly" hide as menu items in the secondary menu.

I haven't tried it yet, but I believe <pdf-shy-buttons> are able to render your Material Design buttons. Have a look at https://pdfviewer.net/extended-pdf-viewer/custom-toolbar and click the second tab to see the documentation.

If you need support, don't hesitate to ask. I'm keeping the ticket open until you tell me you've managed to solve your issue.

[JakobSnow]

Thank you for your answer, but I guess that's not going to work, or I got you wrong. I've tried to add my custom material button inside your <pdf-shy-button> tag, but that's not going to work.

<pdf-shy-button
      [cssClass]="'lg' | responsiveCSSClass"
      title="open PDF file in a new tab"
      primaryToolbarId="sidebarToggle"
      [order]="1"
      [closeOnClick]="true"
    >
      <button
        custom-icon-big-button
        id="sidebarToggle"
        color="primary"
        class="my-toggleable"
        matTooltip="Übersichtsleiste öffnen / schließen"
      >
        <mat-icon svgIcon="tb-viewverticalformonly"></mat-icon>
      </button>
    </pdf-shy-button>

I've also played around with adding just the mat-icon, use my custom button attributes directly on the pdf-shy-button,.... There was no way to get that running.

[stephanrauh]

Sorry for answering late! Yes, you're right, <pdf-shy-button> didn't support nested component yet. I've implemented your feature this evening. It's part of version 21.2.0-alpha.0. The feature works fine, but I've called it an alpha version so I can think about the API and modify it if need be.

I didn't manage to implement your elegant approach. Instead, my implementation looks like so:

      <pdf-shy-button
      [cssClass]="'lg' | responsiveCSSClass"
      title="export an image"
      primaryToolbarId="nestedComponent"
      [order]="1"
      [closeOnClick]="true"
      [action]="onClick"
    >
      <button #nestedContent
        id="sidebarToggle"
        color="primary"
        class="toolbarButton"
        matTooltip="export an image"
        (click)="onClick()"
      >
      <mat-icon>photo_camera</mat-icon>
      </button>
    </pdf-shy-button>

The key differences are:

• You have to specify the identifier "#nestedContent".
• The onClick method must not rely on the this pointer. If you need it, wrap it like we did in the old JavaScript days:

public onClick?: () => void; // this is a attribute

constructor() {
    const emitter = this.pageViewModeChange;
    const self = this; // necessary because onClick is called from outside, hence this may be undefined
    this.onClick = () => {
       // implement your custom action
    };
  }
  public ngOnDestroy(): void {
    this.onClick = undefined;
  }