src/app/filter/filter.component.html

<div id="collapse9" class="panel-collapse collapse" [ngClass]="{'in': filterExpanded }">
<div  class="panel panel-default ">
  <div class="panel-heading">
    <h4 class="panel-title">
        Filter
    </h4>
  </div>
    <div style="width:100%;">
      <div *ngIf="bannerMessage.isActive" [ngClass]="{'alert':true, 
    'alert-danger':bannerMessage.status===bannerMessageStatus.error,
    'alert-info':bannerMessage.status===bannerMessageStatus.info,
    'alert-warning':bannerMessage.status===bannerMessageStatus.warning,
    'alert-success':bannerMessage.status===bannerMessageStatus.success}">
        <div class="close" (click)="bannerMessage.hide()">x</div>
        {{bannerMessage.text}}
      </div>
    </div>
    <div class="panel-body">
      <table class="table table-bordered responsibility-column-striped">
        <thead>
          <tr>
            <th style="border: 0"></th>
            <th style="min-width: 64px">Strom</th>
            <th style="min-width: 64px">Gas</th>
            <th style="min-width: 64px">FW</th>
            <th style="min-width: 64px">Wasser</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let responsibilityRow of responsibilityContainerMatrix">
            <td>{{ responsibilityRow.gridTerritoryDescription }}</td>
            <td>
              <span class="filterCheckbox"><input type="checkbox" *ngIf="responsibilityRow && getResponsiblity(responsibilityRow,'S')" (change)="responsibilitiesSelectionChanged()"
                class="responsibility-checkbox-er" [(ngModel)]="getResponsiblity(responsibilityRow,'S').isActive"></span>
               <span class="filterUsername" *ngIf="responsibilityRow && getResponsiblity(responsibilityRow,'S')">{{ mapUserName(getResponsiblity(responsibilityRow, 'S').responsibleUser) }}</span> 
            </td>
            <td>
              <span class="filterCheckbox"><input type="checkbox" *ngIf="responsibilityRow  && getResponsiblity(responsibilityRow,'G')" (change)="responsibilitiesSelectionChanged()"
                  class="responsibility-checkbox-gr" [(ngModel)]="getResponsiblity(responsibilityRow,'G').isActive"></span>
               <span class="filterUsername" *ngIf="responsibilityRow && getResponsiblity(responsibilityRow,'G')">{{ mapUserName(getResponsiblity(responsibilityRow, 'G').responsibleUser) }}</span> 
            </td>
            <td>
              <span class="filterCheckbox"><input type="checkbox" *ngIf="responsibilityRow  && getResponsiblity(responsibilityRow,'F')" (change)="responsibilitiesSelectionChanged()"
                class="responsibility-checkbox-dhr" [(ngModel)]="getResponsiblity(responsibilityRow,'F').isActive"></span>
               <span class="filterUsername" *ngIf="responsibilityRow && getResponsiblity(responsibilityRow,'F')">{{ mapUserName(getResponsiblity(responsibilityRow, 'F').responsibleUser) }}</span> 
            </td>
            <td>
              <span class="filterCheckbox"><input type="checkbox" *ngIf="responsibilityRow  && getResponsiblity(responsibilityRow,'W')" (change)="responsibilitiesSelectionChanged()"
                class="responsibility-checkbox-wr" [(ngModel)]="getResponsiblity(responsibilityRow,'W').isActive"></span>
               <span class="filterUsername" *ngIf="responsibilityRow && getResponsiblity(responsibilityRow,'W')">{{ mapUserName(getResponsiblity(responsibilityRow, 'W').responsibleUser) }}</span> 
            </td>
          </tr>
        </tbody>
      </table>
      <button id="selectAllButton" class="btn btn-primary btn-sm" (click)="selectAllResponsibilities()">Alle setzen</button>
    <button id="deselectAllButton" class="btn btn-primary btn-sm" (click)="deselectAllResponsibilities()">Alle löschen</button>
    </div>
</div>
</div>