a17fd43fd5
Updating the doc to add the beginning label. I'm not sure if this was the way it was intended, but it looked strange with just an ending </label> tag. PR Close #28602
61 lines
1.7 KiB
HTML
61 lines
1.7 KiB
HTML
|
|
<div>
|
|
<h1>Interpolation and Template Expressions</h1>
|
|
<hr />
|
|
|
|
<div>
|
|
<h2>Interpolation</h2>
|
|
<!-- #docregion interpolation-example1 -->
|
|
<h3>Current customer: {{ currentCustomer }}</h3>
|
|
<!-- #enddocregion interpolation-example1 -->
|
|
|
|
<!-- #docregion component-property -->
|
|
<p>{{title}}</p>
|
|
<div><img src="{{itemImageUrl}}"></div>
|
|
<!-- #enddocregion component-property -->
|
|
|
|
<h3>Evaluating template expressions </h3>
|
|
<h4>Simple evaluation (to a string):</h4>
|
|
<!-- #docregion convert-string -->
|
|
<!-- "The sum of 1 + 1 is 2" -->
|
|
<p>The sum of 1 + 1 is {{1 + 1}}.</p>
|
|
<!-- #enddocregion convert-string -->
|
|
|
|
<h4>Evaluates using a method (also evaluates to a string):</h4>
|
|
<!-- #docregion invoke-method -->
|
|
<!-- "The sum of 1 + 1 is not 4" -->
|
|
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>
|
|
<!-- #enddocregion invoke-method -->
|
|
</div>
|
|
|
|
<hr />
|
|
<h2>Expression Context</h2>
|
|
|
|
<div>
|
|
<h3>Component context, properties of app.component.ts:</h3>
|
|
<!-- #docregion component-context -->
|
|
<h4>{{recommended}}</h4>
|
|
<img [src]="itemImageUrl2">
|
|
<!-- #enddocregion component-context -->
|
|
</div>
|
|
|
|
<div>
|
|
<h4>Template context, template input variables (let customer):</h4>
|
|
<!-- #docregion template-input-variable -->
|
|
<ul>
|
|
<li *ngFor="let customer of customers">{{customer.name}}</li>
|
|
</ul>
|
|
<!-- #enddocregion template-input-variable -->
|
|
</div>
|
|
|
|
<div (keyup)="0">
|
|
<h4>Template context: template reference variables (#customerInput):</h4>
|
|
<!-- #docregion template-reference-variable -->
|
|
<label>Type something:
|
|
<input #customerInput>{{customerInput.value}}
|
|
</label>
|
|
<!-- #enddocregion template-reference-variable -->
|
|
</div>
|
|
|
|
</div>
|