unicorn-components/src/components/ui/gallery/gallery.component.html

<a target="_blank" href="https://getunicorn.io"><img src="https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2017/Jul/07/2615006260-5-nitsnetsstudios-ondemand-UNI_avatar.png" align="left"></a>

<div class="uni-gallery__header" *ngIf="imagesSelected && imagesSelected.length && !deletingSelection">
    <uni-checkbox [partial]="imagesSelected.length > 0" [model]="areAllSelected()" (modelChange)="onSelectAll($event)"></uni-checkbox>
    <strong>{{imagesSelected.length}} items </strong> selected
    <uni-button icon="close" (click)="onCleanSelected()"></uni-button>
    <uni-row-spacer></uni-row-spacer>
    <uni-button icon="delete" (click)="deletingSelection = true"></uni-button>
</div>
<div class="uni-gallery__header uni-gallery__header--deleting" *ngIf="imagesSelected && imagesSelected.length && deletingSelection">
    <strong>
        <uni-icon icon="delete"></uni-icon>
    </strong> Do you want to delete
    <strong> {{' ' + imagesSelected.length}} items </strong>?
    <uni-row-spacer></uni-row-spacer>
    <uni-button label="Delete" (click)="onDeleteSelection()"></uni-button>
    <uni-button label="Cancel" (click)="onCleanSelected()"></uni-button>
</div>
<div class="uni-gallery__container" *ngIf="images && images.length">
    <uni-gallery-image class="uni-gallery__item" *ngFor="let image of images, let i = index" [selected]="isSelected(i)" (selectedChange)="onSelect($event, i)"
        [deletingSelection]="deletingSelection" (delete)="onDelete(i, image)" [height]="200" [aspectRatio]="image.aspectRatio"
        [imagePath]="image.src" [thumbPath]="image.thumbSrc" [label]="image.name" (clickImage)="openFullImage(i)">
    </uni-gallery-image>
</div>