In my Angular 2 app I am using md-menu and md-icon-button to show a pop-up with an email address. I'd like the email address that pops up to actually trigger the user's default email setup when clicked on. Because I am pulling in data via string interpolation, I also need these emails to be generated with string interpolation. This is what I have now:

<md-menu #emailMenu="mdMenu">
<button md-menu-item>{{record.email}}</button>
</md-menu>

<button md-icon-button [mdMenuTriggerFor]="emailMenu">
<md-icon>mail_outline</md-icon>
</button>

Where you see {{record.email}}, that's where I need to structure this so that a default email behavior is triggered (basically like a mailto: function). How do I do this in Angular 2?

Would I do something like this?

<button md-menu-item><a href="mailto:{{record.email}}"></a></button>

Or is there a better way to do it?

In my Angular 2 app I am using md-menu and md-icon-button to show a pop-up with an email address. I'd like the email address that pops up to actually trigger the user's default email setup when clicked on. Because I am pulling in data via string interpolation, I also need these emails to be generated with string interpolation. This is what I have now:

<md-menu #emailMenu="mdMenu">
<button md-menu-item>{{record.email}}</button>
</md-menu>

<button md-icon-button [mdMenuTriggerFor]="emailMenu">
<md-icon>mail_outline</md-icon>
</button>

Where you see {{record.email}}, that's where I need to structure this so that a default email behavior is triggered (basically like a mailto: function). How do I do this in Angular 2?

Would I do something like this?

<button md-menu-item><a href="mailto:{{record.email}}"></a></button>

Or is there a better way to do it?

• javascript
• angular
• angular2-routing

1 Answer 1

You can bind to the href property:

<a [href]="'mailto:' + record.email"></a>