Does it says that using Safe Navigation Operator will not render(update) data which was null at first but eventually got changed say because of AJAX call updated that object after some time?
No. It means that the expression is not evaluated after it detects some null value (but won't stop from rendering if it changes in the future to some non-null value).
For example if in component.ts you have
val = null;
// ...
someService.someMethod().susbcribe(val => this.val);
and in the component.html you have
{{val?.someProperty}}
Initially nothing will be rendered because val is null.
Now, once some value arrives inside the susbcribe and this.val gets some non-null value, the value of val.someProperty is rendered in the view.
See a demo using a timeout.
Answer from lealceldeiro on Stack OverflowDoes it says that using Safe Navigation Operator will not render(update) data which was null at first but eventually got changed say because of AJAX call updated that object after some time?
No. It means that the expression is not evaluated after it detects some null value (but won't stop from rendering if it changes in the future to some non-null value).
For example if in component.ts you have
val = null;
// ...
someService.someMethod().susbcribe(val => this.val);
and in the component.html you have
{{val?.someProperty}}
Initially nothing will be rendered because val is null.
Now, once some value arrives inside the susbcribe and this.val gets some non-null value, the value of val.someProperty is rendered in the view.
See a demo using a timeout.
Also, be very careful when using the safe navigation operator in an 'if' clause, when you are trying to evaluate whether an object property exists or not.
If you have a boolean, as a property value, and it is false, the program won't execute inside the 'if' clause, like:
const data = {
showProducts = false;
};
if( data?.showProducts ){
...
}
If you want to see if a property exists or not, use:
if( 'showProducts' in data ){
...
}
The safe navigation operator definitely has its uses, but just be careful when using it, with falsey values.
I probably could have lest this answer as a comment. but I am sick and tired of not being able to format my comments.
! is non-null assertion operator (post-fix expression) - it just saying to type checker that you're sure that a is not null or undefined.
the operation
a!produces a value of the type ofawithnullandundefinedexcluded
Optional chaining finally made it to typescript (3.7)
The optional chaining operator
?.permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid. The?.operator functions similarly to the.chaining operator, except that instead of causing an error if a reference is nullish (nullorundefined), the expression short-circuits with a return value ofundefined. When used with function calls, it returnsundefinedif the given function does not exist.
Syntax:
obj?.prop // Accessing object's property
obj?.[expr] // Optional chaining with expressions
arr?.[index] // Array item access with optional chaining
func?.(args) // Optional chaining with function calls
Pay attention:
Optional chaining is not valid on the left-hand side of an assignment
const object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
Since TypeScript 3.7 was released you can use optional chaining now.
Property example:
let x = foo?.bar.baz();
This is equvalent to:
let x = (foo === null || foo === undefined)
? undefined
: foo.bar.baz();
Moreover you can call:
Optional Call
function(otherFn: (par: string) => void) {
otherFn?.("some value");
}
otherFn will be called only if otherFn won't be equal to null or undefined
Usage optional chaining in IF statement
This:
if (someObj && someObj.someProperty) {
// ...
}
can be replaced now with this
if (someObj?.someProperty) {
// ...
}
Ref: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html
Is there something like a Safe Navigation Operator that can be used on Arrays?
Yes, what you are looking for is known as the Optional Chaining operator (JavaScript / TypeScript).
The syntax shown in the MDN JavaScript documentation is:
obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)
So, to achieve what you want, you need to change your example from:
<h6>{{simpleData?[0]}}</h6>
To:
<h6>{{simpleData?.[0]}}</h6>
^
Also see How to use optional chaining with array in Typescript?.
is there a more simpler(by code) way just like the Safe Navigation Operator?
There is ternary operator.
condition ? expr1 : expr2
<h6>{{simpleData?simpleData[0]:''}}</h6>
There is a way to use safe navigation operator with bracket notation. Actually safe navigation operator is officialy called optional chaining operator. Syntax from the docs:
obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)
So in your case you need to use translations?.['Tooltip.O2'].
Can you initialize the translations obj? It would avoid any error.
translations = {}