Binding: Appending to href

Use either:

<a href="https://www.domainname.com/?q={{text.id}}">URL</a>

or (from the official docs):

<a [href]="'https://www.domainname.com/?q=' + text.id">URL</a>

---

Regarding the question, it's important to notice: The error message is misleading.

When you use {{ expression }}, angular will evaluate the expression and place its value right where the {{}} is. So you don't need to + the result of {{}} to the string as you do. In other words:

<a href="something="+{{ expression }}> WRONG </a>

<a href="something={{ expression }}"> RIGHT </a>
<a [href]="'something=' + expression"> RIGHT </a>

Alternatively, you can use the following syntax:

[attr.href]="'https://www.domainname.com/?q=' + text.id"

---

This might be the preferred way when you want to bind to a variable like

url: string = 'https://www.domainname.com';

which would then be bound by

[attr.href]="url"

It's work for me (angular 8-7-6-5):

1. < a href="{{'mailto:' + data.emailId }}"> Send Mail < /a>
2. < a href="{{'tel:' + data.phoneNumber }}"> +911234567890 < /a>
3. < a href="{{'/' + data.redirectURL }}"> Open Google < /a>