feat: add bracket access to safe navigation operator

[karptonite]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

The safe navigation operator ?. is great, but it would be even better if it also supported bracket notation, foo?[bar]. This was first mentioned here, but didn't get any traction
#791 (comment)

[akram1905]

Any updates?
Now we have Angular Language Service, it's annoying seeing this "error".
Mostly I need it in errors validations like input.errors?['required'] instead of input.errors?.required.

[trotyl]

This syntax is too ambiguous, and already got rejected in optional chaining proposal. The final syntax should be foo?.[bar] or foo??[bar] (Waiting for tc39-notes to update).

Writing different syntax in logic code and template code may not be a good idea.

[haskelcurry]

Any updates on this? Thank you

[bvandenbon]

Not only for arrays, but also for objects this would be useful.
i.e.

// for a given object o
const o = { "with.dots" : "..." }

// accessing its value in typescript or es6.
const withDots = o && o["with.dots"];

// accessing the value in an Angular template:
{{ o?["with.dots"] }}

[sheikalthaf]

@chuckjaz @hansl @trotyl Any update on this?

[trotyl]

@sheikalthaf In JavaScript the syntax has been settled as a?.[x] , I'm not sure whether Angular are currently consider this, but likely no one would like to write different syntax between TypeScript and template expression.

[AbakumovAlexandr]

@trotyl I guess we mostly interested in being able to navigation safely with arrays\objects.

I believe very little people her are concerned in it being implemented via either foo?[bar] or foo?.[bar], so whichever is simpler\faster to implement. This request for the very basic syntactic sugar is more than 2 years old already.

[electrofLy]

Any updates or workarounds on this?

[sheikalthaf]

Any possibility of this feature to be available in ivy?

[nadeemramsing]

Any news on this feature?

[pkozlowski-opensource]

So, this is supported in TS 3.7 but not supported in expressions used in Angular templates: https://ng-run.com/edit/sqFt4zLEyZ9oOMDtmOxp

[pkozlowski-opensource]

For the record, we are tracking all issues related to ? support in #34385

[craftmaster2190]

Arrays/Indexes are safely navigated in templates but not in the way one would expect:
In TypeScript: foo?.bar?.[0]?.quxx
In Angular Templates: foo?.bar[0]?.quxx
See #13254
and f31c947

However, it is not possible to safely navigate only one level:
In TypeScript: foo?.[0] is valid.
In Angular Templates: foo?.[0] is invalid.

In TypeScript: foo?.bar?.[0] is valid and safely navigates the expression.
In Angular Templates: foo?.bar[0] is valid and safely navigates the expression.

[pkozlowski-opensource]

I'm going to close it as a duplicate of #34385 - I think that the good, longer-term strategy is to align Angular expression syntax with what is cooking on the ES side: https://github.com/tc39/proposal-optional-chaining - we don't want to maintain same syntax with the different semantics on the Angular side.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}