zgo/src/app/db-export/db-export.component.html

<div class="settings-title">{{ vE.dbexportSettingsTitle }}</div>
<div class='daterangecard'>
  <div class='description'>
    {{ vE.dbexportExportDescrip }}
  </div>  
  <div class="datepicker" 
       *ngIf="ordersOk()">
    <mat-form-field appearance="fill">
    <!--
      <mat-label >Enter a date range</mat-label>
    -->
      <div class="daterange">{{ vE.dbexportDateRange }}</div>
      <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
        <input matStartDate formControlName="start" placeholder="{{ vE.dbexportStartDate }}">
        <input matEndDate formControlName="end" placeholder="{{ vE.dbexportEndDate }}">
      </mat-date-range-input>
      <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-date-range-picker #picker></mat-date-range-picker>

      <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">{{ vE.dbexportInvalidStart }}</mat-error>
      <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">{{ vE.dbexportInvalidEnd }}</mat-error>
    </mat-form-field>
    <br>
    <br>
    <br>
  </div>

  <div class="noorders" 
       *ngIf="!ordersOk()">
    <br>
      {{ vE.dbexportNoordersCreated }}
      <br>
      {{ vE.dbexportNothingTodo }}
    <br>  
    <br> 
    <br>  
  </div>     
  <br>
  <br>
  <div style="display: flex;
        justify-content: space-between;
        align-items: center;">
    <button mat-raised-button 
            style="background: #ff5722;
                   color: white;
                   font-weight: 700;"
        (click)="closedbExport()">
      {{ vE.dbexportBtnClose }}
    </button>

      <a mat-raised-button *ngIf="checkReady()" color="primary" [href]="fileUrl"        
         download="orders.csv">{{ vE.dbexportDownloadLink }}</a>

  </div>
<!--  
  <div style="height: 20px;
        margin-top: 10px;">
  </div> 
 -->      
</div>