Cacher is the code snippet organizer for pro developers

<div class="title-container order-{{ order }}">{{ category }}</div>
<p-dataView #dv [value]="les" [paginator]="true" [rows]="20" paginatorPosition="bottom" filterBy="title"
[sortField]="sortField" [sortOrder]="sortOrder" stateStorage="session" stateKey="le-session">
    <p-header>
        <div class="ui-helper-clearfix">
            <div class="ui-g">
                <div class="ui-g-12 ui-md-4">
                    <p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By" (onChange)="onSortChange($event)" [style]="{'min-width':'140px'}"></p-dropdown>
                </div>
                <div class="ui-g-6 ui-md-4 filter-container">
                    <div style="position:relative">
                        <input type="search" pInputText placeholder="Search..." (keyup)="dv.filter($event.target.value)">
                    </div>
                </div>
                <div class="ui-g-6 ui-md-4" style="text-align:right">
                    <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
                </div>
            </div>
        </div>
    </p-header>
    <ng-template let-le pTemplate="listItem">
        <div class="ui-g-12 ui-md-12">
            <h3>
                <app-bookmark *ngIf="currentRole === 'Learner' || currentRole === 'Parent' || currentRole === 'Educator'" [id]="le._id"></app-bookmark>
                <app-active *ngIf="currentRole === 'Admin' || currentRole === 'Builder'" [id]="le._id"></app-active>
                <i *ngIf="currentRole === 'Admin' || currentRole === 'Builder'" class="fa" [ngClass]="{ 'fa-trash': hovered === true, 'fa-trash-o': hovered === false }" (mouseenter)="hovered = true" (mouseleave)="hovered = false" (click)="onDelete(le)"></i>
            </h3>
            <div class="wrapper" (click)="onClick(le)">
                <div class="photo-wrapper">
                    <img class="card-img-top" *ngIf="le.photo" src="{{ le.photo[0].url }}" />
                    <img class="card-img-top" *ngIf="!le.photo" src="../../../assets/logo-default.png" />
                </div>
                <div class="title-wrapper">{{ le.title | uppercase }} <i *ngIf="le.report" class="report fa fa-exclamation-triangle"></i>
                    <div class="updated-wrapper"><i>last updated {{ le.modified | date: 'MM-dd-yyyy HH:mm:ss' }}</i></div>
                </div>
                <div class="date-wrapper"><i>{{ le.created | date: 'MM-dd-yyyy HH:mm:ss' }}</i></div>
                <div class="desc-wrapper">
                    {{ le.description }}
                </div>
            </div>
        </div>
    </ng-template>
    <ng-template let-le pTemplate="gridItem">
        <div class="ui-g-12 ui-md-3">
            <div class="wrapper" (click)="onClick(le)">
                <div class="photo-wrapper">
                    <img *ngIf="le.photo" src="{{ le.photo[0].url }}" />
                    <img *ngIf="!le.photo" src="../../../assets/logo-default.png" />
                </div>
                <div class="title-wrapper"><h1>{{ le.title | uppercase }} <i *ngIf="le.report" class="report fa fa-exclamation-triangle"></i></h1></div>
                <div class="date-wrapper"><i>{{ le.created | date: 'MM-dd-yyyy HH:mm:ss' }}</i></div>
            </div>
        </div>
    </ng-template>
</p-dataView>
<div *ngIf="auth.authenticated && (currentRole === 'Builder' || currentRole === 'Admin')" class="new-button" routerLink="new">
    <i class="fa fa-plus"></i>
</div>