Is there something like a Safe Navigation Operator that can be used on Arrays?

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>

Related