routerLink from Object in Angular2

Question

I'm trying to build a "Team Member" page from JSON data.

I can create the page with basic things like firstName, lastName, position.

Each team member has their own page with a little more information

What I cant figure out is how to include the team members url to my [routerLink].

My router link would look like this which I have setup in my routes

<a [routerLink]="['./glenn']">

And this is how I'm attempting to use it

<div class="team-members" *ngFor="let teammember of teammembers" >
	<div class="clearfix">							
			<div class="col-xs-12 col-sm-8 col-md-8 col-lg-6 team-member member-item" style="cursor: pointer;">									
				<a [routerLink]="['./"{{teammember.firstName}}"']">
				<div class="member-pic-holder">
					<img alt="" src='{{teammember.photo}}' />
					<div class="member-overlay"></div>
				</div>
				<h4>{{teammember.firstName}}<br/>{{teammember.lastName}} <span class="fa fa-arrow-right"></span></h4>
				<p class="company-position">{{teammember.position}}</p>
				</a>
			</div>	
	</div>
</div>

Any thoughts on this one please?

It's also breaking when I'm trying to include the team-members photo

 <img alt="" src='{{teammember.photo}}' />

However one thing at a time!

Thanks

GWS

Answer 1

You are using the {{ foo.bar }} binding incorrectly, the {{ }} syntax allows you to do one way binding, what you want is to use regular js expressions when binding to your objects properties.

When binding to an html element attribute, you can use the [attr.{id|href|etc}] binding, in your case, for the href of the image you can use:

<img alt="" [attr.href] = 'teammember.photo' />

And for the router, simply use [routerLink] = "[teammember.firstName]" (not sure why you need the ./, if you do need it, you could append it using a getter on your team member class, as shown bellow.

For your routes, you could do something along the lines of:

Team Member Class

export class TeamMember {
    // ...properties and constructor
    private memberUrl: string = "foobar"

    get MemberRoute(){
        return `./${this.memberUrl}`;
    }
}

Template:

<div class="team-members" *ngFor="let teammember of teammembers" >
    <div class="clearfix">                          
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-6 team-member member-item" style="cursor: pointer;">                                 
            <a [routerLink]="[teammember.MemberRoute']">
            <div class="member-pic-holder">
                <img [attr.href] = 'teammember.photo' />
                <div class="member-overlay"></div>
            </div>
            <h4>{{teammember.firstName}}<br/>{{teammember.lastName}} <span class="fa fa-arrow-right"></span></h4>
            <p class="company-position">{{teammember.position}}</p>
            </a>
        </div>
    </div>
</div>

Hope this helps!