angular 2 condition inside a href

Question

I have this line of code

<a href="{{banner.url}}"></a>

But sometimes url is null. How can I check it for null and then pass url to href?

I've tried this

<a href="{{banner.url === null ? javascript:void(0) : banner.url}}"></a>

But it throws an error

zone.js:388 Unhandled Promise rejection: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{banner.url === null ? javascript:void(0) : banner.url}}]

Answer 1

<a [href]="banner.url === null ? 'javascript:void(0)' | safeUrl : banner.url"

With safeUrl being a pipe like shown in https://stackoverflow.com/a/37076868/217408

otherwise javascript:void(0) probably won't be added for security reasons (not tried myself)

Answer 2

<a href="{{banner?.url || '#'}}"></a>

change # with your default URL

Answer 3

Use ternary operator in interpolation.

<a href="{{banner?.url === null ? 'javascript:void(0)': banner.url }}"></a>