document-viewer.component.html

<ng-container *ngIf="editInProgress; else elseTemplate">
    <div class="editInProgress">
        <i class="fas fa-file-word bounce"></i>
        <div>
            Edition en cours ...
        </div>
        <div>
            <button mat-button (click)="cancelTemplateEdition()">{{lang.cancel}}</button>
        </div>
    </div>
</ng-container>
<ng-template #elseTemplate>
    <div class="example-loading-shade" *ngIf="loading">
        <mat-progress-spinner [mode]="loadingInfo.mode" [value]="loadingInfo.percent"></mat-progress-spinner>
        <div style="padding-top: 10px;">{{loadingInfo.message}}</div>
    </div>
    <div *ngIf="file.content === null && !loading" class="view-doc-container" appUploadFileDragDrop
        (onFileDropped)="dndUploadFile($event)">
        <i class="fa fa-file-upload upload-icon"></i><br />
        Glisser-déposer<br />ou
        <div style="display: flex;">
            <button mat-button class="button-form-primary-alt" (click)="loadTemplates()" [matMenuTriggerFor]="menu"
                style="margin-right:20px;align-items: center;justify-content: center;text-align: center;display: flex;">
                <span class="menu-label">
                    Choisir un modèle
                </span>
                <i class="fa fa-chevron-down menu-icon"></i>
            </button>
            <mat-menu #menu="matMenu" [class]="'menuForm'">
                <button mat-menu-item (click)="editTemplate(template)" *ngFor="let template of listTemplates">{{template.label}}</button>
            </mat-menu>
            <button mat-button (click)="docToUpload.click()" class="button-form-primary-alt"
                style="align-items: center;justify-content: center;text-align: center;display: flex;">Choisissez
                votre fichier</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)">
        <div *ngIf="!loading" class="viewer-tools">
            <button *ngIf="editMode" mat-icon-button (click)="docToUpload.click()"
                [matTooltip]="lang.uploadAnOtherFile">
                <mat-icon class="fa fa-file-upload"></mat-icon>
            </button>
            <button mat-icon-button (click)="downloadOriginalFile()" [matTooltip]="lang.downloadOriginalFile">
                <mat-icon class="fa fa-download"></mat-icon>
            </button>
            <!--<button mat-icon-button (click)="printPdf()" matTooltip="Imprimer le pdf">
                <mat-icon class="fa fa-print"></mat-icon>
            </button>-->
            <button *ngIf="editMode" mat-icon-button (click)="cleanFile()" [matTooltip]="lang.removeFile">
                <mat-icon class="fa fa-trash" color="warn"></mat-icon>
            </button>
        </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 *ngIf="file.content !== null && noConvertedFound" class="no-doc-container" appUploadFileDragDrop
        (onFileDropped)="dndUploadFile($event)">
        <div class="loaded-file"><i class="fa fa-file"></i>&nbsp;<a
                (click)="docToUpload.click()">{{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>