Angular2 Pass attribute value dynamically from html template as @input

Question

How to pass dynamic value instead of string in [email] attribute ??

I am stuck with Parse syntax error. Whether i can pass value to @input decorator dynamically by ngFor and pass as input in [email] attribute dynamically using angular expression i.e {{member.email}} if so please help me with this syntax on html.

Note: Static input like [email]="'[email protected]'" fetches me data fine

EXCEPTION: Template parse errors:
Parser Error: Missing expected : at column 8 in [{{member.email}}] in AppComponent@56:49 ("class="avatar" *ngFor="let member of teamMembers">
   <li><a href=""><gravatar-image [size]="80" [ERROR ->][email]="{{member.email}}"></gravatar-image></a></li>
            </ul>
            </div>
"): AppComponent@56:49

HTML Template Code :

<div class="row">
    <div class="col-md-12">
        <h4>Team Members</h4>
        <ul class="avatar" *ngFor="let member of teamMembers">
        <li><a href=""><gravatar-image [size]="80" 
          [email]={{member.email}}></gravatar-image></a></li> //Here i get error 
                               I am not able to assign input value dynamically by 
                               getting "member.email" value through expression. 

        </ul>
        </div>
        </div>

Directive component input:

@Component({
selector: 'gravatar-image',
template: '<img [src]="getGravatarImage()">',
styles: ['img{width: 40px;height: 40px;margin: 10px;overflow: hidden;float: left;display: inline-block;border-radius: 100%;}']
})
export class GravatarImageComponent {
@Input() size:number = 80;
@Input() email:string = "";

getGravatarImage():string {
    return 'http://www.gravatar.com/avatar/' + md5(this.email) + '?s=' + this.size;
}
}

App Component :

import { Component, OnInit, Input } from 'angular2/core';
import { Observable }     from 'rxjs/Rx';
import { Location, LocationStrategy } from 'angular2/platform/common';
import { GravatarImageComponent } from './gravatar-image.component';
import { UserService } from './user.service';
import { User } from './user';

@Component({
  selector: 'editor',
  templateUrl:'../template/XXX.html',
  providers: [UserService],
  directives: [GravatarImageComponent]
})
export class AppComponent implements OnInit {
  teamMembers: User[];
  .....etc

Any help would be great.

mstfdz · Accepted Answer · 2016-05-26 12:26:47Z

4

you don't need to use double curly brackets, just use quotes.

<gravatar-image size="80" [email]="member.email"></gravatar-image>

edited May 26, 2016 at 12:26

answered May 26, 2016 at 10:51

mstfdz

2,8563 gold badges25 silver badges29 bronze badges

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

4 Comments

Karthigeyan Vellasamy Over a year ago

Still getting error on inspecting html i get <gravatar-image _nghost-inh-2=""> <img _ngcontent-inh-2=""> </gravatar-image>

mstfdz Over a year ago

try : <gravatar-image size="80" [email]="member.email"></gravatar-image> there is no need to using brackets for passing down the size that is because size is not a property beside you need to use for email.

Karthigeyan Vellasamy Over a year ago

I tried this way not working ... and tried "member.email","'member.email'",[{member.email}], {{member.email}}, {member.email},'member.email'

Karthigeyan Vellasamy Over a year ago

@msfdz Works fine with "member.email" thanks.. Cookies is to my problem after clearing it works smooth

Günter Zöchbauer · Accepted Answer · 2016-05-27 08:42:22Z

1

This worked for me finally

 <gravatar-image [size]="80" [email]=member.email>

Without {{}}.

edited May 27, 2016 at 8:42

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

answered May 27, 2016 at 6:59

Karthigeyan Vellasamy

2,0667 gold badges33 silver badges51 bronze badges

Collectives™ on Stack Overflow

Angular2 Pass attribute value dynamically from html template as @input

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related