<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto">The safe navigation operator <code class="notranslate">?.</code> is great, but it would be even better if it also supported bracket notation, <code class="notranslate">foo?[bar]</code>. This was first mentioned here, but didn't get any traction<br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="58959849" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/791" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/791/hovercard?comment_id=77801474&amp;comment_type=issue_comment" href="https://github.com/angular/angular/issues/791#issuecomment-77801474">#791 (comment)</a></p>
<h1 dir="auto"><g-emoji class="g-emoji" alias="rocket" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f680.png">🚀</g-emoji> feature request</h1>
<h3 dir="auto">Relevant Package</h3>
<p dir="auto"><code class="notranslate">@angular/compiler</code></p>
<h3 dir="auto">Description</h3>
<p dir="auto"><a href="https://github.com/tc39/proposal-optional-chaining">Optional chaining</a>[1] reached stage 4. We've been supporting similar syntax in templates for a while now, calling it the <a href="https://angular.io/guide/template-syntax#safe-navigation-operator" rel="nofollow">"safe navigation operator"</a>[2]. For simplicity and smaller payload, we can consider aligning with the spec in future versions of the framework.</p>
<p dir="auto">There are a couple of semantical and syntactical differences between optional chaining and safe navigation.</p>
<h2 dir="auto">Syntax</h2>
<p dir="auto">Optional chaining has the following syntax:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="obj?.prop       // optional static property access
obj?.[expr]     // optional dynamic property access
func?.(...args) // optional function or method call"><pre class="notranslate"><span class="pl-s1">obj</span><span class="pl-kos">?.</span><span class="pl-c1">prop</span>       <span class="pl-c">// optional static property access</span>
<span class="pl-s1">obj</span><span class="pl-kos">?.</span><span class="pl-kos">[</span><span class="pl-s1">expr</span><span class="pl-kos">]</span>     <span class="pl-c">// optional dynamic property access</span>
<span class="pl-en">func</span><span class="pl-kos">?.</span><span class="pl-kos">(</span>...<span class="pl-s1">args</span><span class="pl-kos">)</span> <span class="pl-c">// optional function or method call</span></pre></div>
<p dir="auto">Safe navigation supports only direct property access. Optional chaining supports this, as well as, method calls and function calls. Function calls are particularly useful in iterators:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="iterator.return?.()"><pre class="notranslate"><span class="pl-s1">iterator</span><span class="pl-kos">.</span><span class="pl-en">return</span><span class="pl-kos">?.</span><span class="pl-kos">(</span><span class="pl-kos">)</span></pre></div>
<h2 dir="auto">Semantics</h2>
<p dir="auto">With optional chaining, the expression <code class="notranslate">a?.b</code> will be translated to <code class="notranslate">a == null ? undefined : a.b</code>. In Angular, the semantics of the same expression would be <code class="notranslate">null == a ? null : a.b</code>.</p>
<p dir="auto">If <code class="notranslate">a</code> is <code class="notranslate">null</code> or <code class="notranslate">undefined</code>, the expression <code class="notranslate">typeof a?.b</code> would evaluate to <code class="notranslate">"object"</code> with optional chaining and <code class="notranslate">"undefined"</code> in Angular's safe navigation operator.</p>
<p dir="auto">Except the mentioned difference above, method calls are compiled similarly:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="a?.b()
a == null ? undefined : a.b()"><pre class="notranslate"><span class="pl-s1">a</span><span class="pl-kos">?.</span><span class="pl-en">b</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-s1">a</span> <span class="pl-c1">==</span> <span class="pl-c1">null</span> ? <span class="pl-c1">undefined</span> : <span class="pl-s1">a</span><span class="pl-kos">.</span><span class="pl-en">b</span><span class="pl-kos">(</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">In both, optional chaining and safe navigation in templates, stacking the operators is translated the same way: <code class="notranslate">(a?.b).c?.d</code> becomes <code class="notranslate">null == a ? null : null == a.b.c ? null : a.b.c.d</code>.</p>
<p dir="auto">Another difference seems to be the way parentheses are handled. The optional chaining spec defines that <code class="notranslate">null==e.foo?null:e.foo.b.c</code> should be translated to <code class="notranslate">(a == null ? undefined : a.b).c</code>. In Angular the same expression translates to <code class="notranslate">null == a ? null : a.b.c</code>.</p>
<p dir="auto">PS: looks like the last issue is fixed by <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="532351186" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/34221" data-hovercard-type="pull_request" data-hovercard-url="/angular/angular/pull/34221/hovercard" href="https://github.com/angular/angular/pull/34221">#34221</a>.</p>
<hr>
<p dir="auto">[1] Optional chaining spec <a href="https://github.com/tc39/proposal-optional-chaining">https://github.com/tc39/proposal-optional-chaining</a><br>
[2] Safe navigation <a href="https://angular.io/guide/template-syntax#safe-navigation-operator" rel="nofollow">https://angular.io/guide/template-syntax#safe-navigation-operator</a></p>