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.

Answer 1

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>