Angular 2 Dart: Template syntax - how to concatenate strings?

Question

Feels like a dumb question but I do not get it. How can I do fast string concatenation in Angular 2 Dart templates?

I have a seperate html file for my component lets say my_component.html:

Works:

....
<div id="abc">
{{order.pickupPlace.email}}
</div>
...

Works:

....
<div id="abc">
{{ ((order.pickupPlace.state) ? order.pickupPlace.state+" ":'')}}
</div>
...

Does not work:

....
<div id="abc">
{{"<br/>"+order.pickupPlace.email}}
</div>
...

Does not work:

....
<div id="abc">
{{order.pickupPlace.name+" "+order.pickupPlace.email}}
</div>
...

Have tried to find an answer in the docs here (https://webdev.dartlang.org/angular/guide/template-syntax#!#expression-operators) but no luck.

Of course I could use *ngIf on every element which I output conditionally but is there a way for simple string concatenation?

Answer 1

The best way is to declare a getter inside your Component controller that does the concatenation for you, you will get dart syntax support and the html template will looks cleaner.

String get myConcatenation => "${order.pickupPlace.name}${order.pickupPlace.email}";


<div id="abc">
   {{myConcatenation}}
</div>