unicorn-components/src/components/ui/gallery/full-image/full-image.component.ts

<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>

import { Component, HostBinding } from '@angular/core';
import { EventEmitter, Input, Output } from '@angular/core';

import { UniGalleryImage } from '../../../../models/image';

@Component({
    selector: 'uni-gallery-full-image',
    templateUrl: 'full-image.component.html'
})
export class UniGalleryFullImageComponent {
    @HostBinding(`class.uni-gallery-full-image`) subClassName = true;

    @Input() images: UniGalleryImage[] = [];
    get image(): UniGalleryImage {
        return this.images && this.index >= 0 ? this.images[this.index] : null;
    }
    @Input() index: number;
    @Output() indexChange = new EventEmitter<number>();

    @Output() close = new EventEmitter<number>();
    @Output() delete = new EventEmitter<number>();

    infoShown = false;
    deleting = false;

    init(images: UniGalleryImage[], currentIndex: number) {
        this.images = images;
        this.index = currentIndex;
    }
    download(image: UniGalleryImage) {
        if (!image.src) { return; }
        const save = document.createElement('a');
        save.href = image.src;
        save.target = '_blank';
        save.download = image.name;
        save.click();
    }
    onDelete() {
        this.delete.emit(this.index);
    }

}