@@ -28,7 +28,7 @@ include ../_util-fns
28
28
* [Input and output properties](#inputs-outputs)
29
29
* [Template expression operators](#expression-operators)
30
30
* [pipe](#pipe)
31
- * ["elvis " (?.)](#elvis )
31
+ * ["safe navigation operator " (?.)](#safe-navigation-operator )
32
32
// #enddocregion intro
33
33
.l-sub-section
34
34
:marked
@@ -1576,7 +1576,7 @@ figure.image-display
1576
1576
:marked
1577
1577
## Template expression operators
1578
1578
The template expression language employs a subset of JavaScript syntax supplemented with a few special operators
1579
- for specific scenarios. We'll cover two of these operators: _pipe_ and _Elvis_ .
1579
+ for specific scenarios. We'll cover two of these operators: _pipe_ and _safe navigation operator_ .
1580
1580
// #enddocregion expression-operators
1581
1581
1582
1582
// #docregion expression-operators-pipe-1
@@ -1608,23 +1608,23 @@ figure.image-display
1608
1608
// #enddocregion expression-operators-pipe-4
1609
1609
+ makeExample('template-syntax/ts/app/app.component.html' , 'pipes-json' )( format ="." )
1610
1610
1611
- // #docregion expression-operators-elvis -1
1611
+ // #docregion expression-operators-safe -1
1612
1612
:marked
1613
- <a id="elvis "></a>
1614
- ### The Elvis operator ( ?. ) and null property paths
1613
+ <a id="safe-navigation-operator "></a>
1614
+ ### The safe navigation operator ( ?. ) and null property paths
1615
1615
1616
- The Angular **Elvis operator (`?.`)** — perhaps better described as the "safe navigation operator" — is a fluent and convenient way to guard against null and undefined values in property paths.
1616
+ The Angular **safe navigation operator (`?.`)** is a fluent and convenient way to guard against null and undefined values in property paths.
1617
1617
Here it is, protecting against a view render failure if the `currentHero` is null.
1618
- // #enddocregion expression-operators-elvis -1
1619
- + makeExample('template-syntax/ts/app/app.component.html' , 'elvis -2' )( format ="." )
1620
- // #docregion expression-operators-elvis -2
1618
+ // #enddocregion expression-operators-safe -1
1619
+ + makeExample('template-syntax/ts/app/app.component.html' , 'safe -2' )( format ="." )
1620
+ // #docregion expression-operators-safe -2
1621
1621
:marked
1622
1622
Let’s elaborate on the problem and this particular solution.
1623
1623
1624
1624
What happens when the following data bound `title` property is null?
1625
- // #enddocregion expression-operators-elvis -2
1626
- + makeExample('template-syntax/ts/app/app.component.html' , 'elvis -1' )( format ="." )
1627
- // #docregion expression-operators-elvis -3
1625
+ // #enddocregion expression-operators-safe -2
1626
+ + makeExample('template-syntax/ts/app/app.component.html' , 'safe -1' )( format ="." )
1627
+ // #docregion expression-operators-safe -3
1628
1628
:marked
1629
1629
The view still renders but the displayed value is blank; we see only "The title is" with nothing after it.
1630
1630
That is reasonable behavior. At least the app doesn't crash.
@@ -1634,14 +1634,14 @@ figure.image-display
1634
1634
1635
1635
code-example( format ="" language ="html" ) .
1636
1636
The null hero's name is {{nullHero.firstName}}
1637
- // #enddocregion expression-operators-elvis -3
1638
- // #docregion expression-operators-elvis -4
1637
+ // #enddocregion expression-operators-safe -3
1638
+ // #docregion expression-operators-safe -4
1639
1639
:marked
1640
1640
JavaScript throws a null reference error, and so does Angular:
1641
1641
code-example( format ="" language ="html" ) .
1642
1642
TypeError: Cannot read property 'firstName' of null in [null]
1643
- // #enddocregion expression-operators-elvis -4
1644
- // #docregion expression-operators-elvis -5
1643
+ // #enddocregion expression-operators-safe -4
1644
+ // #docregion expression-operators-safe -5
1645
1645
:marked
1646
1646
Worse, the *entire view disappears*.
1647
1647
@@ -1659,30 +1659,30 @@ code-example(format="" language="html").
1659
1659
Unfortunately, our app crashes when the `currentHero` is null.
1660
1660
1661
1661
We could code around that problem with [NgIf](#ngIf).
1662
- // #enddocregion expression-operators-elvis -5
1663
- + makeExample('template-syntax/ts/app/app.component.html' , 'elvis -4' )( format ="." )
1664
- // #docregion expression-operators-elvis -6
1662
+ // #enddocregion expression-operators-safe -5
1663
+ + makeExample('template-syntax/ts/app/app.component.html' , 'safe -4' )( format ="." )
1664
+ // #docregion expression-operators-safe -6
1665
1665
:marked
1666
1666
Or we could try to chain parts of the property path with `&&`, knowing that the expression bails out
1667
1667
when it encounters the first null.
1668
- // #enddocregion expression-operators-elvis -6
1669
- + makeExample('template-syntax/ts/app/app.component.html' , 'elvis -5' )( format ="." )
1670
- // #docregion expression-operators-elvis -7
1668
+ // #enddocregion expression-operators-safe -6
1669
+ + makeExample('template-syntax/ts/app/app.component.html' , 'safe -5' )( format ="." )
1670
+ // #docregion expression-operators-safe -7
1671
1671
:marked
1672
1672
These approaches have merit but can be cumbersome, especially if the property path is long.
1673
1673
Imagine guarding against a null somewhere in a long property path such as `a.b.c.d`.
1674
- // #enddocregion expression-operators-elvis -7
1675
- // #docregion expression-operators-elvis -8
1674
+ // #enddocregion expression-operators-safe -7
1675
+ // #docregion expression-operators-safe -8
1676
1676
:marked
1677
- The Angular Elvis operator (`?.`) is a more fluent and convenient way to guard against nulls in property paths.
1677
+ The Angular safe navigation operator (`?.`) is a more fluent and convenient way to guard against nulls in property paths.
1678
1678
The expression bails out when it hits the first null value.
1679
1679
The display is blank, but the app keeps rolling without errors.
1680
- // #enddocregion expression-operators-elvis -8
1681
- + makeExample('template-syntax/ts/app/app.component.html' , 'elvis -6' )( format ="." )
1682
- // #docregion expression-operators-elvis -9
1680
+ // #enddocregion expression-operators-safe -8
1681
+ + makeExample('template-syntax/ts/app/app.component.html' , 'safe -6' )( format ="." )
1682
+ // #docregion expression-operators-safe -9
1683
1683
:marked
1684
1684
It works perfectly with long property paths such as `a?.b?.c?.d`.
1685
- // #enddocregion expression-operators-elvis -9
1685
+ // #enddocregion expression-operators-safe -9
1686
1686
1687
1687
// #docregion summary
1688
1688
.l-main-section
0 commit comments