title: Angular 5 How to download a remote image
body: <p>In Angular 5, I want to download an image from localhost (server). I already have the image name with the path as: <a href="http://localhost/projectName/uploads/3/1535352341_download.png" rel="nofollow noreferrer">http://localhost/projectName/uploads/3/1535352341_download.png</a> 
  Now I want to download by clicking on a button.</p>
  
  <p>In the HTML view in Angular, I wrote the following code:</p>
  
  <pre><code>&lt;button (click)="downloadImage(car.carItem.carTitle)" type="button" class="btn btn-sm btn-info btn-action" tooltip="Download Image" placement="left" container="body"&gt;&lt;i class="fa fa-download" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
  </code></pre>
  
  <p>In the .ts file, I do the following but it opens the image in the same tab:</p>
  
  <pre><code>downloadImage(imagePath){
    window.location = imagePath;
  }
  </code></pre>
  
  <p>I have already gone through the post <a href="https://stackoverflow.com/questions/47431331/angular-4-direct-download-images?noredirect=1&amp;lq=1">Angular 4 direct download images</a> but unable to find any solution. So please don't mark it as duplicate.</p>