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:abc@abc.com?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?
6 answers
solution1
13 2018-06-01 07:20:18
you want to achieve like this
<a href="mailto:xyz@example.com?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:xyz@example.com?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.
solution2
8 2018-06-01 07:35:53
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:abc@abc.com+?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:abc@abc.com+?subject=files&body="+this.links.join(" ,");
}
}
Here is a working demo : https://stackblitz.com/edit/attribute-binding-1-7wncwf
solution3
0 2018-06-01 07:26:56
Here is the simple HTML JavaScript code. This will help you to write your own.
<!DOCTYPE html>
<html>
<head>
<script>
function mailMe (mail) // <--- element on which you need to apply click
{
mail = document.createElement("a");
mail.href = "mailto:abc@abc.com?subject=files&body=Hi";
mail.click();
}
</script>
</head>
<body>
<span onClick = "mailMe(this);" > <!-- pass it from here -->
Mail me the links
</span >
</body>
</html>
solution4
0 2020-08-27 12:31:37
You can use a function from the template to achieve more complexe variable building
<a [href]="mailto('example@mail.com', 'newSubject')">
Then in your TS file just return the proper anchor href string
mailto(emailAddress: string, emailSubject: any) {
return "mailto:" + emailAddress + "?subject=" + emailSubject
}
solution5
-1 2021-05-23 07:50:20
To create a Mailto link, you need to use the HTML tag with its href attribute, and insert a "mailto:" parameter after it, like the following:
<a href="mailto:username@gmail.com">
or
<a href="https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=username@gmail.com" target="_blank">username@gmail.com</a>
solution6
-1 2022-02-21 10:27:22
<a href="mailto:{{email}}">Contact via E-mail</a>
this works in HTML file of an angular app
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.