Angular Interpolation Syntax Reuse

Question

I have a template string that evaluates an Observable:

<button [title]="filterButtonText">
      {{ selectedUsers$ | async | delimiter:"|"}}
</button>

The delimiter pipe converts the string to "User1|User2" etc. I want to use the same value in the title property like :

<button [title]="{{ selectedUsers$ | async | delimiter:"|"}}">
      {{ selectedUsers$ | async | delimiter:"|"}}
</button>

But this doesn't seem to work. I want to reuse the output of {{ selectedUsers$ | async | delimiter:"|"}} in the title property. How can I do it? Or is there is a better of the way of achieving this without re-evaluating the observable?

EDIT

<button [title]="selectedUsers$ | async | delimiter:'|'">
  {{ selectedUsers$ | async | delimiter:"|"}}
</button>

Removing {{ }} worked. But another question, is there a way I can evaluate this in one place ? Without having the same statement in two places ?

Martin Parenteau · Accepted Answer · 2018-02-19 13:11:03Z

1

You can reuse the title of the button to set its content, with the help of a template reference variable:

<button #btn [title]="selectedUsers$ | async | delimiter:'|'">
  {{ btn.title }}
</button>

edited Feb 19, 2018 at 13:11

answered Feb 19, 2018 at 2:16

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user898788 Over a year ago

Thanks! Precisely what I was looking for.

Collectives™ on Stack Overflow

Angular Interpolation Syntax Reuse

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related