Insert javascript variable inside href attribute

Question

I'm trying to dynamically generate an HTML link and have that link be the href attribute of my anchor tag inside my AngularJS application. I have the code below:

const objectUrl = baseUrl + s3Bucket + '/' + objectKey;
const link = '<a href=`${objectUrl}`> MyLink</a>';

I thought that using JS's string templating would work but this inserts %60$%7BobjectUrl%7D%60 at the end of URL. I've also tried

const link = '<a href={{objectUrl}}> MyLink</a>';

but that gives me the same literal string %60$%7BobjectUrl%7D%60. Is there any way to insert the variable so that the href link becomes baseUrl + s3Bucket + '/' + objectKey?

How do you insert link in your template? Why don't you write the acncor tag in your template and use ng-href="{{objectUrl}}" on it? — mahan
– mahan, Commented Jun 20, 2019 at 6:33

suresh bambhaniya · Accepted Answer · 2019-06-20 06:33:08Z

2

try this

const link = '<a href="'+objectUrl+'" > MyLink</a>';

answered Jun 20, 2019 at 6:33

suresh bambhaniya

1,6871 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daan · Accepted Answer · 2019-06-20 06:46:30Z

1

You have the template string the other way around. The ` should go on the outside of your string.

const objectUrl = 'yourURL';
const link = `<a href="${objectUrl}">MyLink</a>`;

console.log(link);

edited Jun 20, 2019 at 6:46

answered Jun 20, 2019 at 6:36

Daan

2,8101 gold badge22 silver badges41 bronze badges

Comments

Akash Srivastav · Accepted Answer · 2019-06-20 06:34:04Z

0

Try

<a ng-attr-href="{{objectUrl}}">My Link</a>

answered Jun 20, 2019 at 6:34

Akash Srivastav

7665 silver badges17 bronze badges

Comments

yuval.bl · Accepted Answer · 2019-06-20 06:37:59Z

0

Use template literal like this:

const link = `<a href="${objectUrl}">MyLink</a>`

answered Jun 20, 2019 at 6:37

yuval.bl

5,0843 gold badges23 silver badges31 bronze badges

Collectives™ on Stack Overflow

Insert javascript variable inside href attribute

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related