Asymmetrik/mean2-starter

<section>

    <div class="row" *ngIf="!readOnly">
        <div class="col-md-12">
            <!-- Adding new users typeahead control-->
            <input type="text" name="member" class="form-control input-sm"
                   placeholder="Start typing a user to add..."
                   [(ngModel)]="queryUserSearchTerm"
                   [typeahead]="searchUsersRef"
                   [typeaheadOptionField]="'displayName'"
                   [typeaheadMinLength]="2"
                   [typeaheadWaitMs]="300"
                   (typeaheadOnSelect)="typeaheadOnSelect($event)">
        </div>
    </div>

    <pageable-table [items]="teamMembers"
        [pagingOptions]="pagingOptions"
        [sortOptions]="sortOptions"
        (onPageChange)="goToPage($event)"
        (onSortChange)="setSort($event)">

        <template asy-template="table-header">
            <th *ngIf="!readOnly" >&nbsp;</th>
            <th>Name</th>
            <th>Username</th>
            <th>Active</th>
            <th>Bypassed</th>
            <th>Team Role</th>
        </template>

        <template asy-template="table-row" let-member>
            <td *ngIf="!readOnly" style="width:110px;">
                <div class="pull-left">
                    <button type="button" class="btn btn-danger btn-sm"
                            [disabled]="!member.explicit"
                            (click)="removeMember(member)">
                        <i class="fa fa-user-times"></i> Remove
                    </button>
                </div>
            </td>

            <!-- Name -->
            <td>
                <div class="hide-overflow" style="max-width: 200px;">{{member.userModel.name}}</div>
            </td>

            <!-- Username -->
            <td>
                <div class="hide-overflow" style="max-width:400px;">{{member.userModel.username}}</div>
            </td>

            <!-- Active -->
            <td>
                <div class="hide-overflow" style="max-width:50px;">
                    <i class="fa fa-fw fa-check-square-o" disabled
                        [ngClass]="{'fa-check-square-o': member.active, 'fa-square-o': !member.active }"></i>
                </div>
            </td>

            <!-- Bypass -->
            <td>
                <div class="hide-overflow" style="max-width:50px;">
                    <i class="fa fa-fw fa-check-square-o" disabled
                        [ngClass]="{'fa-check-square-o': member.userModel.bypassAccessCheck, 'fa-square-o': !member.userModel.bypassAccessCheck }"></i>
                </div>
            </td>

            <!--Role Buttons-->
            <td style="width:275px;">
                <div class="pull-left">
                    <div *ngIf="!readOnly" class="btn-group btn-group-sm" role="group">
                        <button type="button"
                                class="btn btn-sm"
                                *ngFor="let role of teamRoleOptions"
                                [ngClass]="{ 'btn-selected': member.role === role.role, 'btn-unselected': member.role !== role.role }"
                                [attr.title]="role.label"
                                (click)="updateRole(member, role.role)">
                            {{role.label}}
                        </button>
                    </div>
                    <div *ngIf="readOnly">
                        {{member.role}}
                    </div>
                </div>
            </td>
        </template>

        <template asy-template="empty-table">
            <h4>
                No Members?<br/>
                <small>
                    There are no members on this team.<br/>
                    Read our <a [routerLink]="['/help/teams']">help page</a> for more details.
                </small>
            </h4>
        </template>

    </pageable-table>

</section>