CODEWITHSUNDEEP
angularbindinginterpolation
J. Ordaz
J. Ordaz

Reputation: 423

What is a question mark for in the next expression in an angular 2 app

Just wondering what does the question mark means in the next expression in an angular 2 app.

<h1>
 Time Remaining: {{ currentExercise.duration? - exerciseRunningDuration }}
</h1>

Upvotes: 3

Views: 4424

Answers (4)

Amir BenAmara
Amir BenAmara

Reputation: 686

<h1>
 Time Remaining: {{ currentExercise?.duration - exerciseRunningDuration }}
</h1>

The ? makes the property optional. If the parent scope property : currentExercise doesn't exist, it will throw a NON_ASSIGNABLE_MODEL_EXPRESSION exception. You can avoid this behavior using =? or =?attr in order to flag the property as optional.

Upvotes: 0

Suleka_28
Suleka_28

Reputation: 2919

As the previous answers have stated it is a typo and as Harshl have said if the (.) was after ? mark, Angular treats it as a ternary operator. but if the statement was as:

<h1>
 Time Remaining: {{ currentExercise?.duration - exerciseRunningDuration }}
</h1>enter code here

the question mark acts as a safe navigation operator. "It provides a way to guard against null and undefined values in property paths.The expression bails out when it hits the first null value. The display will be blank, but the app will keep rolling without errors". (Angular Documentation)

Furthermore, if the code was as follows:

<h1>
Time Remaining: {{ currentExercise.duration - exerciseRunningDuration }}
</h1>enter code here

If the 'duration' property of 'currentExercise' was null, Angular would throw a null reference error and the whole view would disappear. That is why using the safe navigation operator is important.

Upvotes: 1

Vitor Hugo F. Lopes
Vitor Hugo F. Lopes

Reputation: 101

Just complementing the @silentsod comment, because the documentation URL changed.

It's a typo for safe navigation operator (?.)

<h1>
 Time Remaining: {{ currentExercise?.duration - exerciseRunningDuration }}
</h1>

Upvotes: 1

Harshal Patil
Harshal Patil

Reputation: 21030

This is clearly typo/printing error. If you don't have (.) after ? mark then, Angular template compiler will treat it as a ternary operator.

Upvotes: 2

Related Questions