Slippy
Slippy

Reputation: 143

Ternary operator and template literals in Angular2+ together causing issues?

I have a simple Angular template that is currently using string concatenation within interpolation as follows:

<h4>{{ myVar.property ? myVar.property + ' IS NOT NULL' : '' }}</h4>

What I would like to do is replace the concatenation with template literals like so:

<h4>{{ myVar.property ? `${myVar.property} IS NOT NULL` : '' }}</h4>

When trying this, I get an unexpected Lexer error. Is there some way that I can implement this ternary expression and use template strings as opposed to string concatenation?

Upvotes: 1

Views: 413

Answers (1)

Garuno
Garuno

Reputation: 2200

This feature is not available in angular and was also rejected as a feature:

This has been rejected because it would not work with inline templates

Is one of the reasons. The other bigger one is that angular needs to observe myVar.property for changes to update the HTML accordingly. This is not possible if you just have the interpolated string there.

If you want to use template literals you need to call a function, that internally uses template literals, but IMO that would be more hassle than it would be worth.

Upvotes: 2

Related Questions