George Kalpakas
f6adc0c3f9
Update `tsconfig[.*].json`. Also, all make necessary changes to ensure the example apps can be successfully built with the new, stricter type-checking options. PR Close #36015
81 lines
2.4 KiB
HTML
81 lines
2.4 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 -->
|
|
<!-- Assert color is defined, even if according to the `Item` type it could be undefined. -->
|
|
<p>The item's color is: {{item.color!.toUpperCase()}}</p>
|
|
<!-- #enddocregion non-null -->
|
|
|
|
|
|
|