Why can't I use two different json content in the condition part in Angular, is there an error in my spelling?

Issue

I'm developing language alternatives in a project in Angular, I haven't had a problem so far but I'm getting an error on this line

it works like this

stepStatus == 1 ? 'Start Step' : 'Procedure.EndStep' | translate  }}
<ion-icon slot="end" [name]="stepStatus == 1 ? 'play' : 'square'" size="20px"></ion-icon>

but it doesn't work like that

stepStatus == 1 ? 'Procedure.StartStep' | translate : 'Procedure.EndStep' | translate  }}
<ion-icon slot="end" [name]="stepStatus == 1 ? 'play' : 'square'" size="20px"></ion-icon>

My Json

"Procedure":{
        "Procedure" : "Procedure",
        "AddPhoto" : "Add Photo",
        "View": "View",
        "StartStep":"Start Step",
        "EndStep": "End Step"  
    },

Solution

As described in the documentation, the pipe operator has a higher precedence than the ternary operator (?:). What you should do in your case is to wrap your ternary to bend operator precedence to your will:

{{ (stepStatus == 1 ? 'Procedure.StartStep' : 'Procedure.EndStep') | translate }}

Answered By - Octavian Mărculescu