Download file through Angular 2

Question

Is there a way to download (an already loaded) image using TypeScrpit

<div *ngIf="DisplayAttachmentImage" class="fixed-window-wrapper_dark">
        <button class="btn btn-close-window" (wslClick)="HideAttachmentImage()">
            <i class="evicon-cross"></i>
        </button>
        <div>
            <img id="testImg" src='{{ImageSource}}' alt="">
        </div>
    </div>

ImageSource property is defined in my component and I'm trying to write a function that can download the image since we already know it's source.

Now I know the user can right click on the image and save it but I'm trying to figure out how to download a file using Angular 2

For example, let's say I have this method

   public GetAttachment(event: any, id: number) {
        this.service.GetVisaAttachment(this.IndividualId, id).subscribe((res: any) => {
          // download code should be here... I think
        });
    }

How can I download a file (res) from the backend. And how can I download an image from the web page (as mentioned above)

Answer 1

Since you say 'from the backend', it depends on the backend - basically the response should contain a header like 'Content-Disposition: attachment' (and the filename, see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition)

Depending on the backend, you could have a query parameter (or route or whatever) affect whether the header is sent or not. Then all you need to do is navigate to the image URL and the browser will download it.