Typescript, Angular:Add hyperlink to mail body using mailto

Question

I have checkboxes and a share button. On click of share button the selected checkbox link will be shared via mail. The mail body will have diet name and on click of the name the user will be redirected to its URL.

As of now I am able to store the seteled diet URL is an array and mail is also pooping up but I cannot see the hyperlink, the mail body looks like this.

 Click below

    <a href=www.sugar.com>sugar</a>

I want it to be like this:

Click below

bread

butter

sugar

where bread, butter, sugar will be hyperlinks. I am able to form a correct URL but it is not aapearing as a hyperlink in the mail body.Please guide me how to achieve this. Where did I go wrong?? Is there an angular way to achieve this?

Below ia my working code:

ts file

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

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      name = 'Angular 6';
      diets = [{
        'name': 'bread',
        'url': 'www.bread.com'
      },
      {
        'name': 'butter',
        'url': 'www.butter.com'
      },
      {
        'name': 'sugar',
        'url': 'www.sugar.com'
      }];
      downloadURL = [];
     mailText:string = "";


      mailMe(){
        var elements = (<HTMLInputElement[]><any>document.getElementsByClassName("selFile"));
        for (let i = 0; i < elements.length; i++) {
            if (elements[i].type == "checkbox") {
                if (elements[i].checked) {
                  this.downloadURL.push('<a href='
                  +elements[i].value+'>'+elements[i].name+'</a>');
                }
            }
        }
        console.log("this.downloadURL: ",this.downloadURL);
        this.mailText = "mailto:abc@abc.com+?subject=files&body=Click below"+this.downloadURL.join(" ,"); // add the links to body
        window.location.href = this.mailText;
    }



    }

HTML

<div *ngFor="let diet of diets">
<span>
    <input type='checkbox' class="selFile" value="{{diet.url}}" name='{{diet.name}}' />
</span>
<span>{{diet.name}}</span>

share

Add your code to the question. So that we can se what have you donse so far. — Anuradha Gunasekara, Jun 05 '18 at 06:10
Are you able to get the checked checkbox values inside the `mailMe()` function? If so can you add a console log out put of the `elements[i].value` and `elements[i].name` to the question? — Anuradha Gunasekara, Jun 05 '18 at 06:29
@AnuradhaGunasekara, yes already done. I am now able to form a correct URL but it is not aapearing as ahyperlink in mailbody — Anna, Jun 05 '18 at 06:33
Then something is wrong with the text that you are generating. Could you please add a console.log output of `this.downloadURL` to the question? — Anuradha Gunasekara, Jun 05 '18 at 06:47
added console.log in above question. The value that I got is ["sugar", "butter", "sugar"] and this is not appearing as a hyperlink on mail body — Anna, Jun 05 '18 at 06:52

bittu · Answer 1 · 2018-06-05T11:10:23.570

0

As already said above and over other forums, there is no direct way for this.

What exactly we need is MIME message to be created and for sending MIME message you need SMTP client.
So I think we have below options (server-side) :

Try with JS Lib to Send Email. Not tried but seems viable option.
Involve server scripting i.e. invoke some server side functionality to create and send mime Email message. For e.g. With java you follow this SendHTMLEmail to send email.

Note : A lot depends on viewing part i.e. email clients. Most of the clients supports html body email's.

edited Jun 05 '18 at 11:10

answered Jun 05 '18 at 10:56

bittu

786
7
14

"Try with JS Lib to Send Email. Not tried but seems viable option" — That isn't a browser-side library. You're just suggesting using server-side code twice. – Quentin Jun 05 '18 at 11:02
@Quentin Yes True. First one seems better option for original question. – bittu Jun 05 '18 at 11:08

Typescript, Angular:Add hyperlink to mail body using mailto

1 Answers1