mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
80 lines
2.3 KiB
HTML
80 lines
2.3 KiB
HTML
<h1>{{title}}</h1>
|
|
|
|
<hr />
|
|
|
|
<h2 id="pipes">Pipes</h2>
|
|
<!-- #docregion uppercase-pipe-->
|
|
<p>Title through uppercase pipe: {{title | uppercase}}</p>
|
|
<!-- #enddocregion uppercase-pipe-->
|
|
<!-- #docregion pipe-chain-->
|
|
<!-- convert title to uppercase, then to lowercase -->
|
|
<p>Title through a pipe chain: {{title | uppercase | lowercase}}</p>
|
|
<!-- #enddocregion pipe-chain-->
|
|
|
|
<!-- #docregion date-pipe -->
|
|
<!-- pipe with configuration argument => "February 25, 1980" -->
|
|
<p>Manufacture date with date format pipe: {{item.manufactureDate | date:'longDate'}}</p>
|
|
<!-- #enddocregion date-pipe -->
|
|
<p>Manufacture date with uppercase pipe: {{(item.manufactureDate | date:'longDate') | uppercase}}</p>
|
|
<!-- #docregion json-pipe -->
|
|
<p>Item json pipe: {{item | json}}</p>
|
|
<!-- #enddocregion json-pipe -->
|
|
|
|
<!-- #docregion currency-pipe -->
|
|
<p>Price with currency pipe: {{item.price | currency:'USD'}}</p>
|
|
<!-- #enddocregion currency-pipe -->
|
|
<hr />
|
|
|
|
<h2>Safe navigation operator: <code>?</code> and <code>null</code></h2>
|
|
<!-- #docregion safe -->
|
|
<p>The item name is: {{item?.name}}</p>
|
|
<!-- #enddocregion safe -->
|
|
|
|
<!-- #docregion safe-null -->
|
|
<p>The nullItem name is: {{nullItem?.name}}</p>
|
|
<!-- #enddocregion safe-null -->
|
|
|
|
<hr />
|
|
|
|
<h2>Error because nullItem is null:</h2>
|
|
<!-- uncomment to see error in console -->
|
|
<!-- <p>The null item's name is {{nullItem.name}}</p> -->
|
|
|
|
<div>
|
|
<p>Uncomment above paragraph and see console log for error about nullItem.name:</p>
|
|
<p class="error">TypeError: Cannot read property 'name' of null</p>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<h2>The div will not display and there's no error: </h2>
|
|
<div class="no-show-div">
|
|
<p>There's a child paragraph element in here that doesn't show. </p>
|
|
<p *ngIf="nullItem">The null item's name {{nullItem.name}}</p>
|
|
</div>
|
|
<hr />
|
|
|
|
<h2>Div shows but interpolation doesn't:</h2>
|
|
<div>
|
|
<h3>Using and (<code>&&</code>)</h3>
|
|
<p>The null item's name is: {{nullItem && nullItem.name}}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Using safe navigation operator (<code>?</code>)</h3>
|
|
<!-- No item, no problem! -->
|
|
<p>The null item's name is: {{nullItem?.name}}</p>
|
|
</div>
|
|
|
|
|
|
<!-- non-null assertion operator -->
|
|
<hr />
|
|
<h2>Non-null assertion operator (<code>!</code>)</h2>
|
|
<div>
|
|
<!-- #docregion non-null -->
|
|
<!--No color, no error -->
|
|
<p *ngIf="item">The item's color is: {{item!.color}}</p>
|
|
<!-- #enddocregion non-null -->
|
|
|
|
|
|
|