Angular 10: How to add query parameters to the link

Question

I have a link like

<a class="contact-email" href="mailto:cybertruck@wrapmate.com">cybertruck@wrapmate.com</a>

I need to change href so that something like this comes out.

mailto:cybertruck@wrapmate.com?subject=Cybertruck%20Request&body=%matte%+%color%

How to add query parameters to such a link?

Does this answer your question? [Can I set subject/content of email using mailto:?](https://stackoverflow.com/questions/4782068/can-i-set-subject-content-of-email-using-mailto) — Roy, Jul 10 '20 at 10:42
partially, but can I put the selected color parameters into the body? — Анна Мороз, Jul 10 '20 at 10:58

Roy · Answer 1 · 2020-07-12T19:50:30.123

The most basic example to do this is append the selectedValue from the dropdown at the end of the href.

<p>
  <a [href]="'mailto:cybertruck@wrapmate.com?subject=Cybertruck%20Request&body=' + selectedValue">Send an email</a>
</p>

Here's the full HTML of the page with some dummy data coming from the component. The value gets updated in the ngModel, so it's usable everywhere on the page.

<select [(ngModel)]="selectedValue">
  <option *ngFor="let item of items" [ngValue]="item.name">{{item.name}}</option>
</select>

<p>You selected: {{ selectedValue }}</p>

<p *ngIf="selectedValue">
  <a [href]="'mailto:cybertruck@wrapmate.com?subject=Cybertruck%20Request&body=' + selectedValue">Send an email</a>
</p>

To see this in action, follow this StackBlitz.

Angular 10: How to add query parameters to the link

1 Answers1