CODEWITHSUNDEEP
angularangular-ui-bootstrapdropdown
Akhilesh Kumar
Akhilesh Kumar

Reputation: 9355

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

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

    • Upvotes: 32

    Views: 50745

    Answers (7)

    Remex
    Remex

    Reputation: 1

    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.

    Upvotes: 0

    yurzui
    yurzui

    Reputation: 214315

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

    Upvotes: 47

    DINESH Adhikari
    DINESH Adhikari

    Reputation: 1366

    If you want pass only $index value

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

    Upvotes: 1

    Arun Prasad E S
    Arun Prasad E S

    Reputation: 10145

    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>

    Upvotes: 0

    Abdus Salam Azad
    Abdus Salam Azad

    Reputation: 5512

    Use this

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

    Upvotes: 3

    Yogesh Aggarwal
    Yogesh Aggarwal

    Reputation: 1022

    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

    Upvotes: 13

    micronyks
    micronyks

    Reputation: 55443

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

    Upvotes: 2

    Related Questions