src/app/lists/historical-shift-changes/historical-shift-changes.component.html

<div class="panel panel-default">
  <div class="panel-heading">
    <form #entryForm="ngForm">
      <table>
        <tr>
          <td style="width:22%;">
            <h4 class="panel-title">
              <div >Schichtübergaben Von-Bis</div>
            </h4>
          </td>
          <td style="width:90%;">
            <div class="input-group" title="Von - Bis">
              <label for="futureNotificationsFormControl" class="input-group-addon dateRangePickerIcon"><span class="glyphicon glyphicon-calendar"></span></label>
              <input style="min-width: 278px; z-index: 0" id="futureNotificationsFormControl" class="form-control entry-input" type="text"
                daterangepicker [options]="{startDate:startDate, endDate:endDate, drops:'down'}" (applyDaterangepicker)="startDate=$event.picker.startDate; endDate=$event.picker.endDate; retrieveHistoricalResponsibilities(); storeDateRange($event);"
              />
            </div>
          </td>
        </tr>
      </table>
    </form>
  </div>
    <div class="panel-body">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th class="responsiblity-tab-col">Von</th>
            <th class="responsiblity-tab-col">An</th>
            <th class="responsiblity-tab-col">Am</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let historicalResponsibility of historicalResponsibilities; let i = index" (click)="selectShiftChange(i,historicalResponsibility)" [class.active]="i === selectedRow">
            <td colspan="3" style="padding:0px;">
              <table>
                <tbody>
                  <tr>
                    <td class="responsiblity-tab-col">
                      <span class="responsiblity-tab-version-col"></span>
                      <span>               
                     {{ mapUserName( historicalResponsibility.formerResponsibleUser ) }}
                      </span>
                    </td>
                    <td class="responsiblity-tab-col">
                      <span >
                         {{ mapUserName( historicalResponsibility.responsibleUser ) }}
                      </span>
                    </td>
                    <td class="responsiblity-tab-col">
                      <span>
                    {{ historicalResponsibility.transferDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}
                    </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
</div>