title: How to download Image from a url when a button is pressed in angular 4
body: <p>Hi all I get an image that comes from the server side and shows it in the website I want to download it when download button is pressed How do I achieve this? </p>
  
  <p>I have the html as follows</p>
  
  <pre><code> &lt;div class="row SectionRow" style="margin: 50px 0px !important;"&gt;
                &lt;div class="col-md-6 col-sm-6 col-xs-6" style="text-align: center; margin-bottom: 20px"&gt;
                  &lt;img #imgRef2 class="ProfileImage"&gt;
                  &lt;br&gt;
                  &lt;button type="button" (click)="DownloadProfilePic()" class="btn btn-default SigButton"&gt;Download&lt;/button&gt;
                &lt;/div&gt;
  
                &lt;div class="col-md-6 col-sm-6 col-xs-6" style="text-align: center; margin-bottom: 20px; padding-top: 50px;"&gt;
                  &lt;img #imgRef class="SignatureImage"&gt;
                  &lt;br&gt;
                  &lt;button type="button" class="btn btn-default SigButton"&gt;Download&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>angular typescript</p>
  
  <pre><code>@ViewChild('imgRef') Signature: ElementRef;
    @ViewChild('imgRef2') ProfilePic: ElementRef;
  
  OnInit()
  {
            this.Signature.nativeElement.src = this.ImageAppDetails.AA_SIGNATURE;
            this.ProfilePic.nativeElement.src = this.ImageAppDetails.AA_PHOTO;
  }
  </code></pre>
  
  <p>The url will be for profile pic as '<a href="http://192.0.0.100/image.jpg" rel="nofollow noreferrer">http://192.0.0.100/image.jpg</a>'</p>
  
  <p>how do I acheive this when I click the download button. Help would be appreciated. </p>