Parser Error: Got interpolation ({{}}) where expression was expected

Question

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 ->]

Bal Krishna Jha · Accepted Answer · 2020-08-27 06:03:07Z

47

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}}"

edited Aug 27, 2020 at 6:03

Bal Krishna Jha

7,5993 gold badges45 silver badges48 bronze badges

answered Oct 23, 2016 at 13:34

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stephen Rauch · Accepted Answer · 2018-10-04 03:54:37Z

13

Usually this error occurs when we are trying to implement both Interpolation and Property data binding on the same html property.

Example:

Wrong implementation

[disabled]= {{isDisabled}}

Correct implementation

disabled= {{isDisabled}}

Note: remove the square bracket from the html element property

edited Oct 4, 2018 at 3:54

Stephen Rauch♦

50.1k32 gold badges118 silver badges143 bronze badges

answered Oct 4, 2018 at 3:31

Yogesh Aggarwal

1,0228 silver badges10 bronze badges

1 Comment

user1007074 Over a year ago

This didn't work for me, it resulted in error TS2322: Type 'string' is not assignable to type 'boolean', even though the property isDisabled was defined as a boolean. I was able to solve both that and the OP's error with: [disabled]="isDisabled"

Abdus Salam Azad · Accepted Answer · 2019-01-22 07:27:52Z

3

Use this

  <button class="btn btn-primary" title="Edit" (click)="showEditModal(record.id)"><i class="fa fa-edit"></i></button>

answered Jan 22, 2019 at 7:27

Abdus Salam Azad

5,59252 silver badges37 bronze badges

Comments

micronyks · Accepted Answer · 2016-10-23 13:35:52Z

2

I think you forgot to declare index of ngFor

*ngFor="let item of ['Elastic Search','Database Theory','CVS'];let $index=index" ...

also use,

[attr.aria-labelledby]="desiredSkill{{$index}}"

edited Oct 23, 2016 at 13:35

answered Oct 23, 2016 at 13:17

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

3 Comments

micronyks Over a year ago

can you try with [attr.aria-labelledby]="desiredSkill{{$index}}"?

Akhilesh Kumar Over a year ago

That is not a solution if I'll add it to attr then ngb-bootstrap will ignore its value and it will be just added the attribute to the element

micronyks Over a year ago

Oh I see. try other answer provided by yurzui.

MartenCatcher · Accepted Answer · 2019-06-19 14:08:00Z

1

If you want pass only $index value

[attr.aria-labelledby]=" ' ' + $index"

edited Jun 19, 2019 at 14:08

MartenCatcher

2,8958 gold badges29 silver badges41 bronze badges

answered Jun 19, 2019 at 12:33

DINESH Adhikari

1,3661 gold badge13 silver badges11 bronze badges

Comments

Arun Prasad E S · Accepted Answer · 2019-06-14 07:47:24Z

0

In link tags use like this

Use this

<a  class="custom-badge status-blue" [routerLink]="'/hospital/doctorleave/'+item.Id]">Manage Leave</a>

Instead of

<a  class="custom-badge status-blue" [routerLink]="'/hospital/doctorleave/{{item.Id}}']">Manage Leave</a>

answered Jun 14, 2019 at 7:47

Arun Prasad E S

10.2k8 gold badges81 silver badges94 bronze badges

Comments

Lin Du · Accepted Answer · 2023-05-08 03:26:09Z

0

For me changing this

<img [src]="{{picture.name}}" [alt]="picture. caption"/>

To this:

<img src="{{picture.name}}" alt="picture.caption"/>

Solved the problem. The problem was this -> [] around the properties i.e src and alt in the html/template file.

edited May 8, 2023 at 3:26

Lin Du

104k138 gold badges340 silver badges575 bronze badges

answered May 6, 2023 at 18:40

Remex

13 bronze badges

Collectives™ on Stack Overflow

Parser Error: Got interpolation ({{}}) where expression was expected

7 Answers 7

Comments

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related