Multiple template bindings on angular2 element

Question

I have the following code in an angular2 template. It generates a list of chapters and sets the clicked property on the one that is the current chapter.

<div class="chapters col s3">
    <a *ngFor="let chapter of chapters; let i=index" (click)="clickedItem = i" [class.clicked]="i == clickedItem" class="chapter"
        [routerLink]="['/tutorial/chapter', chapter.number]">{{chapter.number}}. {{chapter.title}} </a>
</div>

The issue is that this is only populated when the page is initially loaded, if the chapter changes, the router doesn't refresh this component, so the "clicked" chapter doesn't change.

I thought maybe I could use *ngIf and bind it to the chapter property of my component, which is subscribed to the route params, hence this updates itself. Then, select either a version with the clicked class or not. However, this implementation throws the error:

<div class="chapters col s3">
    <a *ngFor="let chapter of chapters; let i=index" *ngIf="i==chapter" (click)="clickedItem = i" class="chapter clicked" [routerLink]="['/tutorial/chapter', chapter.number]">{{chapter.number}}. {{chapter.title}} </a>
    <a *ngFor="let chapter of chapters; let i=index" *ngIf="i==chapter" (click)="clickedItem != i" class="chapter" [routerLink]="['/tutorial/chapter', chapter.number]">{{chapter.number}}. {{chapter.title}} </a>
</div>

Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with *

I can't see how wrapping this in a div with the ngIf property would work, as I need the i from the ngFor?

Any ideas how I could make this work?

See http://stackoverflow.com/questions/35100716/angular-2-two-structural-directives-on-the-same-dom-element — Günter Zöchbauer, Sep 09 '16 at 13:00
I don't understand what "so the "clicked" chapter doesn't change" means though. — Günter Zöchbauer, Sep 09 '16 at 13:01
@GünterZöchbauer So if I load chapter 0, and the "0. Chapter Title" link is clicked, then I navigate to chapter 1, the "0. Chapter Title" is still got the clicked class, rather than "1. Chapter Title" — George Edwards, Sep 09 '16 at 13:05
Do you reset the `clickedItem` on `route.params.subscribe(...)`? — Günter Zöchbauer, Sep 09 '16 at 13:07

Multiple template bindings on angular2 element

0 Answers0