opt-cc/static/src/app/users/user-list/user-list.component.html

<div class="select-list">
  <div class="input-group list-header pull-left">
    <div class="btn-group" (click)="filterUsers()">
      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="BLUFOR" uncheckable>{{fraction.BLUFOR}}</label>
      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="OPFOR" uncheckable>{{fraction.OPFOR}}</label>
      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="UNASSIGNED" uncheckable>Ohne Squad</label>
    </div>
    <a class="pull-right btn btn-success" (click)="openNewUserForm()">+</a>
  </div>

  <div class="input-group list-header">
    <input id="search-tasks"
           type="text" #query class="form-control"
           (keyup.enter)="filterUsers()"
           [formControl]="searchTerm">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button"
              (click)="filterUsers()">
        Suchen
      </button>
    </span>
  </div>

  <div class="search-results"
       data-infinite-scroll
       debounce
       [infiniteScrollDistance]="scrollDistance"
       [infiniteScrollThrottle]="throttle"
       (scrolled)="onScrollDown()">
    <pjm-user-item *ngFor="let user of users$ | async"
                   [user]="user"
                   (userDelete)="deleteUser(user)"
                   (userSelected)="selectUser($event)"
                   (userAward)="awardUser($event, $event)"
                   [selected]="user._id == selectedUserId">
    </pjm-user-item>
  </div>
  <br>
</div>