CODEWITHSUNDEEP
dartangular-dartangular2-dartdart-angular-templates
Blackbam
Blackbam

Reputation: 19366

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

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?

Upvotes: 4

Views: 28439

Answers (2)

rkj
rkj

Reputation: 9311

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.

Upvotes: 4

Hadrien Lejard
Hadrien Lejard

Reputation: 5894

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>

Upvotes: 5

Related Questions