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.

Solution

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

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

Comments

[Karthigeyan Vellasamy]

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

[mstfdz]

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]

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

[Karthigeyan Vellasamy]

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