string concatenation with property binding in angular2

gabric picture gabric · Apr 7, 2016 · Viewed 28.7k times · Source

in Angular 2 we have several way to create property bindings in templates. I could do something like this:

<li *ngFor="#course of courses; #i = index" id="someselector-{{i}}">{{course}}</li>

Is it possible to obtain the same result using the square brakets syntax?

<li *ngFor="#course of courses; #i = index" [id]="someselector-i">{{course}}</li>
                                            ^^^^^^^
                                  how create string concatenation?

Thanks, G.

Answer

gabric picture gabric · Apr 8, 2016

I found out that you can use this kind of syntax using square brackets:

<li *ngFor="#course of courses; #i = index" [id]="'someselector-'+i">{{course}}</li>

For more information, please have a look to this interesting article from Pascal Precht: http://blog.thoughtram.io/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html