How to work with variables from a loop in HTML and with a component property?

Question

The data I work with (bosses[]) has a boss object with contains the key-value email which is an string. I want to create the anchor with that string in the HTML. Also note that there's a loop in HTML that allows to access to each boss in bosses[].

So how can I access to create an anchor with boss.email which it only exists in the HTML loop?

I've tried <a [href]=`"mailto: + boss.email"></a> but doesn't work.

the html:

<div  class="boss" *ngFor="let boss of bosses" >
    <div class="boss-text">
        <div class="boss-text-name">{{boss.name}} </div>
        <div>{{boss.email}}</div>
        <a [href]="mailto: + boss.email"></a>
    </div>
</div>

The component:

import { Component, Input, OnInit } from '@angular/core';
import { boss} from 'interfaces'
        
@Component({
  templateUrl: 'boss-cell.component.html',
  selector: 'boss-cell',
})
export class BossCellComponent implements  OnInit {
  constructor() {}
    
  bosses: any[] =  [{
    email:       '[email protected]',
    name:        'kennedy',
  }]
}

You can use string interpolation. like this <a [href]="mailto:" + boss.email></a> — Suraj Mathe
– Suraj Mathe, Commented Jun 21, 2022 at 17:30
String interpolation example - <a [href]=`mailto: ${boss.email}`></a>' — Suraj Mathe
– Suraj Mathe, Commented Jun 21, 2022 at 17:36

H3AR7B3A7 · Accepted Answer · 2022-06-24 00:15:54Z

3

You're close! I think this is what you're looking for:

<div class="boss" *ngFor="let boss of bosses" >
    <div class="boss-text">
        <div class="boss-text-name">{{boss.name}} </div>
        <a [href]="'mailto:' + boss.email">{{ boss.email }}</a>
    </div>
</div>

edited Jun 24, 2022 at 0:15

H3AR7B3A7

5,3593 gold badges22 silver badges42 bronze badges

answered Jun 21, 2022 at 17:34

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

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

Comments

H3AR7B3A7 · Accepted Answer · 2022-06-21 17:44:19Z

1

You can use interpolation as Suraj already mentionned in the comments, or bind to a function creating the string. Depending on weather you are going to link other elements to the mail, you should pick the cleanest option for you.

Template

<div class="boss" *ngFor="let boss of bosses; let i = index">
  <div class="boss-text">
    <div class="boss-text-name">{{ boss.name }}</div>
    <a [href]="getMail(i)">{{ boss.email }}</a>
  </div>
</div>

Script

bosses: any[] =  [{
  email:       '[email protected]',
  name:        'kennedy',
}]

getMail(index: number) {
  return 'mailto:' +  this.bosses[index].email
}

edited Jun 21, 2022 at 17:44

answered Jun 21, 2022 at 17:32

H3AR7B3A7

5,3593 gold badges22 silver badges42 bronze badges

Comments

Akshay Mondal · Accepted Answer · 2022-06-22 09:38:14Z

1

You need to update this line

<a [href]="'mailto:' + boss.email">{{ boss.email }}</a>

answered Jun 22, 2022 at 9:38

Akshay Mondal

704 bronze badges

Collectives™ on Stack Overflow

How to work with variables from a loop in HTML and with a component property?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related