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>

Answer 2

The last two examples can be made to work easily:

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

And:

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

Angular handles this pretty well. If you need some more complicated logic you can move it to the Dart code (but you cannot use HTML there easily).

If you find creating lot of weird logic consider creating more smaller components that can handle this for you.