Angular2 multiple bindings error

Question

I have my original working code from angular1 as following:

<div align="center" ng-show="showWords" >
    <div ng-repeat="word in whichArray | limitTo:limitToMain" ng-if="$index % 2 == 0" class="row">
        <div class="col" align="right" style="margin-right:1cm;"><h3>{{whichArray[$index]}}</h3></div>
        <div class="col" align="left" style="margin-left:1cm;"><h3>{{whichArray[$index + 1]}}</h3></div>    
    </div>
</div>

When I try to convert it into angular2 code following:

<div align="center" *ngIf="showWords" >
    <div *ngFor="let word of whichArray | limitTo:limitToPresent" *ngIf="$index % 2 == 0" class="row">
        <div class="col" align="right" style="margin-right:1cm;"><h3>{{whichArray[$index]}}</h3></div>
        <div class="col" align="left" style="margin-left:1cm;"><h3>{{whichArray[$index + 1]}}</h3></div>    
    </div>
</div>

I get Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * error. I have created a pipe called limitTo.

How to fix this error?

Angular2 dont have $index its only index – Babar Hussain Mar 06 '17 at 21:11 — Babar Hussain, Mar 06 '17 at 21:11

Babar Hussain · Accepted Answer · 2017-05-09T10:38:29.090

The error is because of you are using ngFor and ngIf on same element in angular2 you can use either one of them on single element for this the angular2 provides <template> directive to iterate over elements below code will be working.

<div align="center" *ngIf="showWords" >
  <template ngFor [ngForOf]="whichArray | limitTo:limitToPresent" let-item let-i="index">
    <div *ngIf="i % 2 == 0" class="row">
        <div class="col" align="right" style="margin-right:1cm;"><h3>{{whichArray[i]}}</h3></div>
        <div class="col" align="left" style="margin-left:1cm;"><h3>{{whichArray[i + 1]}}</h3></div>
    </div>
  </template>
</div>

<template> is depreciated in angular 4 so you can use <ng-template>

<div align="center" *ngIf="showWords" >
  <ng-template ngFor [ngForOf]="whichArray | limitTo:limitToPresent" let-item let-i="index">
    <div *ngIf="i % 2 == 0" class="row">
        <div class="col" align="right" style="margin-right:1cm;"><h3>{{whichArray[i]}}</h3></div>
        <div class="col" align="left" style="margin-left:1cm;"><h3>{{whichArray[i + 1]}}</h3></div>
    </div>
  </ng-template>
</div>

Thanks for this answer, it worked! – Thinker Mar 06 '17 at 21:23 — Thinker, Mar 06 '17 at 21:23

Angular2 multiple bindings error

1 Answers1