opt-cc/static/src/app/manage/ranks/rank-list/rank-list.component.html

<div class="select-list">
  <cc-list-filter
    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
                      {label: fraction.OPFOR, value: 'OPFOR'}]"
    [addButton]="{svgIcon: 'add', tooltip: 'ranks.list.button.add'}"
    (executeSearch)="filterRanks($event)"
    (openAddFrom)="openNewRankForm()">
  </cc-list-filter>

  <cc-list-search [searchTerm]="searchTerm"
                  (searchTermStream)="initObservable($event)"
                  (executeSearch)="filterRanks()">
  </cc-list-search>

  <cc-rank-item *ngFor="let rank of ranks$ | async"
                 [rank]="rank"
                 (rankDelete)="deleteRank(rank)"
                 (rankSelected)="selectRank($event)"
                 [selected]="rank._id == selectedRankId">
  </cc-rank-item>

</div>