Asymmetrik/mean2-starter

<section>

    <div class="row">
        <!-- Search Input -->
        <div [ngClass]="{ 'col-md-10': !readOnly, 'col-md-12': readOnly }">
            <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 class="col-md-2">
            <a type="button" class="btn btn-default btn-sm pull-right" *ngIf="!readOnly"
               [routerLink]="['/tag/create', {mode:'create', teamId:teamId}]">
                <i class="fa fa-plus"></i> Create Tag
            </a>
        </div>
    </div>

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

        <template asy-template="table-header">
            <th>Name</th>
            <th>Description</th>
            <th>Created</th>
            <th>Updated</th>
            <th>Resources</th>
            <th *ngIf="!readOnly">&nbsp;</th>
        </template>

        <template asy-template="table-row" let-tag>
            <!-- Tag Name -->
            <td>
                <div style="width:200px;"
                        class="hide-overflow"
                        [attr.title]="tag.name">
                    {{tag.name}}
                </div>
            </td>

            <td>
                <div style="width:200px;"
                        class="hide-overflow"
                        [attr.title]="tag.description">
                    {{tag.description}}
                </div>
            </td>

            <td >
                <div>{{tag.created | agoDate:false}}</div>
            </td>

            <td >
                <div>{{tag.updated | agoDate:false}}</div>
            </td>

            <td>
                <div *ngIf="tag?.resources?.length === 0">
                    No resources
                </div>
                <div *ngIf="tag?.resources?.length > 0">
                    <span class="resource-name label label-gray hide-overflow"
                          *ngFor="let resource of tag.resources">
                        {{resource.title}}
                    </span>
                    <span class="resource-name controls hide-overflow"
                          *ngIf="tag?.numResources > maxResourcesShownInline">
                        ...and {{tag?.numResources-maxResourcesShownInline}} more
                    </span>
                </div>
            </td>

            <td *ngIf="!readOnly">
                <div class="pull-right" >
                    <a class="no-href btn-icon"
                        tooltip="Edit"
                        placement="top"
                        container="body"
                        [routerLink]="['/tag/edit', tag._id, { mode: 'edit' }]">
                        <i class="fa fa-gear" [ngClass]="iconClass"></i>
                    </a>
                    <a class="no-href btn-icon"
                        tooltip="Delete"
                        placement="top"
                        container="body"
                        (click)="removeTag(tag)">
                        <i class="fa fa-trash-o"></i>
                    </a>
                </div>
            </td>
        </template>

        <template asy-template="empty-table">
            <h3>
                No Tags?<br/>
                <small>
                    Either there were no tags that matched your search or there are no tags in this team.<br/>
                </small>
            </h3>
        </template>
    </pageable-table>
</section>