Parser Error: Got interpolation ({{}}) where expression was expected
angular, angular-ui-bootstrap, dropdown
Solution
You can't use interpolation inside standard property binding. There should be an expression.
Seems it should be:
[attr.aria-labelledby]="'desiredSkill' + $index"
or
attr.aria-labelledby="desiredSkill{{$index}}"
Problem
I'm using ng-bootstrap as a substitute for ui-bootstrap in angular2. My html is as follows: ``` <ul class="list-inline"> <li class="tag" ngb-dropdown auto-close="outsideClick" *ngFor="let item of ['Elastic Search','Database Theory','CVS']; let $index=index;" [ngClass]="{'default-tag': $index==0, 'matched-tag': $index==1, 'unmatched-tag': $index==2 }"> <a href ngb-dropdown-toggle id="desiredSkill{{$index}}"> <i class="bi_interface-tick following"></i> {{item}} <i class="bi_interface-more tag-menu-icon"></i> </a> <ul class="dropdown-menu tag-menu" ngb-dropdown-menu [aria-labelledby]="desiredSkill{{$index}}"> <li><a href>Follow Skill</a></li> <li><a href>Related Jobs</a></li> </ul> </li> </ul> ``` But when I run my app I get following error: main.browser.ts:25Error: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 12 in [desiredSkill{{$index}}] in JobDescription@174:77 (" ][aria-labelledby]="desiredSkill{{$index}}"> - "): JobDescription@174:77 Parser Error: Unexpected token '{' at column 13 in [desiredSkill{{$index}}] in JobDescription@174:77 (" ][aria-labelledby]="desiredSkill{{$index}}"> - "): JobDescription@174:77 Can't bind to 'aria-labelledby' since it isn't a known property of 'ul'. (" ][aria-labelledby]="desiredSkill{{$index}}"> - "): JobDescription@174:77 Parser Error: Got interpolation ({{}}) where expression was expected at column 12 in [desiredSkill{{$index}}] in JobDescription@174:77 (" ``` <div class="row"> <div class="col-lg-4 col-xs-4" [ERROR ->]*ngFor="let i of [0,1,3]"> <img src="http://ecx.images-amazon.com/images/I/81VFU9"): ``` JobDescription@215:49 Parser Error: Unexpected token '{' at column 13 in [desiredSkill{{$index}}] in JobDescription@174:77 (" ``` <div class="row"> <div class="col-lg-4 col-xs-4" [ERROR ->]*ngFor="let i of [0,1,3]"> <img src="http://ecx.images-amazon.com/images/I/81VFU9"): ``` JobDescription@215:49 Parser Error: Got interpolation ({{}}) where expression was expected at column 12 in [desiredSkill{{$index}}] in JobDescription@174:77 (" ERROR ->="main.applyJob()">Apply for job ERROR ->="main.applyJob()">Apply for job ][hidden]="!ifNotApplied">Applied ][hidden]="!ifNotApplied">Applied ][hidden]="!ifNotUploaded">Upload CV ][hidden]="!ifNotUploaded">Upload CV Have questions about this job? [ERROR ->] Have questions about this job? [ERROR ->]