document-viewer.component.html

<ng-container *ngIf="editInProgress && editor.mode !== 'onlyoffice'">
    <div class="editInProgress">
        <i class="fas fa-file-word bounce"></i>
        <div>
            {{lang.editInProgress}}
        </div>
        <div>
            <button mat-button (click)="cancelTemplateEdition()">{{lang.cancel}}</button>
        </div>
    </div>
</ng-container>
<ng-container *ngIf="!editInProgress">
    <ng-container *ngIf="noFile; else elseHaveFile">
        <div class="noFile">
            <i class="far fa-times-circle"></i>
            {{lang.noFile}}
        </div>
    </ng-container>
    <ng-template #elseHaveFile>
        <div class="example-loading-shade" *ngIf="loading">
            <mat-progress-spinner [mode]="loadingInfo.mode" [value]="loadingInfo.percent"></mat-progress-spinner>
            <div class="percent">{{loadingInfo.percent}} %</div>
            <div style="padding-top: 10px;">{{loadingInfo.message}}</div>
        </div>
        <div *ngIf="file.content === null && !loading" class="view-doc-container" appUploadFileDragDrop
            (onFileDropped)="dndUploadFile($event)" [disabled]="!editMode">
            <i class="fa fa-file-upload upload-icon"></i><br />
            {{lang.dragAndDrop}}<br />{{lang.or}}
            <div style="display: flex;">
                <div
                    style="margin-right:20px;align-items: center;justify-content: center;text-align: center;display: flex;">
                    <plugin-select-search #templateList *ngIf="listTemplates.length > 0" [label]="lang.chooseModel"
                        [placeholderLabel]="lang.chooseModel" [datas]="listTemplates" [class]="'input-form-filled'"
                        [formControlSelect]="templateListForm" (afterSelected)="editTemplate($event)"
                        style="width: 240px;text-align: left;font-weight:normal;font-size: 13px;">
                    </plugin-select-search>
                </div>
                <button mat-button (click)="docToUpload.click()" class="button-form-primary-alt"
                    style="align-items: center;justify-content: center;text-align: center;display: flex;">{{lang.chooseFile}}</button>
            </div>
        </div>
        <input type="file" #docToUpload name="files[]" (change)="uploadTrigger($event)" style="display:none;">
        <div style="display: block;width:100%;" appUploadFileDragDrop (onFileDropped)="dndUploadFile($event)"
            [disabled]="!editMode">
            <div *ngIf="!loading && file.content !== null" class="viewer-tools">
                <button mat-icon-button (click)="downloadOriginalFile()" [matTooltip]="lang.downloadOriginalFile">
                    <mat-icon class="fa fa-download"></mat-icon>
                </button>
                <button *ngIf="editMode && mode === 'attachment' && resId !== null" mat-icon-button (click)="editAttachment()" [matTooltip]="lang.editDocument">
                    <mat-icon class="fa fa-edit"></mat-icon>
                </button>
                <button mat-icon-button [matMenuTriggerFor]="menuOptions">
                    <mat-icon class="fas fa-chevron-down"></mat-icon>
                </button>
                <mat-menu #menuOptions="matMenu" [class]="'optionsListMenu'">
                    <button mat-menu-item *ngIf="file.contentView !== undefined" (click)="openPdfInTab()">
                        <mat-icon color="primary" class="fas fa-external-link-alt"></mat-icon>
                        <span>{{lang.openInExternalModal}}</span>
                    </button>
                    <button mat-menu-item *ngIf="editMode" (click)="docToUpload.click()">
                        <mat-icon color="primary" class="fa fa-file-upload"></mat-icon>
                        <span>{{lang.uploadAnOtherFile}}</span>
                    </button>
                    <button mat-menu-item *ngIf="editMode" (click)="cleanFile()">
                        <mat-icon class="fa fa-trash" color="warn"></mat-icon>
                        <span>{{lang.removeFile}}</span>
                    </button>
                </mat-menu>
            </div>
            <div>
                <pdf-viewer *ngIf="file.src!==null" [src]="file.src" [render-text]="true" [autoresize]="true"
                    [original-size]="false" [show-all]="true" (error)="onError($event)" style="width:100%;">
                </pdf-viewer>
            </div>

        </div>
        <div *ngIf="file.content !== null && noConvertedFound" class="no-doc-container" appUploadFileDragDrop
            (onFileDropped)="dndUploadFile($event)" [disabled]="!editMode">
            <div class="loaded-file"><i class="fa fa-file"></i>&nbsp;<a
                    (click)="downloadOriginalFile()">{{file.name}}</a>&nbsp;<b>{{lang.loaded}}</b></div>

            <div class="no-view"><i class="far fa-eye-slash no-view-icon"></i><br />{{lang.noAvailablePreview}}</div>

        </div>
    </ng-template>
</ng-container>
<ng-container *ngIf="editInProgress && editor.mode === 'onlyoffice'">
    <onlyoffice-viewer #onlyofficeViewer style="height:100%;width:100%;"
    [params]="editor.options"
    [file]="file"
    [sidenavLeft]="sidenavLeft"
    [editMode]="true"
    (triggerAfterUpdatedDoc)="triggerEvent.emit()"
    (triggerCloseEditor)="closeEditor()"
    ></onlyoffice-viewer>
</ng-container>