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:

Answer 1

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

Answer 2

Use this

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

Answer 3

If you want pass only $index value

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

Answer 4

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

Answer 5

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

Answer 6

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>