Asymmetrik/mean2-starter

<section>

    <!-- Alert Notifications -->
    <alert *ngFor="let alert of alertService.getAlerts(); let i = index" [type]="alert.type" (close)="alertService.clear(i)" dismissible="true" >{{alert.msg}}</alert>

    <h3 class="page-header">
        My Teams
        <small>View and manage team membership and roles</small>
        <a *ngIf="user.canManageSystemResources()" [routerLink]="['/team/create', { mode:'create' }]" type="button" class="btn btn-default btn-sm pull-right">
            <i class="fa fa-plus"></i> Create Team
        </a>
    </h3>

    <div class="row">
        <div class="col-md-12">

            <!-- Search Input -->
            <div class="input-group">
                <input placeholder="Enter a search..." type="text" class="form-control input-sm" [(ngModel)]="search" (keyup.enter)="applySearch()">
                <span class="input-group-btn">
                    <button class="btn btn-default btn-sm" type="button" (click)="applySearch()">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>

        </div>
    </div>

    <pageable-table [items]="teams"
        [pagingOptions]="pagingOptions"
        (onPageChange)="goToPage($event)">

        <template asy-template="table-header">
            <th>Team Name</th>
            <th>Description</th>
            <th>Created</th>
            <th>&nbsp;</th>
        </template>

        <template asy-template="table-row" let-team>
            <td>
                <div class="hide-overflow" style="max-width:200px;">
                    <a [routerLink]="['/team', team._id]"><strong>{{team.name}}</strong></a>
                </div>
            </td>
            <td>
                <div class="hide-overflow" style="max-width:400px;">{{team.description}}</div>
            </td>
            <td>
                {{team.created | agoDate:false}}
            </td>
            <td>
                <div class="pull-right" *ngIf="user.canManageTeam(team)">
                    <div class="btn-group pull-right dropdown" dropdown>
                        <button type="button" class="btn btn-default btn-sm dropdown-toggle" dropdownToggle>
                            <i style="padding-right:5px;" class="fa fa-gear"></i><span class="caret"></span>
                        </button>
                        <ul *dropdownMenu class="dropdown-menu" role="menu">
                            <li><a (click)="updateTeam(team)"><i class="fa fa-fw fa-edit"></i> Edit</a></li>
                            <li><a (click)="deleteTeam(team)"><i class="fa fa-fw fa-trash"></i> Delete</a></li>
                        </ul>
                    </div>
                </div>
            </td>
        </template>

        <template asy-template="empty-table">
            <h4>
                No Teams?<br/>
                <small>
                    Either there were no teams that matched your search or you don't have access to any teams yet.<br/>
                    Read our <a [routerLink]="['/help/teams']">getting started page</a> for more details.
                </small>
            </h4>
        </template>

    </pageable-table>

</section>