Typescript/Javascript: mailto with subject, body and array of links

Question

I work on Angular 4. On click of hyperlink I have to open outlook, in the mail I will have to send 4 links. So I have planned to call a mailto from my typescript file. My code is

    <span (click)="mailMe()">Mail me the links</span>


    var links= ["link1.com", "link2.com", "link3.com"];
    mailMe(){
        console.log("111111");
        var mail = document.createElement("a");
        console.log("22222");
        mail.href = "mailto:[email protected]?subject=files&body=Hi";
        mail.click();
    }

I am able to call the function but mail is not popping up. In console 111111 is getting printed but 22222 is not getting printed. Where did I go wrong? OR is there a way I can send the array of links from HTML itself?

Answer 1

you want to achieve like this

<a href="mailto:[email protected]?Subject=Hello&body=links:  %0D 
         http://link1.com  %0D http://link1.com " target="_top">Send Mail</a>

in angular you can do it like this , in html

<a [href]="emailstring" target="_top"></a>

in ts file do like this

 emailstring= "mailto:[email protected]?Subject=Hello&body=links:  %0D 
             http://link1.com  %0D http://link1.com";

Haven't tested with angular but check it with pure html. and its working on chrome.

Answer 2

You can achieve this in IE with a simple window.location.href as IE has some weird behavior with mailto .Here I am using the same <span> from your code with the links array.

Example code for IE :

import { Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
     <span (click)="mailMe()">Mail me the links on (click)</span>
  `
})
export class AppComponent {
  name = 'test';
  links : any[]= ["link1.com", "link2.com", "link3.com"];

  mailText:string = "";

  mailMe(){
    this.mailText = "mailto:[email protected]+?subject=files&body="+this.links.join(" ,"); // add the links to body
    window.location.href = this.mailText;
  }

}

The below example might not work in IE but it's tested in Chrome. Here i have used anchor tag and set the href attribute in typescript.

Example for Chrome and others

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
     <a [href]="mailText">Mail me the links</a> <br>
  `
})
export class AppComponent implements OnInit {
  name = 'test';
  links : any[]= ["link1.com", "link2.com", "link3.com"];

  mailText:string = "";


  ngOnInit(){
    this.mailText = "mailto:[email protected]+?subject=files&body="+this.links.join(" ,");
  }

}

Here is a working demo : https://stackblitz.com/edit/attribute-binding-1-7wncwf