how can i use string interpolation based on condition in angular

Question

I'm trying to display one of two options with string interpolation in my html file based on the condition in my typescript file, if the variable cityName = '' is an empty string then interpolate {{currentLocationCity.name}} and if the variable cityName = '!null' is not an empty string then interpolate {{cityByCoordiantes.name}} , how can i achieve this, i can write two different divs for each result and use *ngIf to display one of them, but i think that there has to be a better way of achieving this.

Did you try using Conditional Operator inside your template? — thisdotutkarsh
– thisdotutkarsh, Commented Sep 9, 2021 at 12:23
Instead of nesting div's for conditionally rendering, you can use <ng-container *ngIf=""></ng-container> — Fatih Ersoy
– Fatih Ersoy, Commented Sep 9, 2021 at 12:23

luiscla27 · Accepted Answer · 2021-11-26 17:49:19Z

4

You can use anything like div, ng-container, even ng-template for else condition, but you can simply use ternary operator like this:

<ng-container>
    {{ cityName ?  cityByCoordiantes.name : currentLocationCity.name}}
</ng-container>

edited Nov 26, 2021 at 17:49

luiscla27

6,5542 gold badges47 silver badges56 bronze badges

answered Sep 9, 2021 at 12:32

Apoorva Chikara

8,8033 gold badges24 silver badges39 bronze badges

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

1 Comment

besim Over a year ago

thanks it was exactly what i was looking for

Collectives™ on Stack Overflow

how can i use string interpolation based on condition in angular

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